<div style="height: 100%; width: 100%; position: relative;" [class]="cPosition">

    <div *ngIf="(hcEnabled)" [class]="hcPosition" [ngStyle]="{transform: iconDegree}" (click)="toggle()">
        <i class="fa fa-caret-right" aria-hidden="true"></i>
    </div>
    <div *ngIf="(vcEnabled)" [class]="vcPosition" (click)="toggle()">
        <i class="fa fa-caret-right" aria-hidden="true" [ngStyle]="{transform: iconDegree}"></i>
    </div>

    <div class="griditemcontainer" [ngStyle]="{'flex-direction': containerDirection}">
        <div *ngIf="title" class="griditemcontainer-header" [ngClass]="{'griditemcontainer-header-collapsed': (!showContent && hcEnabled)}">

            <label>{{title}}</label>

        </div>

        <div *ngIf="collapsibleTitle && !showContent" [ngClass]="{' griditemcontainer-header griditemcontainer-header-collapsed': (!showContent && hcEnabled)}">

            <label>{{collapsibleTitle}}</label>

        </div>
        <div class="griditemcontainer-body" [ngStyle]="{display: showContent ? 'block':'none', 'height':fit ? '100%':''}">
            <ng-content></ng-content>
        </div>
    </div>

</div>