<div id="distributor-list">
    <span *ngIf="errorMessage">
        <h2>{{errorMessageLabel}}</h2>
    </span>
    <span *ngIf="(!distributorLoading && distOfficeList?.length === 0)">
        <h2>{{noResultsFound}}</h2>
    </span>
    <div class="distributor-accordion">
        <div class="distributor-results-count" *ngIf="!distributorLoading && distOfficeList?.length > 0">{{showingLabel}} {{distOfficeList.length}} {{resultsLabel}}</div>
        <div class="distributor-results-count" *ngIf="distributorLoading">{{loadingLabel}}</div>
        <ngb-accordion #distList="ngbAccordion" [closeOthers]="true">
            <ng-container *ngIf="distOfficeList?.length > 0">
                <ngb-panel [id]="getPanelId(distributor.id)"
                    *ngFor="let distributor of distOfficeList | paginate: { itemsPerPage: itemsPerPage, currentPage: page }">
                    <ng-template ngbPanelHeader >
                        <button class="distributor-header" [ngClass]="{'active': distList.isExpanded(getPanelId(distributor.id))}"
                            (click)="clickedDistributor(distributor.id)" ngbPanelToggle>
                            <i class="icon-related-truck" *ngIf="isDistributor"
                                [ngClass]="[distList.isExpanded(getPanelId(distributor.id)) ? 'listIconActive' : 'listIcon']"></i>
                            <i class="icon-input-location" *ngIf="!isDistributor"
                                [ngClass]="[distList.isExpanded(getPanelId(distributor.id)) ? 'listIconActive' : 'listIcon']"></i>

                            <div class="d-flex flex-column" >
                                <div class="distributor-name font-weight-bolder">
                                    {{distributor.name}}
                                </div>
                                <div class="distributor-address"
                                    *ngIf="distributor.address_1 && !distList.isExpanded(getPanelId(distributor.id))">
                                    {{distributor.address_1}}
                                </div>
                            </div>
                        </button>
                    </ng-template>
                    <ng-template ngbPanelContent>
                        <div class="row" [ngClass]="{'active': distList.isExpanded(getPanelId(distributor.id))}">
                            <div class="col-3">
                                <img class="dist-skf-logo" src="/v2/assets/img/skf-logo-blue.svg">
                            </div>
                            <div class="col-9">
                                <span class="font-weight-bolder">{{address}}</span>
                                <p class="dist-info">
                                    <span *ngIf="distributor.address_1">{{distributor.address_1}},
                                    </span>
                                    <span *ngIf="distributor.city_name">{{distributor.city_name}},
                                    </span>
                                    <span *ngIf="distributor.state">{{distributor.state}}, </span>
                                    <span *ngIf="distributor.zip_code">{{distributor.zip_code}}, </span>
                                    <span *ngIf="distributor.site">{{distributor.site}}</span>
                                </p>
                            </div>
                        </div>
                        <div class="row" [ngClass]="{'active': distList.isExpanded(getPanelId(distributor.id))}">
                            <div class="col-6">
                                <p class="dist-info" *ngIf="distributor.contact_name || distributor.email">
                                    <span class="d-flex font-weight-bolder text-wrap">{{contact}}</span>
                                    <span class="d-flex">{{distributor.contact_name}}</span>
                                    <a href="mailto:{{distributor.email}}">{{distributor.email}}</a>
                                </p>
                                <p *ngIf="distributor.phone_no">
                                    <span class="d-flex font-weight-bolder">{{phoneNumber}}</span>
                                    <span class="d-flex overflow-hidden text-nowrap">{{distributor.phone_no}}</span>
                                </p>
                                <p *ngIf="distributor.fax_no">
                                    <span class="d-flex font-weight-bolder">{{fax}}</span>
                                    <span class="d-flex overflow-hidden text-nowrap">{{distributor.fax_no}}</span>
                                </p>
                                <p class="dist-info" *ngIf="distributor.homepage">
                                    <a target="_blank" title="Homepage" href="//{{distributor.homepage}}">
                                        {{distributor.homepage}}
                                    </a>
                                </p>
                            </div>
                            <div class="col-6" *ngIf="isDistributor">
                                <p *ngIf="distributor.product_category">
                                    <span class="d-flex"><b>{{productCategoryLabel}}</b></span>
                                    <span class="text-wrap">{{distributor.product_category}}</span>
                                </p>
                                <p *ngIf="distributor.distributor_category">
                                    <span class="d-flex"><b>{{distibutorCategoryLabel}}</b></span>
                                    <span class="text-wrap">{{distributor.distributor_category}}</span>
                                </p>
                            </div>
                        </div>
                        </ng-template>

                </ngb-panel>
            </ng-container>
        </ngb-accordion>
    </div>
    <pagination-controls (pageChange)="pageJump($event)" responsive="true" previousLabel="" nextLabel="" *ngIf="distOfficeList?.length > 0">
    </pagination-controls>
</div>

./distributor-search-list.component.scss

@import "src/app/styles/helpers";

#distributor-list {
    height: 500px;
}

.listIcon{
    color: $blue;
}

.listIconActive{
    color: $green;
}

.text-wrap{
    display: table;
    overflow-wrap: break-word; // Firefox
}

.distributor-accordion {
    display: flex;
    height: 100%;
    flex-direction: column;

    .distributor-results-count {
        margin-bottom: calc-rem(4);
        font-weight: $font-weight-bolder;
    }

    ::ng-deep .accordion {
        height: 100%;
        overflow-y: auto;

        .card {
            border: none;
            border-bottom: calc-rem(1) solid $grey;
            background-color: $white;

            &-header {
                padding: 0;
                background-color: transparent;
                border: none;

                .distributor-header {
                    display: flex;
                    padding: calc-rem(3) calc-rem(10) calc-rem(3) calc-rem(3);
                    width: 100%;
                    border: none;
                    background-color: transparent;
                    margin: 0;

                    &.active {
                        background-color: $off-white;
                        padding-bottom: calc-rem(10);

                        .distributor-name {
                            color: $cool-grey;
                        }

                        &:hover {
                            .distributor-name {
                                text-decoration: none;
                            }
                        }
                    }

                    &:focus {
                        border: none;
                        outline: none;
                    }

                    &:hover {
                        .distributor-name {
                            text-decoration: underline;
                        }
                    }

                    .distributor-name {
                        display: flex;
                        color: $blue;
                    }

                    .distributor-address {
                        display: flex;
                        color: $cool-grey;
                        @include font-size(16);
                    }

                    .icon-related-truck {
                        @include font-size(16);
                        margin-top: calc-rem(2);
                        margin-right: calc-rem(20);
                    }

                    .icon-input-location {
                        @include font-size(25);
                        margin-top: calc-rem(-1);
                        margin-right: calc-rem(15);
                    }
                }
            }

            &-body {
                padding: calc-rem(10);
                padding-top: 0;
                padding-bottom: 0;

                .row {
                    &.active {
                        background-color: $off-white;
                    }

                    .dist-skf-logo {
                        height: calc-rem(15);
                    }
                }
            }
        }
    }
}

::ng-deep #distributor-list .ngx-pagination {
    padding: 0;
    margin: 0;
    margin-top: calc-rem(16);
}