<div class="input-group div{{uuid}}" style="flex-wrap: nowrap;" [nbTooltip]="inputNotMatchedTooltip"
    nbTooltipTrigger="noop" nbTooltipPlacement="top" nbTooltipStatus="danger">
    <input #inputBox class="rbj-form-control form-control {{inputClass}}" nbInput title="{{tooltip}}" autocomplete="off"
        [(ngModel)]="text" [ngClass]="{'dropdownInput': !hideButton,'editable':editable,'px-2':compact}"
        [readonly]="readonly||(!editable&&!allowSearch)" [placeholder]="placeholder" [disabled]="disabled"
        [required]="required" (click)="toggle();clickSelectAllText()" (focus)="onTextFocus()"
        (keydown)="onKeyDown($event)" (focusout)="onTextFocusout()" (blur)="onTextFieldBlur()" [id]="id"
        tabindex="{{tabindex}}" type="text">
    <div class="input-group-append" [ngClass]="{'d-none': hideButton}">
        <button #dropButton nbButton hero class="btn dropdownBtn rbj-form-control" type="button" id="{{uuid}}"
            size="small" (click)="toggle()" (focus)="onFocus()" (focusout)="focusout()" [disabled]="readonly||disabled">

            <nb-icon pack="eva" icon="chevron-down-outline" [@openClose]="menuIsOpen ? 'open' : 'closed'">
            </nb-icon>
        </button>
    </div>
</div>