<div class="datepicker-wrapper">
    <div class="form-group">
        <label [class.visually-hidden]="!isLabelVisible" class="font-weight-bold" for="{{generatedId}}">
            {{label}}
        </label>
        <div class="datepicker"
             [ngStyle]="{'width.px': width}">
            <input
                    (dateChange)="change($event)"
                    [formControl]="dateFormCtrl"
                    [matDatepicker]="picker"
                    [max]="maxDateValue"
                    [min]="minDateValue"
                    [readonly]="isReadonly"
                    [required]="isRequired"
                    [class.form-control-sm]="isSmall"
                    autocomplete="off"
                    class="form-control datepicker__input"
                    id="{{generatedId}}"
                    [name]="name ? name : null"
                    placeholder="{{'Calendar.DataPickerMask' | translate}}"
                    type="text"
                    appMaskDate
            >
            <mat-datepicker #picker></mat-datepicker>
            <button *ngIf="isPanelVisible"
                    (click)="picker.open()"
                    [attr.aria-label]="'Calendar.OpenCalendarLabel' | translate"
                    aria-haspopup="dialog"
                    type="button"
                    class="btn btn-icon">
                <svg aria-hidden="true" class="icon datepicker__calendar-icon" role="img">
                    <use href="/assets/icomoon/sprite/sprite.svg#calendar"></use>
                </svg>
            </button>
        </div>
    </div>
</div>

