51 lines
1.9 KiB
HTML
51 lines
1.9 KiB
HTML
<div class="city-autocomplete">
|
|
<div class="city-autocomplete__labels-container">
|
|
<label class="city-autocomplete__label">{{ label | translate }}</label>
|
|
<label class="city-autocomplete__label" data-testid="city-code">{{ city?.code }}</label>
|
|
</div>
|
|
|
|
<tooltip *ngIf="error">
|
|
{{ error | translate }}
|
|
</tooltip>
|
|
|
|
<div
|
|
class="city-autocomplete__input"
|
|
[ngClass]="{ 'city-autocomplete__input--has-value': city, 'city-autocomplete__input--has-error': error }"
|
|
>
|
|
<p-autoComplete
|
|
#autocomplite
|
|
[(ngModel)]="city"
|
|
(ngModelChange)="onCityChange()"
|
|
[autoHighlight]="true"
|
|
[suggestions]="items"
|
|
(completeMethod)="filterCity($event)"
|
|
field="name"
|
|
[size]="30"
|
|
[minLength]="1"
|
|
(onSelect)="selectLocation(city)"
|
|
(onKeyUp)="inputChange()"
|
|
placeholder="{{ placeholder | translate }}"
|
|
data-testid="city-autocomplete-input"
|
|
>
|
|
<ng-template let-value pTemplate="item">
|
|
<city-autocomplete-item [item]="value"></city-autocomplete-item>
|
|
</ng-template>
|
|
</p-autoComplete>
|
|
|
|
<!-- //todo: remove button-clear styles; create component instead -->
|
|
<button pButton label=" " class="button-clear" (click)="clearInput()" data-testid="autocomplete-clear-input"></button>
|
|
<button
|
|
pButton
|
|
label=" "
|
|
class="city-autocomplete__search-button"
|
|
[ngClass]="{ 'city-autocomplete__search-button--opened': openedPopup }"
|
|
(click)="openPopUp()"
|
|
data-testid="autocomplete-popup-button"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="city-autocomplete-popup-wrapper" *ngIf="openedPopup">
|
|
<city-select [city]="city" (selectLocation)="selectLocation($event)" (locate)="onLocate()"></city-select>
|
|
</div>
|