init pagiantion element

src/Umbraco.Web.UI.Client/src/packages/core/collection/components/index.ts

@@ -1,7 +1,9 @@
+import './pagination/collection-pagination.element.js';
 import './collection-selection-actions.element.js';
 import './collection-toolbar.element.js';
 import './collection-view-bundle.element.js';
 
+export * from './pagination/collection-pagination.element.js';
 export * from './collection-selection-actions.element.js';
 export * from './collection-toolbar.element.js';
-export * from './collection-view-bundle.element.js';
+export * from './collection-view-bundle.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/collection/components/pagination/collection-pagination.element.ts

@@ -0,0 +1,53 @@
+import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement, nothing, state } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_COLLECTION_CONTEXT, UmbCollectionContext } from '@umbraco-cms/backoffice/collection';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+@customElement('umb-collection-pagination')
+export class UmbCollectionPaginationElement extends UmbLitElement {
+
+  @state()
+  _totalPages = 11;
+
+  @state()
+  _currentPage = 1;
+
+	private _collectionContext?: UmbCollectionContext<any, any>;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+			this._collectionContext = instance;
+		});
+	}
+
+  #onChange (event: UUIPaginationEvent) { 
+    console.log(event);
+    console.log(event.target.current);
+    this._collectionContext?.setPage(event.target.current);
+  }
+
+	render() {
+    if (this._totalPages === 0) {
+      return nothing;
+    }
+
+		return html`<uui-pagination .current=${this._currentPage} .total=${this._totalPages} @change=${this.#onChange}></uui-pagination>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+      :host {
+        display: block;
+      }
+    `
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-collection-pagination': UmbCollectionPaginationElement;
+	}
+}