@acpaas-ui/ngx-forms 6.1.10 → 6.1.11

package/src/lib/search-filter/README.md

@@ -1,86 +0,0 @@
-# @acpaas-ui/ngx-forms
-
-The searchfilter is a JIRA-like filter component with remote search capabilities.
-
-## Usage
-
-```typescript
-import { SearchFilterModule } 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() id: string;`                    | -                             | Field id.                                                                                                                         |
-| `@Input() name: string;`                  | -                             | Field name.                                                                                                                       |
-| `@Input() flyoutSize: enum;`              | `FlyoutSize.Small`            | Passed along to [`auiFlyout`](https://github.com/digipolisantwerp/antwerp-ui_angular/tree/master/packages/flyout/lib/src/flyout). |
-| `@Input() flyoutAlign: string;`           | `'left'`                      | Passed along to [`auiFlyout`](https://github.com/digipolisantwerp/antwerp-ui_angular/tree/master/packages/flyout/lib/src/flyout). |
-| `@Input() label: string;`                 | `'Filter'`                    | Field label.                                                                                                                      |
-| `@Input() labelDeselect: string;`         | `'Alles deselecteren'`        | Clear button text.                                                                                                                |
-| `@Input() labelResults: string;`          | `'Resultaten'`                | Result list header text.                                                                                                          |
-| `@Input() labelNoResults: string;`        | `'Geen resultaten gevonden.'` | Text shown when no results are found.                                                                                             |
-| `@Input() choices: SearchFilterChoice[];` | -                             | Available choices.                                                                                                                |
-| `@Input() remote: boolean;`               | `false`                       | Enable remote searching.                                                                                                          |
-| `@Input() description: string;`           | `'Zoeken'`                    | Search field description text.                                                                                                    |
-| `@Input() inputDelay: number;`            | `150`                         | Delay the search callback on the input field.                                                                                     |
-| `@Input() showAllByDefault: boolean;`     | `false`                       | Show all items on init, will trigger a search when `remote` is `true`.                                                            |
-| `@Output() search: Event<string>;`        | -                             | Callback triggered when `remote` is true.                                                                                         |
-
-### Example
-
-```typescript
-import { SearchFilterModule } from '@acpaas-ui/ngx-forms';
-
-@NgModule({
-    imports: [
-        SearchFilterModule,
-    ]
-});
-
-export class AppModule {};
-```
-
-#### Basic
-
-```typescript
-import { SearchFilterChoice } from '@acpaas-ui/ngx-forms';
-
-public stuff: SearchFilterChoice[] = [{
-        label: "First item",
-        value: "one",
-    }, {
-        label: "Second item",
-        value: "two",
-    }, {
-        label: "Third item",
-        value: "three",
-    }, {
-        label: "Fourth item",
-        value: "four",
-}];
-```
-
-```html
-<aui-search-filter
-  id="test"
-  name="test"
-  label="Find stuff"
-  labelDeselect="Clear stuff"
-  labelResults=""
-  labelNoResults="Couldn't find stuff!"
-  description="Look for stuff"
-  inputDelay="0"
-  [choices]="stuff"
-  [showAllByDefault]="true"
->
-</aui-search-filter>
-```
-
-## Contributing
-
-Visit our [Contribution Guidelines](../../../../../CONTRIBUTING.md) for more information on how to contribute.

package/src/lib/search-filter/components/search-filter/search-filter.component.html

@@ -1,66 +0,0 @@
-<div [align]="flyoutAlign" [size]="flyoutSize" aria-haspopup="listbox" auiFlyout class="m-search-filter">
-  <div
-    class="a-input"
-    [ngClass]="{
-      'a-input--l': size === 'large',
-      'a-input--s': size === 'small',
-      'has-icon-right': hasClose
-    }"
-  >
-    <label class="a-input__label" for="{{ id + '-search' }}">{{ label }}</label>
-    <small class="a-input__description" id="{{ id + '-description' }}">{{ description }}</small>
-    <div class="m-search-filter__input">
-      <input
-        (input)="filterDataFromSearch()"
-        [(ngModel)]="query"
-        [attr.aria-labelledby]="id + '-label'"
-        [attr.disabled]="isDisabled ? '' : null"
-        aria-autocomplete="list"
-        id="{{ id + '-search' }}"
-        name="{{ name + '-search' }}"
-        value="{{ getSelectedLabels() }}"
-        type="text"
-        auiFlyoutAction
-      />
-      <button
-        *ngIf="hasClose"
-        [ngClass]="{
-          'a-button--l': size === 'large',
-          'a-button--s': size === 'small'
-        }"
-        class="a-button a-button--outlined has-icon m-search-filter__button a-button--danger"
-        aria-label="Zoekopdracht wissen"
-        type="button"
-        (click)="clear()"
-        [attr.disabled]="isDisabled || closeDisabled ? '' : null"
-      >
-        <aui-icon name="ai-close"></aui-icon>
-      </button>
-      <aui-icon *ngIf="!hasClose" name="ai-close"></aui-icon>
-    </div>
-  </div>
-  <div auiFlyoutZone class="m-search-filter__search m-search-filter__search--scroll">
-    <p *ngIf="labelResults" class="h6 m-search-filter__results-title u-margin-bottom-xs">{{ labelResults }}</p>
-    <div *ngIf="loading" class="u-text-center u-padding a-spinner"></div>
-    <ul *ngIf="!loading" class="a-checkbox-list a-checkbox-list--flushed">
-      <li *ngIf="!filteredChoices.length" class="a-checkbox-list__item">
-        <p class="u-margin-xs">{{ labelNoResults }}</p>
-      </li>
-      <li *ngFor="let choice of filteredChoices; index as i" class="a-checkbox-list__item">
-        <div class="a-input a-checkbox-list__checkbox">
-          <div class="a-input__checkbox">
-            <input
-              (change)="toggleSelected(choice.label)"
-              [attr.disabled]="isDisabled ? true : null"
-              [checked]="selectedItems.indexOf(choice.label) >= 0"
-              id="{{ 'checkbox--' + i + '--' + id }}"
-              name="{{ 'checkbox--' + i + '--' + id }}"
-              type="checkbox"
-            />
-            <label for="{{ 'checkbox--' + i + '--' + id }}">{{ choice.label }}</label>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-</div>

package/src/lib/search-filter/components/search-filter/search-filter.component.scss

@@ -1,23 +0,0 @@
-.m-search-filter {
-  display: block;
-  &__input {
-    display: flex;
-    padding: 0;
-
-    input {
-      border-right: none;
-    }
-  }
-  &__button {
-    display: inline-block;
-    padding: 0;
-    position: relative;
-    vertical-align: middle;
-
-    .ai {
-      position: relative;
-      transform: none !important;
-      top: 0;
-    }
-  }
-}

package/src/lib/search-filter/components/search-filter/search-filter.component.spec.ts

@@ -1,264 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { FlyoutModule } from '@acpaas-ui/ngx-flyout';
-import { IconModule } from '@acpaas-ui/ngx-icon';
-
-import { SearchFilterComponent } from './search-filter.component';
-
-describe('The SearchFilter Component', () => {
-  let comp: SearchFilterComponent;
-  let fixture: ComponentFixture<SearchFilterComponent>;
-  let de: DebugElement;
-  let el: HTMLElement;
-
-  // waitForAsync beforeEach
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [FormsModule, FlyoutModule, IconModule],
-      declarations: [SearchFilterComponent],
-    }).compileComponents();
-  }));
-
-  // synchronous beforeEach
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SearchFilterComponent);
-
-    comp = fixture.componentInstance;
-
-    de = fixture.debugElement.query(By.css('.m-search-filter'));
-    el = de.nativeElement;
-  });
-
-  it('should show a spinner when loading results', () => {
-    comp.loading = true;
-
-    fixture.detectChanges();
-
-    expect(el.querySelector('.a-list')).toBeNull();
-    expect(el.querySelector('a-spinner')).toBeDefined();
-  });
-
-  it('should show the noResults label when not loading and missing results', () => {
-    comp.labelNoResults = 'test-noResults';
-
-    fixture.detectChanges();
-
-    expect(el.querySelectorAll('.a-checkbox-list').length).toBe(1);
-    expect(el.querySelector('.u-margin-xs')?.textContent).toContain('test-noResults');
-  });
-
-  it('should show the clear button when there are selected items', () => {
-    comp.selectedItems = ['one'];
-
-    fixture.detectChanges();
-
-    expect(el.querySelector('.ai-close')).toBeDefined();
-  });
-
-  it('should show the available choices', () => {
-    spyOn(comp, 'getSelectedLabels').and.stub();
-    comp.selectedItems = ['2'];
-    comp.filteredChoices = [
-      {
-        label: 'one',
-        value: '1',
-      },
-      {
-        label: 'two',
-        value: '2',
-      },
-    ];
-
-    fixture.detectChanges();
-
-    expect(el.querySelectorAll('.a-input__checkbox').length).toBe(2);
-
-    const items = Array.from(el.querySelectorAll('.a-input__checkbox'));
-
-    expect(items[0].querySelector('label').textContent).toBe('one');
-    expect(items[1].querySelector('label').textContent).toBe('two');
-    expect(comp.getSelectedLabels).toHaveBeenCalled();
-  });
-
-  it('should update the selectedItems if a valid value is provided', () => {
-    comp.writeValue(['two']);
-
-    expect(comp.selectedItems).toEqual(['two']);
-  });
-
-  it('should clear the selectedItems if an invalid value is provided', () => {
-    comp.selectedItems = ['one'];
-
-    expect(comp.selectedItems).toEqual(['one']);
-
-    comp.writeValue('test' as any);
-
-    expect(comp.selectedItems).toEqual([]);
-  });
-
-  it('should update the filteredChoices OnChange if remote is true', () => {
-    comp.filteredChoices = [];
-    comp.remote = true;
-    comp.loading = true;
-
-    fixture.detectChanges();
-
-    comp.ngOnChanges({
-      choices: {
-        currentValue: [
-          {
-            label: 'one',
-            value: '1',
-          },
-        ],
-      },
-    } as any);
-
-    expect(comp.filteredChoices).toEqual([
-      {
-        label: 'one',
-        value: '1',
-      },
-    ]);
-    expect(comp.loading).toBeFalsy();
-  });
-
-  it('should refilter the choices OnChange if remote is false', () => {
-    spyOn(comp, 'filterData').and.stub();
-
-    fixture.detectChanges();
-
-    comp.ngOnChanges({
-      choices: {
-        currentValue: [
-          {
-            label: 'one',
-            value: '1',
-          },
-        ],
-      },
-    } as any);
-
-    expect(comp.filterData).toHaveBeenCalled();
-  });
-
-  it('should do nothing OnChange if the choices were not updated', () => {
-    spyOn(comp, 'filterData').and.stub();
-
-    fixture.detectChanges();
-
-    comp.ngOnChanges({} as any);
-
-    expect(comp.filterData).not.toHaveBeenCalled();
-  });
-
-  it('should emit a search if filterData is called when remote is true', () => {
-    comp.remote = true;
-    comp.query = 'test';
-
-    spyOn(comp.search, 'emit').and.stub();
-
-    fixture.detectChanges();
-
-    comp.filterData();
-
-    expect(comp.loading).toBeTruthy();
-    expect(comp.search.emit).toHaveBeenCalledWith('test');
-  });
-
-  it('should call filterChoices if filterData is called when remote is false', () => {
-    spyOn(comp.search, 'emit').and.stub();
-    spyOn(comp as any, 'filterChoices').and.stub();
-
-    fixture.detectChanges();
-
-    comp.filterData();
-
-    expect(comp.loading).toBeFalsy();
-    expect(comp.search.emit).not.toHaveBeenCalled();
-    expect((comp as any).filterChoices).toHaveBeenCalled();
-  });
-
-  it('should clear the selectedItems and query, filter the data and update the model on clear', () => {
-    comp.selectedItems = ['one'];
-    comp.query = 'on';
-
-    spyOn(comp, 'filterData').and.stub();
-    spyOn(comp, 'updateModel').and.stub();
-    spyOn(comp, 'onClear').and.stub();
-
-    fixture.detectChanges();
-
-    comp.clear();
-
-    expect(comp.selectedItems.length).toBe(0);
-    expect(comp.query.length).toBe(0);
-    expect(comp.filterData).toHaveBeenCalled();
-    expect(comp.updateModel).toHaveBeenCalledWith([]);
-    expect(comp.onClear).toHaveBeenCalled();
-  });
-
-  it('should add the selected item if it was not in the selectedItems array and update the model value', () => {
-    comp.selectedItems = ['one'];
-
-    spyOn(comp, 'updateModel').and.stub();
-
-    fixture.detectChanges();
-
-    comp.toggleSelected('two');
-
-    expect(comp.selectedItems).toEqual(['one', 'two']);
-    expect(comp.updateModel).toHaveBeenCalledWith(['one', 'two']);
-  });
-
-  it('should remove the selected item if it was present in the selectedItems array and update the model value', () => {
-    comp.selectedItems = ['one', 'two', 'three'];
-
-    spyOn(comp, 'updateModel').and.stub();
-
-    fixture.detectChanges();
-
-    comp.toggleSelected('two');
-
-    expect(comp.selectedItems).toEqual(['one', 'three']);
-    expect(comp.updateModel).toHaveBeenCalledWith(['one', 'three']);
-  });
-
-  it('should update the filteredChoices with choices that match the query', () => {
-    comp.choices = [
-      {
-        label: 'First item',
-        value: 'one',
-      },
-      {
-        label: 'Second item',
-        value: 'two',
-      },
-      {
-        label: 'Third item',
-        value: 'three',
-      },
-      {
-        label: 'Fourth item',
-        value: 'four',
-      },
-      {
-        label: 'Fifth item',
-        value: 'five',
-      },
-    ];
-    comp.query = 'fi';
-
-    fixture.detectChanges();
-
-    (comp as any).filterChoices();
-    expect(comp.filteredChoices.length).toBe(2);
-
-    comp.query = 'item';
-
-    (comp as any).filterChoices();
-    expect(comp.filteredChoices.length).toBe(5);
-  });
-});

package/src/lib/search-filter/components/search-filter/search-filter.component.ts

@@ -1,140 +0,0 @@
-import { Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { debounce, get } from 'lodash-es';
-
-import { FlyoutSize } from '@acpaas-ui/ngx-flyout';
-
-import { SearchFilterChoice } from '../../types/search-filter.types';
-
-@Component({
-  selector: 'aui-search-filter',
-  templateUrl: './search-filter.component.html',
-  styleUrls: ['./search-filter.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SearchFilterComponent), // eslint-disable-line @angular-eslint/no-forward-ref
-      multi: true,
-    },
-  ],
-})
-export class SearchFilterComponent implements OnChanges, ControlValueAccessor {
-  @Input() public id: string;
-  @Input() public name: string;
-  @Input() public flyoutSize = FlyoutSize.Small;
-  @Input() public flyoutAlign;
-  @Input() public label: string;
-  @Input() public description: string;
-  @Input() public labelDeselect = 'Alles deselecteren';
-  @Input() public labelResults = 'Resultaten';
-  @Input() public labelNoResults = 'Geen resultaten gevonden.';
-  @Input() public choices: SearchFilterChoice[] = [];
-  @Input() public remote: boolean;
-  @Input() public inputDelay = 150;
-  @Input() public onSelect: () => void = () => {};
-  @Input() public onClear: () => void = () => {};
-  @Input() public size: 'large' | 'default' | 'small' | 'tiny' = 'default';
-
-  @Output() public search: EventEmitter<string> = new EventEmitter<string>();
-
-  public query = '';
-  public selectedItems: string[] = [];
-  public filteredChoices: SearchFilterChoice[] = [];
-  public loading = false;
-  public isDisabled = false;
-  public closeDisabled = false;
-
-  public filterDataFromSearch: () => {};
-
-  constructor() {
-    this.filterDataFromSearch = debounce(this.filterData.bind(this), this.inputDelay);
-  }
-
-  public updateModel: (_) => any = () => {};
-
-  public writeValue(value: string[]): void {
-    this.selectedItems = Array.isArray(value) ? value : [];
-  }
-
-  public registerOnChange(onChange: (_) => any): void {
-    this.updateModel = onChange;
-  }
-
-  public registerOnTouched(): void {}
-
-  public setDisabledState(isDisabled: boolean): void {
-    this.isDisabled = isDisabled;
-  }
-
-  public ngOnChanges(changes: SimpleChanges): void {
-    const choices = get(changes, 'choices.currentValue', null);
-
-    if (!choices) {
-      return;
-    }
-
-    if (this.remote) {
-      this.filteredChoices = [...choices];
-      this.loading = false;
-    } else {
-      this.filterData();
-    }
-  }
-
-  public filterData(): void {
-    if (this.remote) {
-      this.loading = true;
-
-      return this.search.emit(this.query);
-    }
-
-    this.filterChoices();
-  }
-
-  public clear(): void {
-    this.selectedItems = [];
-    this.query = '';
-    this.filterData();
-    this.updateModel(this.selectedItems);
-    this.onClear();
-  }
-
-  public toggleSelected(choice: string): void {
-    const selected = this.selectedItems.indexOf(choice);
-
-    if (selected < 0) {
-      this.selectedItems = this.selectedItems.concat(choice);
-    } else {
-      this.selectedItems = [...this.selectedItems.slice(0, selected), ...this.selectedItems.slice(selected + 1)];
-    }
-
-    this.updateModel(this.selectedItems);
-    this.onSelect();
-  }
-
-  private filterChoices(): void {
-    this.filteredChoices = this.choices.filter((choice: SearchFilterChoice) => {
-      return (
-        this.selectedItems.indexOf(choice.value) < 0 &&
-        choice.label.toLowerCase().indexOf(this.query.toLowerCase()) >= 0
-      );
-    });
-  }
-
-  public hasClose(): boolean {
-    return this.filteredChoices?.length && this.query?.length > 1;
-  }
-
-  public getSelectedLabels(): string {
-    if (!this.selectedItems.length) {
-      this.closeDisabled = true;
-      return null
-    }
-
-    else {
-      this.closeDisabled = false;
-      return this.selectedItems.map((el) => el).join(', ')
-  }}
-  
-
-}

package/src/lib/search-filter/public-api.ts

@@ -1,3 +0,0 @@
-export { SearchFilterComponent } from './components/search-filter/search-filter.component';
-export { SearchFilterChoice } from './types/search-filter.types';
-export { SearchFilterModule } from './search-filter.module';

package/src/lib/search-filter/search-filter.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { FlyoutModule } from '@acpaas-ui/ngx-flyout';
-import { IconModule } from '@acpaas-ui/ngx-icon';
-import { SearchFilterComponent } from './components/search-filter/search-filter.component';
-
-@NgModule({
-  imports: [CommonModule, FlyoutModule, FormsModule, IconModule],
-  declarations: [SearchFilterComponent],
-  exports: [SearchFilterComponent],
-})
-export class SearchFilterModule {}

package/src/lib/search-filter/types/search-filter.types.ts

@@ -1,4 +0,0 @@
-export interface SearchFilterChoice {
-  label: string;
-  value: string;
-}

package/src/lib/shared/services/search.service.spec.ts

@@ -1,78 +0,0 @@
-import { waitForAsync, inject, TestBed } from '@angular/core/testing';
-
-import { SearchService } from './search.service';
-
-const injectService = (cb) =>
-  inject([SearchService], (searchService: SearchService) => cb(searchService));
-
-describe('The Search Service', () => {
-  let data = [];
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      providers: [SearchService],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    data = [
-      { id: 2, name: 'spiderman' },
-      { id: 3, name: 'wolverine' },
-    ];
-  });
-
-  it(
-    'should return an all items if no search options were provided',
-    injectService((searchService: SearchService) => {
-      expect(searchService.search(data)).toEqual(data);
-    })
-  );
-
-  it(
-    'should return all items when showAllByDefault is true and the query is empty',
-    injectService((searchService: SearchService) => {
-      expect(
-        searchService.search(data, { query: '', showAllByDefault: true })
-      ).toEqual(data);
-    })
-  );
-
-  it(
-    'should return all items if the query does not meet the minLength in the options',
-    injectService((searchService: SearchService) => {
-      expect(searchService.search(data, { minLength: 1, query: '' })).toEqual(
-        data
-      );
-    })
-  );
-
-  it(
-    'should match elements for the provided searchstring',
-    injectService((searchService: SearchService) => {
-      expect(searchService.search(data, { query: 'er', key: 'name' })).toEqual([
-        { id: 2, name: 'spiderman' },
-        { id: 3, name: 'wolverine' },
-      ]);
-    })
-  );
-
-  it(
-    'should match elements in a flat array',
-    injectService((searchService: SearchService) => {
-      expect(
-        searchService.search(['one', 'two', 'three'], { query: 't' })
-      ).toEqual(['two', 'three']);
-    })
-  );
-
-  it(
-    'should log an error for invalid items',
-    injectService((searchService: SearchService) => {
-      spyOn(console, 'error');
-
-      searchService.search(data, { query: 'er', key: 'test' });
-
-      expect(console.error).toHaveBeenCalled();
-    })
-  );
-});