
<div  tabindex="1" id="{{componentId}}" 
[attr.aria-expanded]="toggle"
[attr.aria-label]="title"
 role="menu"
(keyup)="navigateOptions($event)"
(keyup.enter) ="showDropDownContent($event)"
(click)="showDropDownContent($event)" class="dropdown-menu {{roundedgeclass}}" 
[style.padding]="padding"

[ngStyle]="{'background-color':(transparent)?'white':'null','color':(transparent)?'black':'null' }"
    
>
<span *ngIf="title">
    <em *ngIf="icon" style="padding-right: 5px;" [ngClass]="icon">&nbsp;</em>{{title}}&nbsp;
</span>
<span *ngIf="!title">
    <em *ngIf="icon" style="padding-right: 5px;" [ngClass]="icon">&nbsp;</em>Title&nbsp;
</span>


<ng-container *ngIf="downArrowIcon">
<em *ngIf="!toggle"  class="fa fa-angle-down "></em>
<em *ngIf="toggle"  class="fa fa-angle-up "></em>
</ng-container>

</div>
<div  *ngIf="toggle" class="dropdown-menu-content"
[style.height]="height"   [ngClass]="{'menu-right':xposition}">

<ng-content></ng-content>
<div  >
<span  role="option" tabindex="1"  *ngFor="let node of data"   id="{{node.index}}"  >
<amexio-drop-down-menu-item   
                          (onClick)="onDropDownMenuClick($event)"  
                          [icon-align]="node.iconalign"
                          [label-align]="node.labelalign"
                          [label]="node.label"
                          [separator]="node.separator"
                          [icon]="node.icon"
                          [index]="node.index" 
                          [selected]="node.selected">
</amexio-drop-down-menu-item>
</span>
</div>
</div>
