Add chips autocomplete component

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-basic/chips-autocomplete-story-basic.component.html

@@ -0,0 +1,12 @@
+<form [formGroup]="form">
+  <mat-form-field appearance="outline" class="es-chips-autocomplete-story-basic">
+    <mat-label>Fruit</mat-label>
+    <es-chips-autocomplete
+      formControlName="chips"
+      [options]="options"
+      [color]="color"
+      (changeText)="onChangeText($event)"
+    >
+    </es-chips-autocomplete>
+  </mat-form-field>
+</form>

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-basic/chips-autocomplete-story-basic.component.scss

@@ -0,0 +1,5 @@
+.es-chips-autocomplete-story-basic {
+  &.mat-form-field {
+    width: 100%;
+  }
+}

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-basic/chips-autocomplete-story-basic.component.ts

@@ -0,0 +1,28 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { GetFilterOptions } from '../../filter-options';
+
+const OPTIONS = ['Apple', 'Lemon', 'Mango'];
+
+@Component({
+  selector: 'es-chips-autocomplete-story-basic',
+  templateUrl: './chips-autocomplete-story-basic.component.html',
+  styleUrls: ['./chips-autocomplete-story-basic.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class ChipsAutocompleteBasicComponent {
+  public form: FormGroup;
+  public options: string[] = OPTIONS;
+  public color = 'accent';
+
+  constructor(private formBuilder: FormBuilder) {
+    this.form = this.formBuilder.group({
+      chips: []
+    });
+  }
+
+  public onChangeText(text: string) {
+    this.options = GetFilterOptions(text, OPTIONS);
+  }
+}

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-basic/chips-autocomplete-story-basic.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { ES_CHIPS_DEFAULT_OPTIONS } from '../../chips-autocomplete.component';
+import { ESChipsAutocompleteModule } from '../../chips-autocomplete.module';
+import { ChipsAutocompleteBasicComponent } from './chips-autocomplete-story-basic.component';
+
+@NgModule({
+  declarations: [ChipsAutocompleteBasicComponent],
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, ESChipsAutocompleteModule],
+  exports: [ChipsAutocompleteBasicComponent],
+  providers: [
+    {
+      provide: ES_CHIPS_DEFAULT_OPTIONS,
+      useValue: {
+        debounceTime: 1000,
+        freeInput: true,
+        unique: true,
+        selectable: true,
+        removable: true
+      }
+    }
+  ]
+})
+export class ESChipsAutocompleteBasicModule {}

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-basic/chips-autocomplete-story-basic.source.ts

@@ -0,0 +1,36 @@
+export const CHIPS_AUTOCOMPLETE_STORY_BASIC_SOURCE = {
+  html: `
+  <form [formGroup]="form">
+    <mat-form-field appearance="outline">
+      <mat-label>Fruit</mat-label>
+      <es-chips-autocomplete
+        formControlName="chips"
+        [options]="options"
+        [color]="color"
+        (changeText)="onChangeText($event)"
+      >
+      </es-chips-autocomplete>
+    </mat-form-field>
+  </form>`,
+  ts: `
+    import { GetFilterOptions } from '@elonsoft/elonkit/chips-autocomplete';
+    const OPTIONS = ['Apple', 'Lemon', 'Mango'];
+
+    @Component(...)
+    export class ChipsAutocompleteBasicComponent {
+      public form: FormGroup;
+      public options = OPTIONS;
+      public color = 'accent';
+
+      constructor(private formBuilder: FormBuilder) {
+        this.form = this.formBuilder.group({
+          chips: []
+        });
+      }
+
+      public onChangeText(text: string) {
+        this.options = GetFilterOptions(text, OPTIONS);
+      }
+    }
+    `
+};

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-basic/index.ts

@@ -0,0 +1 @@
+export { CHIPS_AUTOCOMPLETE_STORY_BASIC_SOURCE } from './chips-autocomplete-story-basic.source';

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-checkbox/chips-autocomplete-story-checkbox.component.html

@@ -0,0 +1,12 @@
+<form [formGroup]="form">
+  <mat-form-field appearance="outline" class="es-chips-autocomplete-story-checkbox">
+    <mat-label>Countries</mat-label>
+    <es-chips-autocomplete
+      formControlName="chips"
+      [options]="options"
+      [withCheckbox]="withCheckbox"
+      (changeText)="onChangeText($event)"
+    >
+    </es-chips-autocomplete>
+  </mat-form-field>
+</form>

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-checkbox/chips-autocomplete-story-checkbox.component.scss

@@ -0,0 +1,5 @@
+.es-chips-autocomplete-story-checkbox {
+  &.mat-form-field {
+    width: 100%;
+  }
+}

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-checkbox/chips-autocomplete-story-checkbox.component.ts

@@ -0,0 +1,28 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { GetFilterOptions } from '../../filter-options';
+
+const OPTIONS = ['Russia', 'Spain', 'India'];
+
+@Component({
+  selector: 'es-chips-autocomplete-story-checkbox',
+  templateUrl: './chips-autocomplete-story-checkbox.component.html',
+  styleUrls: ['./chips-autocomplete-story-checkbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class ChipsAutocompleteCheckboxComponent {
+  public form: FormGroup;
+  public options: string[] = OPTIONS;
+  public withCheckbox = true;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.form = this.formBuilder.group({
+      chips: []
+    });
+  }
+
+  public onChangeText(text: string) {
+    this.options = GetFilterOptions(text, OPTIONS);
+  }
+}

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-checkbox/chips-autocomplete-story-checkbox.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { ES_CHIPS_DEFAULT_OPTIONS } from '../../chips-autocomplete.component';
+import { ESChipsAutocompleteModule } from '../../chips-autocomplete.module';
+import { ChipsAutocompleteCheckboxComponent } from './chips-autocomplete-story-checkbox.component';
+
+@NgModule({
+  declarations: [ChipsAutocompleteCheckboxComponent],
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, ESChipsAutocompleteModule],
+  exports: [ChipsAutocompleteCheckboxComponent],
+  providers: [
+    {
+      provide: ES_CHIPS_DEFAULT_OPTIONS,
+      useValue: {
+        debounceTime: 1000,
+        freeInput: false,
+        unique: false,
+        selectable: true,
+        removable: true
+      }
+    }
+  ]
+})
+export class ESChipsAutocompleteCheckboxModule {}

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-checkbox/chips-autocomplete-story-checkbox.source.ts

@@ -0,0 +1,36 @@
+export const CHIPS_AUTOCOMPLETE_STORY_CHECKBOX_SOURCE = {
+  html: `
+  <form [formGroup]="form">
+    <mat-form-field appearance="outline">
+      <mat-label>Countries</mat-label>
+      <es-chips-autocomplete
+        formControlName="chips"
+        [options]="options"
+        [withCheckbox]="withCheckbox"
+        (changeText)="onChangeText($event)"
+      >
+      </es-chips-autocomplete>
+    </mat-form-field>
+  </form>`,
+  ts: `
+    import { GetFilterOptions } from '@elonsoft/elonkit/chips-autocomplete';
+    const OPTIONS = ['Russia', 'Spain', 'India'];
+
+    @Component(...)
+    export class ChipsAutocompleteCheckboxComponent {
+      public form: FormGroup;
+      public options = OPTIONS;
+      public withCheckbox = true;
+
+      constructor(private formBuilder: FormBuilder) {
+        this.form = this.formBuilder.group({
+          chips: []
+        });
+      }
+
+      public onChangeText(text: string) {
+        this.options = GetFilterOptions(text, OPTIONS);
+      }
+    }
+    `
+};

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-checkbox/index.ts

@@ -0,0 +1 @@
+export { CHIPS_AUTOCOMPLETE_STORY_CHECKBOX_SOURCE } from './chips-autocomplete-story-checkbox.source';

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-custom/chips-autocomplete-story-custom.component.html

@@ -0,0 +1,21 @@
+<form [formGroup]="form">
+  <mat-form-field appearance="outline" class="es-chips-autocomplete-story-custom">
+    <mat-label>Friends</mat-label>
+    <es-chips-autocomplete
+      formControlName="chips"
+      [options]="options"
+      [valueFn]="valueFn"
+      [displayWith]="displayWith"
+      (changeText)="onChangeText($event)"
+    >
+      <ng-container *esChip="let option">
+        <img class="es-chips-autocomplete-story-custom__option-img" [src]="option.photo" />
+        {{ option.name }}
+      </ng-container>
+      <ng-container *esChipsAutocompleteOption="let option">
+        <img class="es-chips-autocomplete-story-custom__option-img" [src]="option.photo" />
+        {{ option.name }}
+      </ng-container>
+    </es-chips-autocomplete>
+  </mat-form-field>
+</form>

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-custom/chips-autocomplete-story-custom.component.scss

@@ -0,0 +1,11 @@
+.es-chips-autocomplete-story-custom {
+  &__option-img {
+    height: 25px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
+  &.mat-form-field {
+    width: 100%;
+  }
+}

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-custom/chips-autocomplete-story-custom.component.ts

@@ -0,0 +1,48 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { GetFilterOptionsByKey } from '../../filter-options';
+
+const OPTIONS = [
+  {
+    name: 'Anna',
+    photo: 'https://joeschmoe.io/api/v1/jenni'
+  },
+  {
+    name: 'Mary',
+    photo: 'https://joeschmoe.io/api/v1/julie'
+  },
+  {
+    name: 'Elena',
+    photo: 'https://joeschmoe.io/api/v1/jolee'
+  }
+];
+
+@Component({
+  selector: 'es-chips-autocomplete-story-custom',
+  templateUrl: './chips-autocomplete-story-custom.component.html',
+  styleUrls: ['./chips-autocomplete-story-custom.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class ChipsAutocompleteCustomComponent {
+  public form: FormGroup;
+  public options: any[] = OPTIONS;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.form = this.formBuilder.group({
+      chips: []
+    });
+  }
+
+  public onChangeText(text: string) {
+    this.options = GetFilterOptionsByKey(text, OPTIONS, 'name');
+  }
+
+  public valueFn(option: any): any {
+    return option;
+  }
+
+  public displayWith(option: any): any {
+    return option.name;
+  }
+}

projects/elonkit/src/lib/ui/chips-autocomplete/__stories__/chips-autocomplete-story-custom/chips-autocomplete-story-custom.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { ES_CHIPS_DEFAULT_OPTIONS } from '../../chips-autocomplete.component';
+import { ESChipsAutocompleteModule } from '../../chips-autocomplete.module';
+import { ChipsAutocompleteCustomComponent } from './chips-autocomplete-story-custom.component';
+
+@NgModule({
+  declarations: [ChipsAutocompleteCustomComponent],
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, ESChipsAutocompleteModule],
+  exports: [ChipsAutocompleteCustomComponent],
+  providers: [
+    {
+      provide: ES_CHIPS_DEFAULT_OPTIONS,
+      useValue: {
+        debounceTime: 1000,
+        freeInput: false,
+        unique: true,
+        selectable: true,
+        removable: true
+      }
+    }
+  ]
+})
+export class ESChipsAutocompleteCustomModule {}