


<div    #id style="width: 100%" class="{{roundedgeclass}}" [ngClass]="{'panel-full-screen': yesFullScreen && fullscreenMax}" (contextmenu)="loadContextMenu({event:$event,ref:id})"  >
    <ng-container *ngIf="collapsible; else elseBlock"> 
        <div id="{{componentId}}" [ngStyle]="{'background': bgColor, 'color': color}"
        *ngIf="header" class="panel-accordion"  [ngClass]="themeCss"
        (click)="onTabClick(id)"    >
            <amexio-toolbar
            tabindex="0" 
            role="heading"
            [attr.aria-expanded]="expanded"
            (keyup.enter)="onTabClick(id)"
            (keyup.space)="onTabClick(id)">
                <amexio-toolbar-item [ngStyle]="{'color': gradientFlag ? 'white':''}" position-left  attr.aria-label="{{title}}">
                    <amexio-label  attr.aria-labelledby="{{componentId}}" size="small">
                        {{title}}
                    </amexio-label>
                </amexio-toolbar-item>
                <amexio-toolbar-item [ngStyle]="{'color': gradientFlag ? 'black':''}" position-right>
                    <ng-content select="amexio-panel-header"></ng-content>
                </amexio-toolbar-item>
                <amexio-toolbar-item [ngStyle]="{'color': gradientFlag ? 'black':''}" style="margin:auto" position-right>     
                    <amexio-c-icon style="padding-right:10px" class="cursor-style" *ngIf="(yesFullScreen && fullscreenMax)" [key]="'full-screen-min-icon'" (onClick)="minScreenChange($event)"></amexio-c-icon>
                </amexio-toolbar-item>
                <amexio-toolbar-item [ngStyle]="{'color': gradientFlag ? 'black':''}" style="margin:auto" position-right>
                                      <amexio-c-icon style="padding-right:10px" class="cursor-style" *ngIf="(yesFullScreen && !fullscreenMax)" [key]="'full-screen-max-icon'" (onClick)="maxScreenChange($event)"></amexio-c-icon>
                </amexio-toolbar-item>
                <amexio-toolbar-item [ngStyle]="{'color': gradientFlag ? 'black':''}" style="margin:auto" position-right>
                    <i [class]="iconclassKey" aria-hidden="true" #btn1></i>
                </amexio-toolbar-item>
            </amexio-toolbar>
        </div>
    </ng-container>

    <ng-template #elseBlock>
        <div    id="{{componentId}}"   *ngIf="header" class="panel-accordion" (click)="onTabClick(id)">
            <amexio-toolbar
            tabindex="0" 
            [attr.aria-expanded]="expanded"
            (keyup.enter)="onTabClick(id)"
            (keyup.space)="onTabClick(id)"
            
            >
                <amexio-toolbar-item position-left tabindex="0" [attr.aria-expanded]="expanded"  attr.aria-label="{{title}}">
                    <amexio-label  size="small"   attr.aria-labelledby="{{componentId}}" >
                        {{title}}
                    </amexio-label>
                </amexio-toolbar-item>
                <amexio-toolbar-item position-right>
                    <ng-content select="amexio-panel-header"></ng-content>
                </amexio-toolbar-item>
            </amexio-toolbar>
        </div>
    </ng-template>
    
    <div tabindex="0"  id="panelpanelId" class="panel-panel" [ngStyle]="{'border-color': border && bgColor}" [ngClass]="{'panel-box-border':border, 'panel-without-header':!header}" [style.textAlign]="contentAlign" [style.height.px]="height"
        [@panelState]="panelstyle.state">
        <ng-content aria-labelledby="panelpanelId" ></ng-content>
    </div>

    <ng-container *ngIf="flag && (this.contextmenu && this.contextmenu.length > 0)">
        <base-contextmenu tabindex="0" [base-context-menu]="contextmenu" [mouse-location-top]="mouseLocation.top"
            [mouse-location-left]="mouseLocation.left" [is-FlagShow]="flag" [right-click-data]="nodeRightClick"
            (onRightClick)="rightClickDataEmit($event)" [position-up]="posixUp">
        </base-contextmenu>
    </ng-container>
</div>