# CustomTagInputComponent

**Kind:** Class

**Source:** `Frontend/src/app/components/shared/dropdown/custom-tag-input/custom-tag-input.component.ts` (line 10)

**Part of:** [Frontend](subsystem-frontend-src-app)

`CustomTagInputComponent` manages tag selection through a dropdown interface, including selecting, unselecting, and checking available selections. It also handles Enter-key actions, contact creation, popup opening, and dropdown visibility within the shared dropdown UI.

**Implements:** `OnInit`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `closeDropdown` | `closeDropdown(e: undefined)` | `void` |
| `toggoleDropdown` | `toggoleDropdown()` | `void` |
| `enterPressed` | `enterPressed(value: undefined)` | `void` |
| `selecting` | `selecting(dataRow: undefined)` | `void` |
| `unSelecting` | `unSelecting(dataRow: undefined)` | `void` |
| `ngOnInit` | `ngOnInit()` | `void` |
| `isAvailableSelection` | `isAvailableSelection()` | `void` |
| `IsSelected` | `IsSelected(dataRow: undefined)` | `void` |
| `createNewContact` | `createNewContact(dataRow: SelectedTags)` | `void` |
| `openPopup` | `openPopup(n: string, t: string, i: string)` | `void` |
| `OnOpenedPopup` | `OnOpenedPopup()` | `void` |
| `closePOpUp` | `closePOpUp()` | `void` |
| `saveFromPopup` | `saveFromPopup()` | `void` |
| `finalizeContactSaving` | `finalizeContactSaving(e: ContactPersons)` | `void` |

## Properties

| Property | Type |
|---|---|
| `dataSource` | `any[]` |
| `_value` | `string` |
| `accountId` | `number` |
| `readOnly` | `boolean` |
| `selected` | `SelectedTags[]` |
| `customTagInput` | `ElementRef` |
| `tagInputHolder` | `ElementRef` |
| `sharedPopup` | `SharedPopupComponent` |
| `contactComponent` | `ContactViewEditComponent` |
| `tagInput` | `ElementRef` |
| `customTagInputDropdown` | `boolean` |
| `ItemAdded` | `any` |
| `ItemRemoved` | `any` |
| `validatedEmail` | `any` |
| `popup` | `any` |
| `tempEmail` | `SelectedTags` |
| `tempContactPerson` | `ContactPersons` |

## Where it refuses work

- `CustomTagInputComponent` stops the work with an early return when `n == this.dataSource.length`.
- `CustomTagInputComponent` stops the work with an early return when `this.selected[i].display == dataRow.display`.

## Diagram

```mermaid
graph LR
  User[User interaction] --> Component[CustomTagInputComponent]
  Component --> Toggle[toggoleDropdown]
  Component --> Close[closeDropdown]
  Component --> Select[selecting]
  Component --> Unselect[unSelecting]
  Component --> Check[isAvailableSelection]
  Component --> Selected[IsSelected]
  Component --> Enter[enterPressed]
  Enter --> Create[createNewContact]
  Component --> Popup[openPopup]
```

## Usage

```ts
import { CustomTagInputComponent } from './custom-tag-input.component';

function handleTagInput(component: CustomTagInputComponent): void {
  component.toggoleDropdown();

  if (component.isAvailableSelection()) {
    component.selecting();
  }

  component.enterPressed();
  component.closeDropdown();
}
```

## AI Coding Instructions

- Preserve the existing `toggoleDropdown()` method name when calling or modifying it, even though its spelling differs from `toggle`.
- Keep selection changes inside `selecting()` and `unSelecting()` so dropdown and tag state remain coordinated.
- Check `isAvailableSelection()` and `IsSelected()` before adding or removing selections.
- Route Enter-key behavior through `enterPressed()` rather than duplicating contact-creation logic in event handlers.
- Use `openPopup()` for contact-related popup interactions and keep `createNewContact()` focused on creating the contact.

## Used by

1 reference from 1 file. Each is a place in this repository where the symbol is actually used — go read one rather than trusting an example.

### Imported by (1)

- `TranslateHandler` — `Frontend/src/app/components/shared/shared.module.ts`:1