<!-- Chip -->
<div>
    <h4 *ngIf="title">{{ title }}</h4>
    <mat-menu #triggerMenu="matMenu">
        <ng-container [ngTemplateOutlet]="triggerTemplate"> </ng-container>
    </mat-menu>
    <os-icon-container
        iconTooltip="{{ 'Edit' | translate }}"
        icon="create"
        [swap]="true"
        [showIcon]="!editMode && canBeEdited && hasExtension"
        (iconAction)="changeEditMode()"
    >
        <mat-basic-chip
            *ngIf="canBeEdited"
            [matMenuTriggerFor]="triggerMenu"
            [ngClass]="classes"
            class="pointer"
            disableRipple
        >
            {{ chipValue || '–' }}
        </mat-basic-chip>
        <mat-basic-chip *ngIf="!canBeEdited" [ngClass]="classes" disableRipple>
            {{ chipValue }}
        </mat-basic-chip>
    </os-icon-container>
</div>

<!-- Extension field -->
<div *ngIf="hasExtension && editMode" class="spacer-top-10 extension-container">
    <mat-form-field>
        <input
            matInput
            autocomplete="off"
            osAutofocus
            [(ngModel)]="inputControl"
            placeholder="{{ extensionLabel }}"
            (keydown)="keyDownFunction($event)"
        />
    </mat-form-field>
    <os-search-value-selector
        *ngIf="searchList"
        ngDefaultControl
        [formControl]="extensionFieldForm.get('list')"
        [fullWidth]="true"
        [inputListValues]="searchList"
        [listname]="searchListLabel"
    ></os-search-value-selector>

    <button mat-button (click)="changeEditMode(true)">{{ 'Save' | translate }}</button>
    <button mat-button (click)="changeEditMode()">{{ 'Cancel' | translate }}</button>
</div>

<!-- Optional template for the menu -->
<ng-template #triggerTemplate>
    <ng-content select=".trigger-menu"></ng-content>
</ng-template>
