Angular Autocomplete Component

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AutocompleteDirective, AutocompleteOption, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete',
  imports: [AutocompleteDirective, ReactiveFormsModule, FormLabelDirective],
  templateUrl: './autocomplete.component.html'
})
export class AutocompleteComponent {
  readonly options: AutocompleteOption[] = ['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js'];
}

import { Component } from '@angular/core';
import { AutocompleteDirective, AutocompleteOption, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-2',
  imports: [AutocompleteDirective, FormLabelDirective],
  templateUrl: './autocomplete-2.component.html'
})
export class Autocomplete2Component {
  readonly options: AutocompleteOption[] = [
    {
      label: 'Angular',
      value: 1
    },
    {
      label: 'Bootstrap',
      value: 2
    },
    {
      label: 'Next.js',
      value: 3
    },
    {
      label: 'React.js',
      value: 4
    },
    {
      label: 'Vue.js',
      value: 5
    }
  ];
}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-3',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-3.component.html'
})
export class Autocomplete3Component {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-default-search',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-default-search.component.html'
})
export class AutocompleteDefaultSearchComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-global-search',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-global-search.component.html'
})
export class AutocompleteGlobalSearchComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-restricted-selection',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-restricted-selection.component.html'
})
export class AutocompleteRestrictedSelectionComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-show-hints',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-show-hints.component.html'
})
export class AutocompleteShowHintsComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-highlight-matching-text',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-highlight-matching-text.component.html'
})
export class AutocompleteHighlightMatchingTextComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-validation-states',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-validation-states.component.html',
  styleUrl: './autocomplete-validation-states.component.scss'
})
export class AutocompleteValidationStatesComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-disabled-state',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-disabled-state.component.html'
})
export class AutocompleteDisabledStateComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-sizing',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-sizing.component.html',
  styleUrl: './autocomplete-sizing.component.scss'
})
export class AutocompleteSizingComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-cleaner-functionality',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-cleaner-functionality.component.html'
})
export class AutocompleteCleanerFunctionalityComponent {}

import { Component, signal } from '@angular/core';
import { AutocompleteDirective, ColComponent, FormLabelDirective, RowComponent } from '@coreui/angular';
import { IconDirective } from '@coreui/icons-angular';
import { cifDe, cifEs, cifGb, cifPl, cifUs } from '@coreui/icons';

@Component({
  selector: 'docs-autocomplete-custom-templates',
  imports: [AutocompleteDirective, ColComponent, FormLabelDirective, RowComponent, IconDirective],
  templateUrl: './autocomplete-custom-templates.component.html'
})
export class AutocompleteCustomTemplatesComponent {
  readonly flags: Record<string, string[]> = {
    de: cifDe,
    es: cifEs,
    gb: cifGb,
    pl: cifPl,
    us: cifUs
  };

  readonly cities = [
    {
      label: 'Germany',
      value: 'de',
      options: [
        {
          label: 'Saarbrücken'
        },
        {
          label: 'Berlin'
        },
        {
          label: 'München'
        }
      ]
    },
    {
      label: 'Spain',
      value: 'es',
      options: [
        {
          label: 'Madrid'
        },
        {
          label: 'Alicante'
        },
        {
          label: 'Huesca'
        }
      ]
    },
    {
      label: 'United Kingdom',
      value: 'gb',
      options: [
        {
          label: 'Liverpool'
        },
        {
          label: 'London'
        },
        {
          label: 'Manchester'
        }
      ]
    },
    {
      label: 'United States',
      value: 'us',
      options: [
        {
          label: 'Austin'
        },
        {
          label: 'Chicago'
        },
        {
          label: 'Los Angeles'
        }
      ]
    }
  ];

  readonly countries = this.cities.map(({ label, value }) => ({ label, value }));

  readonly filteredCities = signal(this.cities);

  handleOptionChange(country: any) {
    if (country === null) {
      this.filteredCities.set(this.cities);
      return;
    }
    const match = this.cities.find((c) => c.value === country?.value);
    this.filteredCities.set(match ? [match] : this.cities);
  }
}

import { JsonPipe } from '@angular/common';
import { HttpErrorResponse } from '@angular/common/http';
import { Component, computed, inject, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import {
  AutocompleteDirective,
  AutocompleteOption,
  BadgeComponent,
  ButtonDirective,
  ColComponent,
  FormLabelDirective,
  RowComponent
} from '@coreui/angular';
import { UsersService } from './users.service';
import { distinctUntilChanged, map } from 'rxjs/operators';

@Component({
  selector: 'docs-autocomplete-implementation',
  imports: [
    AutocompleteDirective,
    BadgeComponent,
    FormLabelDirective,
    JsonPipe,
    ReactiveFormsModule,
    ButtonDirective,
    RowComponent,
    ColComponent
  ],
  templateUrl: './autocomplete-implementation.component.html'
})
export class AutocompleteImplementationComponent {
  readonly #usersService = inject(UsersService);

  protected formGroup = new FormGroup({
    userName: new FormControl<string>('Barbara')
  });

  readonly searchName = signal<string | undefined>(undefined);

  readonly usersResource = this.#usersService.getUsers(this.searchName);

  #users: AutocompleteOption[] = [];

  readonly users = computed(() => {
    const usersResource = this.usersResource;
    if (!usersResource.isLoading()) {
      const rawUsers = usersResource?.value()?.records?.map((user) => user.first_name as AutocompleteOption) ?? [];
      this.#users = [...new Set(rawUsers)];
    }
    return this.#users;
  });
  readonly error = computed(() => this.usersResource?.error() as HttpErrorResponse);
  readonly loading = computed(() => this.usersResource?.isLoading());

  // readonly #usersEffect = effect(() => {
  //   console.log('Users:', this.users());
  //   console.log('Loading:', this.loading());
  //   console.log('Error:', this.error());
  // });

  protected handleOptionChange($event: AutocompleteOption | null) {
    console.log('* handleOptionChange', $event);
  }

  protected handleValueChange($event: string | number | null | undefined) {
    console.log('* handleValueChange', $event);
  }

  protected handleInputChange($event: string) {
    console.log('* handleInputChange', $event);
    this.searchName.set($event);
  }

  protected changeValue() {
    const findName = 'Markus';
    this.searchName.set(findName);
    this.formGroup.get('userName')?.setValue(findName);
  }

  protected resetForm() {
    this.formGroup.reset();
  }

  constructor() {
    this.formGroup.valueChanges
      .pipe(
        map((value) => value.userName),
        distinctUntilChanged()
      )
      .subscribe((value) => {
        console.log('@ valueChange', value);
      });
  }
}

import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { distinctUntilChanged, map } from 'rxjs/operators';
import {
  AutocompleteDirective,
  ButtonDirective,
  ColComponent,
  IAutocompleteOption,
  RowComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-reactive',
  imports: [AutocompleteDirective, ReactiveFormsModule, JsonPipe, ButtonDirective, ColComponent, RowComponent],
  templateUrl: './autocomplete-reactive.component.html'
})
export class AutocompleteReactiveComponent {
  readonly formGroup = new FormGroup({
    framework: new FormControl<string | null>('React.js', { nonNullable: true })
  });

  constructor() {
    this.formGroup.valueChanges
      .pipe(
        map((value) => value.framework),
        distinctUntilChanged()
      )
      .subscribe((value) => {
        console.log('* Value changed: ', value);
        console.log('* Control dirty: ', this.formGroup.get('framework')?.dirty);
        console.log('* Control pristine: ', this.formGroup.get('framework')?.pristine);
        console.log('* Control touched: ', this.formGroup.get('framework')?.touched);
      });
  }

  resetForm() {
    // console.log('Before reset - dirty:', this.formGroup.get('framework')?.dirty);
    // console.log('Before reset - pristine:', this.formGroup.get('framework')?.pristine);
    // console.log('Before reset - touched:', this.formGroup.get('framework')?.touched);
    this.formGroup.reset({ framework: '' });
    // console.log('After reset - dirty:', this.formGroup.get('framework')?.dirty);
    // console.log('After reset - pristine:', this.formGroup.get('framework')?.pristine);
    // console.log('After reset - touched:', this.formGroup.get('framework')?.touched);
  }

  protected changeValue() {
    this.formGroup.get('framework')?.setValue('Angular');
  }

  handleOptionChange($event: IAutocompleteOption | null) {
    console.log('* handleOptionChange: ', $event);
  }

  handleValueChange($event: string | number | null | undefined) {
    console.log('* handleValueChange: ', $event);
  }

  handleInputChange($event: any) {
    console.log('* handleInputChange: ', `*${$event}*`, typeof $event);
  }
}

import { JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AutocompleteDirective, ColComponent, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-template-driven',
  imports: [AutocompleteDirective, ReactiveFormsModule, JsonPipe, FormsModule, RowComponent, ColComponent],
  template: `
    <form #form="ngForm">
      <c-row>
        <c-col>
          <input
            [(ngModel)]="value"
            [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
            cAutocomplete
            cleaner
            name="templateCtrl"
          />
        </c-col>
        <c-col>
          <ul>
            <li>Form value: {{ form.value | json }}</li>
            <li>value: {{ value() }}</li>
          </ul>
        </c-col>
      </c-row>
    </form>
  `
})
export class AutocompleteTemplateDrivenComponent {
  readonly value = signal('Angular');
}

import { JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { form, FormField, FormRoot, required } from '@angular/forms/signals';
import {
  AutocompleteDirective,
  ButtonDirective,
  ColComponent,
  FormFeedbackComponent,
  IAutocompleteOption,
  RowComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-signal-forms',
  imports: [
    AutocompleteDirective,
    ButtonDirective,
    ColComponent,
    FormFeedbackComponent,
    FormField,
    FormRoot,
    RowComponent,
    JsonPipe
  ],
  template: `
    <form [formRoot]="frameworkForm">
      <c-row>
        <c-col>
          <label for="framework21">Framework:</label>
          @let ctrlState = frameworkForm.framework();
          <input
            (inputChange)="handleInputChange($event)"
            (optionChange)="handleOptionChange($event)"
            (valueChange)="handleValueChange($event)"
            [delay]="300"
            [formField]="frameworkForm.framework"
            [options]="frameworks"
            [valid]="
              ctrlState.touched() && ctrlState.invalid()
                ? false
                : ctrlState.touched() && !ctrlState.invalid()
                  ? true
                  : undefined
            "
            allowOnlyDefinedOptions
            cAutocomplete
            cleaner
            id="framework21"
            showHints
          />
          @if (ctrlState.touched() && ctrlState.invalid()) {
            @for (error of ctrlState.errors(); track error.kind) {
              @if (error.kind === 'required') {
                <c-form-feedback [valid]="false">
                  {{ error.message }}
                </c-form-feedback>
              }
            }
          }
          <div class="mt-3">
            <button type="button" cButton class="me-1" (click)="changeValue()">Change</button>
            <button type="reset" cButton class="me-1" (click)="resetForm()">Reset</button>
          </div>
        </c-col>
        <c-col>
          <strong>Control state: </strong>
          <ul>
            <li>Value: {{ frameworkForm.framework().value() | json }}</li>
            <li>Dirty: {{ frameworkForm.framework().dirty() }}</li>
            <li>Touched: {{ frameworkForm.framework().touched() }}</li>
            <li>Errors: {{ frameworkForm.framework().errors() | json }}</li>
          </ul>
        </c-col>
      </c-row>
    </form>
  `
})
export class AutocompleteSignalFormsComponent {
  readonly frameworkModel = signal({ framework: '' });

  readonly frameworkForm = form(this.frameworkModel, (schemaPath) => {
    required(schemaPath.framework, { message: 'framework is required' });
  });

  readonly frameworks = ['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js'];

  protected changeValue() {
    this.frameworkModel.set({ framework: 'Next.js' });
  }

  protected resetForm() {
    this.frameworkForm().reset({ framework: '' });
  }

  protected handleValueChange($event: number | string | undefined) {
    console.log('handleValueChange', $event);
  }

  protected handleOptionChange($event: IAutocompleteOption | null) {
    console.log('handleOptionChange', $event);
  }

  protected handleInputChange($event: string) {
    console.log('handleInputChange', $event);
  }
}