D-Net

import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from "@angular/core";

import {map, startWith} from "rxjs/operators";

export interface Option {

  icon?: string,

  iconClass?: string,

  value: any,

  label: string

}

  selector: '[dashboard-input]',

  template: `

         class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>

           [class.uk-flex-first]="!extraLeft">

            <icon [name]="icon"></icon>

          </span>

        </ng-template>

          <span class="uk-text-muted left">

            <icon [name]="'lock'"></icon>

          </span>

        </ng-template>

                 [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''"

                 [placeholder]="placeholder" [formControl]="formControl"

        </ng-template>

        <ng-template [ngIf]="type === 'textarea'">

                    [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''"

                    [rows]="rows" [placeholder]="placeholder"

          </textarea>

        <ng-template [ngIf]="type === 'select'">

               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"

               [class.clickable]="formControl.enabled"

               [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">

                          (openedChange)="stopPropagation()" [formControl]="formControl"

                          [disableOptionCentering]="true">

                  {{option.label}}

                </mat-option>

              </mat-select>

            </mat-form-field>

          </div>

        </ng-template>

          <div class="input-box"

               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"

               [class.clickable]="formControl.enabled"

               [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">

            <mat-form-field class="uk-width-1-1">

              <mat-chip-list #chipList aria-label="Page selection">

                <mat-chip *ngFor="let chip of formAsArray.controls; let i=index"

                          [removable]="removable">

                  {{chip.value[chipLabel]}}

                  <div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"

                       (click)="searchInput.focus()">{{placeholder}}</div>

                </div>

              </mat-chip-list>

              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">

                <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">

                  {{option.label}}

                </mat-option>

              </mat-autocomplete>

            </mat-form-field>

          </div>

        </ng-template>

        <span *ngIf="formControl.invalid && formControl.errors.error"

              class="uk-text-danger input-message">{{formControl.errors.error}}</span>

        <span *ngIf="note" class="input-message">{{note}}</span>

    </div>

    <mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>

  styleUrls: ['input.component.css']

  @Input('rows') rows: number = 3;

  @Input('options') options: Option[];

  @Input('placeholder') placeholder = '';

  @ViewChild('select') select: MatSelect;

  @Input() extraLeft: boolean = true;

  @Input() iconLeft: boolean = false;

  @Input() chipLabel: string = null;

  public filteredOptions: Observable<Option[]>;

  public searchControl: FormControl;

  }

  }

  ngOnChanges(changes: SimpleChanges) {

    if(changes.formControl) {

      this.reset();

    }

  }

    return (<FormArray> this.formControl);

  }

    this.unsubscribe();

      this.filteredOptions = of(this.options);

      this.searchControl = new FormControl('');

      this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),

        map(option => this.filter(option)));

    }

      this.required = (validator && validator.required);

    }

      }

    if (!this.formControl.value) {

      this.formControl.setValue('');

    }

  }

  unsubscribe() {

    this.subscriptions.forEach(subscription => {

      if(subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

  openSelect() {

    if(this.select) {

      this.select.open();

    }

  }

  removed(index: number) {

    this.formAsArray.removeAt(index);

    this.formAsArray.markAsDirty();

  }

  selected(event: MatAutocompleteSelectedEvent): void {

    this.formAsArray.push(new FormControl(event.option.value));

    this.formAsArray.markAsDirty();

    this.searchControl.setValue('');

    this.searchInput.nativeElement.value = '';

  }

  private filter(value: string): Option[] {

    let options = this.options.filter(option => !this.formAsArray.value.find(value => option.label === value[this.chipLabel]));

    if (!value || value.length == 0) {

      return options;

    }

    const filterValue = value.toString().toLowerCase();

    return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1);

  }