<div class="inputgroup">

    <label *ngIf="haslabel" role="password" id="{{componentId}}" for="{{componentId}}" [style.font-style]="fontstyle" [style.font-family]="fontfamily"
        [style.font-size]="fontsize">
        {{fieldlabel}}
        <ng-container *ngIf="(fieldlabel != '' && !allowblank); else elseblock">
            <span style="color: red">*</span>
            <ng-template #elseBlock>
              <span></span>
            </ng-template>
          </ng-container>
    </label>

    <input type="{{type}}" role="password" tabindex="1" id="{{componentId}}"  autocomplete="off"
    (keyup.enter)="onEnterPress($event)"
    name="passwordText" attr.aria-labelledby="{{componentId}}"
        aria-describedby="passwordDec" [attr.aria-required]="!allowblank" [attr.aria-invalid]="!isValid " class="input-control"
        [ngClass]="model.touched ? allowblank ? '' : (isValid && model.touched) ? 'input-control-success' : 'input-control-error' :''"
        [(ngModel)]="value" (blur)="onBlurEvent()" (focus)="onFocusEvent($event)" (input)="onInputPasswordEvent($event)" (change)="onChangeEvent($event)"
        [name]="name" [pattern]="regEx" [attr.placeholder]="placeholder" [maxlength]="maxlength" [minlength]="minlength" [attr.disabled]="disabled ? true: null"
        [required]="!allowblank" />


  
    <ng-container *ngIf="showpassword">
        <span *ngIf="show" style="cursor:pointer" [ngStyle]="{'padding-right': showandfeedback ? '20px':'0px'}" (click)="toggleShow()" class="input-control-eye">
            <span>
                <em class="fa fa-eye"></em>
            </span>
        </span>
        <span *ngIf="!show" style="cursor:pointer" [ngStyle]="{'padding-right': showandfeedback ? '20px':'0px'}" (click)="toggleShow()" class="input-control-eye">
            <span>
                <em class="fa fa-eye-slash"></em>
            </span>
        </span>
    </ng-container>
    <ng-container *ngIf="iconfeedback">
        <span class="input-control-feedback">
            <span *ngIf="!isValid && model.touched">
                <em class="fa fa-times"></em>
            </span>
            <span *ngIf="isValid && model.touched">
                <em class="fa fa-check"></em>
            </span>
        </span>
    </ng-container>

    <input-help *ngIf="showToolTip && enablepopover" id="passwordDec" role="tooltip" [error-msg]="errormsg" [max-error-msg]="maxerrormsg"
        [min-error-msg]="minerrormsg" [min-length]="minlength" [max-length]="maxlength">
    </input-help>

    <span class="inputfieldbar"></span>
</div>
