@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.21

package/dist/packages/pagination/pagination.react.stories.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Pagination } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpPagination>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+        onPageClick?: (e: Event) => void;
+        'onpage-click'?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import(".").WarpPagination>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpPagination, {
+        onPageClick: string;
+        'onpage-click': string;
+    }>;
+};
+export default _default;
+export type Story = StoryObj<typeof Pagination>;
+export declare const BasicPagination: Story;
+export declare const MiddlePageSelected: Story;
+export declare const LastPageSelected: Story;
+export declare const ManyPagesWithLimitedVisible: Story;
+export declare const SinglePage: Story;

package/dist/packages/pagination/pagination.react.stories.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Pagination } from './react';
+export default {
+    title: 'Navigation/Pagination',
+    render(args) {
+        return React.createElement(Pagination, { ...args });
+    },
+    component: Pagination,
+};
+export const BasicPagination = {
+    args: {
+        currentPageNumber: 1,
+        pages: 5,
+        baseUrl: '/search?page=',
+    },
+};
+export const MiddlePageSelected = {
+    args: {
+        currentPageNumber: 3,
+        pages: 7,
+        baseUrl: '/search?page=',
+    },
+};
+export const LastPageSelected = {
+    args: {
+        currentPageNumber: 10,
+        pages: 10,
+        baseUrl: '/search?page=',
+    },
+};
+export const ManyPagesWithLimitedVisible = {
+    args: {
+        currentPageNumber: 15,
+        pages: 50,
+        visiblePages: 5,
+        baseUrl: '/search?page=',
+    },
+};
+export const SinglePage = {
+    args: {
+        currentPageNumber: 1,
+        pages: 1,
+        baseUrl: '/search?page=',
+    },
+};

package/dist/packages/pagination/pagination.stories.js

@@ -1,6 +1,6 @@
-import { html } from 'lit';
 import { spread } from '@open-wc/lit-helpers';
 import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
 import { prespread } from '../../.storybook/utilities.js';
 import './index.js';
 const { events, args, argTypes } = getStorybookHelpers('w-pagination');
@@ -20,28 +20,28 @@ const meta = {
 export default meta;
 export const BasicPagination = {
     args: {
-        'current-page': 1,
+        'current-page-number': 1,
         pages: 5,
         'base-url': '/search?page=',
     },
 };
 export const MiddlePageSelected = {
     args: {
-        'current-page': 3,
+        'current-page-number': 3,
         pages: 7,
         'base-url': '/search?page=',
     },
 };
 export const LastPageSelected = {
     args: {
-        'current-page': 10,
+        'current-page-number': 10,
         pages: 10,
         'base-url': '/search?page=',
     },
 };
 export const ManyPagesWithLimitedVisible = {
     args: {
-        'current-page': 15,
+        'current-page-number': 15,
         pages: 50,
         'visible-pages': 5,
         'base-url': '/search?page=',
@@ -49,7 +49,7 @@ export const ManyPagesWithLimitedVisible = {
 };
 export const SinglePage = {
     args: {
-        'current-page': 1,
+        'current-page-number': 1,
         pages: 1,
         'base-url': '/search?page=',
     },

package/dist/packages/pagination/pagination.test.js

@@ -1,5 +1,5 @@
-import { html } from 'lit';
 import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
 import { expect, test, vi } from 'vitest';
 import { render } from 'vitest-browser-lit';
 import './index.js';

package/dist/packages/pagination/react.d.ts

@@ -1,2 +1,5 @@
-import { WarpPagination } from './index.js';
-export declare const Pagination: import("@lit/react").ReactWebComponent<WarpPagination, {}>;
+import { WarpPagination } from '.';
+export declare const Pagination: import("@lit/react").ReactWebComponent<WarpPagination, {
+    onPageClick: string;
+    'onpage-click': string;
+}>;

package/dist/packages/pagination/react.js

@@ -1,8 +1,15 @@
-import React from 'react';
+import { LitElement } from 'lit';
 import { createComponent } from '@lit/react';
-import { WarpPagination } from './index.js';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
 export const Pagination = createComponent({
     tagName: 'w-pagination',
-    elementClass: WarpPagination,
+    elementClass: Component,
     react: React,
+    events: {
+        onPageClick: 'page-click',
+        'onpage-click': 'page-click',
+    },
 });