Added pagination action to Toniq List Table and Toniq Pagination (#134)

Author: ponnexcodev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.21.0",
+    "version": "16.21.1",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.21.0",
+    "version": "16.21.1",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

packages/design-system/package.json

@@ -3,7 +3,7 @@ import {defineBookPage} from 'element-book';
 import {CSSResult, HTMLTemplateResult, css, html, listen, unsafeCSS} from 'element-vir';
 import {noNativeFormStyles} from 'vira';
 import {elementsBookPage} from '../../element-book/book-pages/elements.book';
-import {CryptoBtc24Icon} from '../../icons';
+import {CryptoBtc24Icon, Target24Icon} from '../../icons';
 import {toniqFontStyles} from '../../styles';
 import {toniqColors} from '../../styles/colors';
 import {defineToniqElementNoInputs} from '../define-toniq-element';
@@ -1010,6 +1010,22 @@ const examples: ReadonlyArray<
             },
         },
     },
+    {
+        title: 'with pagination and custom action',
+        inputs: {
+            pagination: {
+                currentPage: 1,
+                pageCount: 10,
+            },
+            paginationAction: html`
+                <${ToniqIcon.assign({icon: Target24Icon})}
+                    ${listen('click', () => {
+                        alert('pagination action');
+                    })}
+                ></${ToniqIcon}>
+            `,
+        },
+    },
     {
         title: 'squished horizontally',
         styles: css`

packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.book.ts

@@ -8,6 +8,7 @@ import {
 } from '@augment-vir/common';
 import {
     CSSResult,
+    HTMLTemplateResult,
     HtmlInterpolation,
     classMap,
     css,
@@ -80,6 +81,7 @@ export type ListTableInputs = {
      * in fixed/consistent column sizes in all rows
      */
     nonBlocking?: boolean | undefined;
+    paginationAction?: HTMLTemplateResult | undefined;
 };
 
 export type CreateRowObjectCallback<EntryType, Columns extends ColumnsBase> = (
@@ -410,6 +412,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
                       <${ToniqPagination.assign({
                           currentPage: inputs.pagination.currentPage,
                           pageCount: inputs.pagination.pageCount,
+                          paginationAction: inputs.paginationAction,
                       })}
                           class=${classMap({
                               'blocked-pagination': !!inputs.showLoading,

packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts

@@ -1,4 +1,12 @@
-import {classMap, css, defineElementEvent, html, listen} from 'element-vir';
+import {
+    classMap,
+    css,
+    defineElementEvent,
+    html,
+    HTMLTemplateResult,
+    listen,
+    renderIf,
+} from 'element-vir';
 import {noNativeFormStyles, noUserSelect} from 'vira';
 import {pagination} from '../../augments/array';
 import {ArrowLeft24Icon, ArrowRight24Icon} from '../../icons';
@@ -17,6 +25,7 @@ export const ToniqPagination = defineToniqElement<{
      * into "...". Instances of "..." are included in the pagesShown count.
      */
     pagesShown?: number | undefined;
+    paginationAction?: HTMLTemplateResult | undefined;
 }>()({
     tagName: 'toniq-pagination',
     styles: css`
@@ -129,6 +138,12 @@ export const ToniqPagination = defineToniqElement<{
                 >
                     <${ToniqIcon.assign({icon: ArrowRight24Icon})}></${ToniqIcon}>
                 </button>
+                ${renderIf(
+                    !!inputs.paginationAction,
+                    html`
+                        <button class="control">${inputs.paginationAction}</button>
+                    `,
+                )}
             `;
         }
     },

packages/design-system/src/elements/toniq-pagination/toniq-pagination.element.ts

@@ -77,6 +77,7 @@ import {Social24Icon} from './svgs/core-24/social-24.icon';
 import {Square24Icon} from './svgs/core-24/square-24.icon';
 import {SquareCheck24Icon} from './svgs/core-24/square-check-24.icon';
 import {Tag24Icon} from './svgs/core-24/tag-24.icon';
+import {Target24Icon} from './svgs/core-24/target-24.icon';
 import {Trash24Icon} from './svgs/core-24/trash-24.icon';
 import {Upload24Icon} from './svgs/core-24/upload-24.icon';
 import {UploadCloud24Icon} from './svgs/core-24/upload-cloud-24.icon';
@@ -209,6 +210,7 @@ export * from './svgs/core-24/social-24.icon';
 export * from './svgs/core-24/square-24.icon';
 export * from './svgs/core-24/square-check-24.icon';
 export * from './svgs/core-24/tag-24.icon';
+export * from './svgs/core-24/target-24.icon';
 export * from './svgs/core-24/trash-24.icon';
 export * from './svgs/core-24/upload-24.icon';
 export * from './svgs/core-24/upload-cloud-24.icon';
@@ -347,6 +349,7 @@ export const allIconsByCategory = {
         Square24Icon,
         SquareCheck24Icon,
         Tag24Icon,
+        Target24Icon,
         Trash24Icon,
         Upload24Icon,
         UploadCloud24Icon,

packages/design-system/src/icons/index.ts

@@ -0,0 +1,28 @@
+import {html} from 'element-vir';
+import {defineIcon} from 'vira';
+import {toniqIconCssVars} from '../../../styles/icon-css-vars';
+
+export const Target24Icon = defineIcon({
+    name: 'Target24Icon',
+    svgTemplate: html`
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            stroke=${toniqIconCssVars['toniq-icon-stroke-color'].value}
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+        >
+            <path
+                stroke-width=${toniqIconCssVars['toniq-icon-stroke-width'].value}
+                d="M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0"
+            />
+            <path
+                stroke-width=${toniqIconCssVars['toniq-icon-stroke-width'].value}
+                d="M4 12a8 8 0 1 0 16 0 8 8 0 0 0-16 0m8-10v2m0 16v2m8-10h2M2 12h2"
+            />
+        </svg>
+    `,
+});

packages/design-system/src/icons/svgs/core-24/target-24.icon.ts

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.21.0",
+    "version": "16.21.1",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

packages/native-elements-test/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.21.0",
+    "version": "16.21.1",
     "private": true,
     "scripts": {
         "compile": "virmator compile",