feat(core/pagination): add pagination component (#413)

siemens · Mar 14, 2023 · 97abbd3 · 97abbd3
1 parent 7057c46
commit 97abbd3
Show file tree

Hide file tree

Showing 30 changed files with 1,130 additions and 5 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/pagination-advanced.ts b/packages/angular-test-app/src/preview-examples/pagination-advanced.ts
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <ix-pagination advanced showItemCount count="100"></ix-pagination>
+  `,
+})
+export default class Pagination {}
diff --git a/packages/angular-test-app/src/preview-examples/pagination.ts b/packages/angular-test-app/src/preview-examples/pagination.ts
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: ` <ix-pagination count="100"></ix-pagination> `,
+})
+export default class Pagination {}
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1293,6 +1293,38 @@ export class IxModalExample {
 export declare interface IxModalExample extends Components.IxModalExample {}
 
 
+@ProxyCmp({
+  inputs: ['advanced', 'count', 'i18nItems', 'i18nOf', 'i18nPage', 'itemCount', 'selectedPage', 'showItemCount']
+})
+@Component({
+  selector: 'ix-pagination',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['advanced', 'count', 'i18nItems', 'i18nOf', 'i18nPage', 'itemCount', 'selectedPage', 'showItemCount'],
+})
+export class IxPagination {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['pageSelected', 'itemCountChanged']);
+  }
+}
+
+
+export declare interface IxPagination extends Components.IxPagination {
+  /**
+   * Page selection event
+   */
+  pageSelected: EventEmitter<CustomEvent<number>>;
+  /**
+   * Item count change event
+   */
+  itemCountChanged: EventEmitter<CustomEvent<number>>;
+}
+
+
 @ProxyCmp({
   inputs: ['alignLeft', 'background', 'color', 'icon', 'outline', 'variant']
 })

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -50,6 +50,7 @@ export const DIRECTIVES = [
   d.IxModal,
   d.IxModalContainer,
   d.IxModalExample,
+  d.IxPagination,
   d.IxPill,
   d.IxSelect,
   d.IxSelectItem,

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -4043,6 +4043,7 @@
         "ix-menu-settings",
         "ix-message-bar",
         "ix-modal-example",
+        "ix-pagination",
         "ix-select",
         "ix-time-picker",
         "ix-toast"
@@ -4096,6 +4097,9 @@
         "ix-modal-example": [
           "ix-icon-button"
         ],
+        "ix-pagination": [
+          "ix-icon-button"
+        ],
         "ix-select": [
           "ix-icon-button"
         ],
@@ -6469,6 +6473,220 @@
       "parts": [],
       "listeners": []
     },
+    {
+      "dirPath": "./src/components/pagination",
+      "filePath": "./src/components/pagination/pagination.tsx",
+      "fileName": "pagination.tsx",
+      "readmePath": "./src/components/pagination/readme.md",
+      "usagesDir": "./src/components/pagination/usage",
+      "tag": "ix-pagination",
+      "overview": "",
+      "usage": {},
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "1.5.0"
+        }
+      ],
+      "encapsulation": "scoped",
+      "dependents": [],
+      "dependencies": [
+        "ix-index-button",
+        "ix-icon-button",
+        "ix-select",
+        "ix-select-item"
+      ],
+      "dependencyGraph": {
+        "ix-pagination": [
+          "ix-index-button",
+          "ix-icon-button",
+          "ix-select",
+          "ix-select-item"
+        ],
+        "ix-icon-button": [
+          "ix-icon"
+        ],
+        "ix-select": [
+          "ix-select-item",
+          "ix-filter-chip",
+          "ix-icon-button",
+          "ix-icon",
+          "ix-dropdown",
+          "ix-dropdown-item"
+        ],
+        "ix-select-item": [
+          "ix-dropdown-item"
+        ],
+        "ix-dropdown-item": [
+          "ix-icon"
+        ],
+        "ix-filter-chip": [
+          "ix-icon"
+        ]
+      },
+      "props": [
+        {
+          "name": "advanced",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "advanced",
+          "reflectToAttr": false,
+          "docs": "Advanced mode",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "mutable": false,
+          "attr": "count",
+          "reflectToAttr": false,
+          "docs": "Total number of pages",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "i18nItems",
+          "type": "string",
+          "mutable": false,
+          "attr": "i-1-8n-items",
+          "reflectToAttr": false,
+          "docs": "/**\n  i18n",
+          "docsTags": [],
+          "default": "'Items'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "i18nOf",
+          "type": "string",
+          "mutable": false,
+          "attr": "i-1-8n-of",
+          "reflectToAttr": false,
+          "docs": "i18n",
+          "docsTags": [],
+          "default": "'of'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "i18nPage",
+          "type": "string",
+          "mutable": false,
+          "attr": "i-1-8n-page",
+          "reflectToAttr": false,
+          "docs": "i18n",
+          "docsTags": [],
+          "default": "'Page'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "itemCount",
+          "type": "number",
+          "mutable": false,
+          "attr": "item-count",
+          "reflectToAttr": false,
+          "docs": "Number of items shown at once.\nCan only be changed in advaced mode.",
+          "docsTags": [],
+          "default": "15",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "selectedPage",
+          "type": "number",
+          "mutable": true,
+          "attr": "selected-page",
+          "reflectToAttr": false,
+          "docs": "Zero based index of currently selected page",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "showItemCount",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "show-item-count",
+          "reflectToAttr": false,
+          "docs": "Show item count in advanced mode",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "itemCountChanged",
+          "detail": "number",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Item count change event",
+          "docsTags": []
+        },
+        {
+          "event": "pageSelected",
+          "detail": "number",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Page selection event",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "./src/components/pill",
       "filePath": "./src/components/pill/pill.tsx",
@@ -6639,7 +6857,9 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [],
+      "dependents": [
+        "ix-pagination"
+      ],
       "dependencies": [
         "ix-select-item",
         "ix-filter-chip",
@@ -6668,6 +6888,9 @@
         ],
         "ix-icon-button": [
           "ix-icon"
+        ],
+        "ix-pagination": [
+          "ix-select"
         ]
       },
       "props": [
@@ -6889,6 +7112,7 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [
+        "ix-pagination",
         "ix-select"
       ],
       "dependencies": [
@@ -6901,6 +7125,9 @@
         "ix-dropdown-item": [
           "ix-icon"
         ],
+        "ix-pagination": [
+          "ix-select-item"
+        ],
         "ix-select": [
           "ix-select-item"
         ]

diff --git a/packages/core/scss/components/_forms.scss b/packages/core/scss/components/_forms.scss
@@ -56,7 +56,7 @@
   &::-webkit-inner-spin-button {
     margin-right: -2px;
     margin-left: 2px;
-    //   display: none;
+    display: none;
   }
 
   text-align: right;