cone-search-tab.component.html

<accordion *ngIf="coneSearchConfig && coneSearchConfig.enabled" [isAnimated]="true">
    <accordion-group #ag [panelClass]="'custom-accordion'" [isOpen]="coneSearchConfig.opened" class="my-2">
        <button class="btn btn-link btn-block clearfix" accordion-heading>
            <span class="pull-left float-left">
                Cone search
                &nbsp;
                <span *ngIf="ag.isOpen">
                    <span class="fas fa-chevron-up"></span>
                </span>
                <span *ngIf="!ag.isOpen">
                    <span class="fas fa-chevron-down"></span>
                </span>
            </span>
        </button>
        <div class="row">
            <div class="col">
                <app-cone-search
                    [coneSearch]="coneSearch"
                    [resolver]="resolver"
                    [resolverIsLoading]="resolverIsLoading"
                    [resolverIsLoaded]="resolverIsLoaded"
                    (retrieveCoordinates)="retrieveCoordinates.emit($event)" #cs>
                </app-cone-search>
            </div>
            <div class="col-2 text-center align-self-end">
                <button class="btn btn-outline-success" *ngIf="!coneSearch" [hidden]="cs.formIsInValid" (click)="addConeSearch.emit(cs.getConeSearch())">
                    <span class="fas fa-plus fa-fw"></span>
                </button>
                <button class="btn btn-outline-danger" *ngIf="coneSearch" (click)="deleteConeSearch.emit()">
                    <span class="fa fa-times fa-fw"></span>
                </button>
            </div>
        </div>
    </accordion-group>
</accordion>