@colijnit/corecomponents_v12 12.0.50 → 12.0.51

package/lib/components/pagination/pagination.component.d.ts

@@ -1,9 +1,6 @@
 import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { IPage } from "../pagination-bar/pagination-bar.component";
 import { PaginationService } from './pagination.service';
-export interface IPage {
-    label: string;
-    value: any;
-}
 export declare class PaginationComponent implements OnInit, OnChanges, OnDestroy {
     private _paginationService;
     readonly template: ElementRef;
@@ -35,7 +32,7 @@ export declare class PaginationComponent implements OnInit, OnChanges, OnDestroy
      */
     private _updatePageLinks;
     getCurrentPage(): number;
-    private getLastPage;
+    getLastPage(): number;
     /**
      * Checks that the instance.currentPage property is within bounds for the current page range.
      * If not, return a correct value for currentPage, or the current value if OK.

package/lib/components/pagination/style/_layout.scss

@@ -11,76 +11,6 @@
       align-items: center;
       padding: 0 20px;
       height: 100%;
-
-      ul.pagination {
-        display: flex;
-        justify-content: flex-end;
-        flex-wrap: wrap;
-        width: 100%;
-        list-style-type: none;
-      }
-
-      li {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        width: 40px;
-        height: 40px;
-        cursor: default;
-        color: #2b60a7;
-        border: 1px solid $cc-co-pagination-border-color;
-        border-radius: 5px;
-        background-color: transparent;
-        font-size: $cc-co-pagination-font-size;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-
-        &:not(:last-child) {
-          margin-right: 4px;
-        }
-      }
-
-      li.pagination-next, li.pagination-previous {
-        font-size: $cc-co-pagination-font-size-small;
-        cursor: pointer;
-        flex-grow: 0;
-        width: auto;
-        text-align: center;
-        padding: 0 15px;
-      }
-
-      li.pagination-next a:after {
-        content: '';
-        border: solid #2b60a7;
-        border-width: 0 3px 3px 0;
-        display: inline-block;
-        padding: 3px;
-        transform: rotate(-45deg);
-        -webkit-transform: rotate(-45deg);
-        margin-left: 5px;
-      }
-
-      li.pagination-previous a:before {
-        content: '';
-        border: solid #2b60a7;
-        border-width: 0 3px 3px 0;
-        display: inline-block;
-        padding: 3px;
-        transform: rotate(135deg);
-        -webkit-transform: rotate(135deg);
-        margin-right: 5px;
-      }
-
-      li.current {
-        border: 1px solid $cc-co-pagination-active-color;
-        font-weight: bold;
-        opacity: 1;
-        cursor: default;
-      }
     }
   }
 }

package/lib/components/pagination/style/material.scss

@@ -3,3 +3,4 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+@import "../../pagination-bar/style/material";

package/lib/components/pagination-bar/pagination-bar.component.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from "@angular/core";
+export interface IPage {
+    label: string;
+    value: any;
+}
+export declare class PaginationBarComponent {
+    pages: IPage[];
+    directionLinks: boolean;
+    previousLabel: string;
+    nextLabel: string;
+    currentPage: number;
+    previousClick: EventEmitter<void>;
+    nextClick: EventEmitter<void>;
+    pageClick: EventEmitter<any>;
+    showClass(): boolean;
+    isOnFirstPage(): boolean;
+    isOnLastPage(): boolean;
+    onPreviousClick(): void;
+    onNextClick(): void;
+    onPageClick(value: any): void;
+}

package/lib/components/pagination-bar/pagination-bar.module.d.ts

@@ -0,0 +1,2 @@
+export declare class PaginationBarModule {
+}

package/lib/components/pagination-bar/style/_layout.scss

@@ -0,0 +1,67 @@
+@include export-module('cc-pagination-bar-layout') {
+  .co-pagination-bar {
+    width: 100%;
+
+    ul.pagination {
+      display: flex;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+      width: 100%;
+      list-style-type: none;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+      border-radius: 5px;
+      font-size: $cc-co-pagination-bar-font-size;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      &:not(:last-child) {
+        margin-right: 4px;
+      }
+    }
+
+    li.pagination-next, li.pagination-previous {
+      font-size: $cc-co-pagination-bar-font-size-small;
+      cursor: pointer;
+      flex-grow: 0;
+      width: auto;
+      text-align: center;
+      padding: 0 15px;
+    }
+
+    li.pagination-next a:after {
+      content: '';
+      display: inline-block;
+      padding: 3px;
+      transform: rotate(-45deg);
+      -webkit-transform: rotate(-45deg);
+      margin-left: 5px;
+    }
+
+    li.pagination-previous a:before {
+      content: '';
+      display: inline-block;
+      padding: 3px;
+      transform: rotate(135deg);
+      -webkit-transform: rotate(135deg);
+      margin-right: 5px;
+    }
+
+    li.current {
+      font-weight: bold;
+      opacity: 1;
+      cursor: default;
+    }
+  }
+}

package/lib/components/pagination-bar/style/_material-definition.scss

@@ -0,0 +1,3 @@
+$cc-co-pagination-bar-border-color: $cc-color-border;
+$cc-co-pagination-bar-font-size: $cc-font-size-default !default;
+$cc-co-pagination-bar-font-size-small: $cc-font-size-small !default;

package/lib/components/pagination-bar/style/_theme.scss

@@ -0,0 +1,24 @@
+@include export-module('cc-pagination-bar-theme') {
+  .co-pagination-bar {
+
+    li {
+      color: #2b60a7;
+      border: 1px solid $cc-co-pagination-bar-border-color;
+      background-color: transparent;
+    }
+
+    li.pagination-next a:after {
+      border: solid #2b60a7;
+      border-width: 0 3px 3px 0;
+    }
+
+    li.pagination-previous a:before {
+      border: solid #2b60a7;
+      border-width: 0 3px 3px 0;
+    }
+
+    li.current {
+      border: 1px solid $cc-co-pagination-active-color;
+    }
+  }
+}

package/lib/components/pagination-bar/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "12.0.50",
+  "version": "12.0.51",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {

package/public-api.d.ts

@@ -92,3 +92,5 @@ export * from './lib/directives/clickoutside/clickoutside.module';
 export * from './lib/directives/observe-visibility/observe-visibility.module';
 export * from './lib/components/pagination/pagination.component';
 export * from './lib/components/pagination/pagination.module';
+export * from './lib/components/pagination-bar/pagination-bar.component';
+export * from './lib/components/pagination-bar/pagination-bar.module';