<fieldset class="{{roundedgeclass}}">
    <legend tabindex="1" (keyup.enter)="onLegendClick()" (keyup.space)="onLegendClick()" role="heading" aria-expanded=" true"
        *ngIf="(title && title.length>0) || collapsible " class="collapsible-legend" (click)="onLegendClick()">
        <ng-container *ngIf="!collapsible">
            {{title}}
        </ng-container>
        <ng-container *ngIf="collapsible && !isActive">
            <amexio-c-icon [attr.aria-exapnded]="isActive" style="padding-right:5px" key="fieldset_expand"></amexio-c-icon>{{title}}
        </ng-container>
        <ng-container *ngIf="collapsible && isActive">
            <amexio-c-icon style="padding-right:5px" key="fieldset_collpase"></amexio-c-icon>{{title}}
        </ng-container>
    </legend>
    <div class="collapsible-fieldset" [@fieldsetContent]="!isActive ? {value: 'hidden', params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)'}} : {value: 'visible', params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)'}}"
    [ngStyle]="{'overflow': isActive ? '': 'hidden', 'height':isActive ? 'auto': '0px'}">
        <ng-content></ng-content>
    </div>
</fieldset> 