mp-common/pager/template.ts

This is XPO MarketPlace common libary

export const DEFAULT_TEMPLATE =
    `<pagination-template #p="paginationApi" [id]="id" [maxSize]="maxSize" (pageChange)="pageChange.emit($event)">
    <div class="pagination-cont">
        <ul class="paginationUl" role="navigation" [attr.aria-label]="screenReaderPaginationLabel" *ngIf="(p.pages.length>1) && !(autoHide && p.pages.length <= 1)">
            <li class="pagination-previous" [class.disabled]="p.isFirstPage()" *ngIf="directionLinks">
                <a (click)="p.previous()">
                    <xpo-icon>ui-angle-left</xpo-icon>
                </a>
            </li>

            <li [class.current]="p.getCurrent() === page.value" *ngFor="let page of p.pages">
                <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                    <span>{{ page.label }}</span>
                </a>
                <div *ngIf="p.getCurrent() === page.value">
                    <span>{{ page.label }}</span>
                </div>
            </li>

            <li class="pagination-next" [class.disabled]="p.isLastPage()" *ngIf="directionLinks">
                <a (click)="p.next()">
                    <xpo-icon>ui-angle-right</xpo-icon>
                </a>
            </li>

        </ul>
    </div>
</pagination-template>`;
export const DEFAULT_STYLES = `
.pagination-cont {
    align-items: center;
    padding-bottom: 10px;
}
.paginationUl {
    display: flex;
    justify-content: flex-end;
    margin: 30px 15px;
    list-style: none;
}
.paginationUl::before,
.paginationUl::after {
    content: ' ';
    display: table;
}
.paginationUl::after {
    clear: both;
}
.paginationUl li {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-right: 5px;
    border-radius: 0;
    border: 1px solid #dfdfdf;
}
.paginationUl li {
    display: inline-block;
}
.paginationUl a,
.paginationUl button {
    color: #0a0a0a;
    display: block;
    padding: 5px 10px;
    border-radius: 0;
}
.paginationUl a:hover,
.paginationUl button:hover {
    background: #e6e6e6;
}
.paginationUl .current {
    padding: 5px 10px;
    background: #cc0000;
    color: #fefefe;
    cursor: default;
}
.paginationUl .disabled {
    color: #cacaca;
    cursor: default;
}
.paginationUl .disabled:hover {
    background: transparent;
}
.paginationUl .ellipsis::after {
    content: '…';
    padding: 5px 10px;
    color: #0a0a0a;
}
.paginationUl a,
.paginationUl button {
    cursor: pointer;
}
.paginationUl .pagination-next,
.paginationUl .pagination-next.disabled,
.paginationUl .pagination-previous,
.paginationUl .pagination-previous.disabled{
    border:0;
}
.paginationUl .pagination-previous a::before,
.paginationUl .pagination-previous.disabled::before {
    display: inline-block;
    margin-right: 5px;
}
.paginationUl .pagination-next a::after,
.paginationUl .pagination-next.disabled::after {
    display: flex;
    margin-left: 5px;
}`;