<div class="button-group" #rootDiv>
    <button id={{componentId}} role="button" aria-haspopup="true" aria-label="" [attr.aria-expanded]="openContent" tabindex="1"
        aria-controls="menulist" class="button-dropdown-main" (blur)="onblur($event)" (click)="onClick(rootDiv)" (keyup.enter)="onEnterClick(rootDiv)"
        (keyup.esc)="onClickEscape(rootDiv)" (keyup.end)="onEndClick()" (keyup.home)="onHomeClick()" (keyup.space)="onSpaceClick(rootDiv)"
        (keyup.arrowdown)="onclickDown(rootDiv)" (keyup.arrowup)="onclickUp(rootDiv)" #btnRef [ngClass]="{'button-default': size=='default' || size ==null,
            'button-small': size=='small',
            'button-large' : size=='large',
            'button-primary' : type == 'primary' || type == null || type == 'theme-color',
            'button-success' : type == 'success' || type == 'green',
            'button-danger' : type=='danger' || type == 'red',
            'button-warning' : type=='warning' ||  type == 'yellow'}">
        <amexio-c-icon style="float:right;" key="button_caret-down"></amexio-c-icon>
        <span [attr.disabled]="disabled ? true: null">{{label}} &nbsp;&nbsp;</span>
    </button>
    <div class="button-dropdown" role="menu" [ngClass]="{'button-dropdown-up' : posixUp}" [@changeState]="dropdownstyle.visibility"
        [ngStyle]="dropdownstyle">
        <div id="{{itemData.index}}" role="option" tabindex="1"  *ngFor="let itemData of dropdownItemData let index = index">
            <div [ngClass]="{'button-default': size=='default' || size ==null,'button-small': size=='small','button-large' : size=='large'}">
                <div [ngStyle]="{'cursor': itemData.disabled ? 'not-allowed':'pointer'}" (mousedown)="btnItemClick($event,itemData)" >
                    <amexio-c-icon style="padding-right: 5px;" [customclass]="itemData.iconStyleClass"></amexio-c-icon>
                    <span  [ngClass]="{'button-group-list-items':itemData.selected}" [attr.disabled]="itemData.disabled ? true: null">{{itemData.label}}&nbsp;&nbsp;</span>
                    <ng-container *ngIf="itemData.badge">
                        <span class="btn-dropdown-badge">{{itemData.badge}}</span>
                    </ng-container>
                </div>
            </div>
        </div>
    </div>
</div>