@warp-ds/elements 2.2.0 → 2.3.0-next.2

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { PageIndicator } from './react';
+declare const _default: {
+    title: string;
+    render: ({ pageCount, selectedPage }: Omit<React.HTMLAttributes<import(".").WarpPageIndicator>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "selectedPage" | "pageCount"> & {} & Partial<Omit<import(".").WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<import(".").WarpPageIndicator>) => React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpPageIndicator, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof PageIndicator>;
+export declare const Default: {
+    args: {
+        pageCount: number;
+        selectedPage: number;
+    };
+};
+export declare const InsideContainer: () => React.JSX.Element;
+export declare const InsideContainer10Pages: () => React.JSX.Element;
+export declare const OutsideContainer: () => React.JSX.Element;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PageIndicator } from './react';
+export default {
+    title: 'Navigation/PageIndicator',
+    render: ({ pageCount, selectedPage }) => React.createElement(PageIndicator, { pageCount: pageCount, selectedPage: selectedPage }),
+    component: PageIndicator,
+};
+export const Default = {
+    args: {
+        pageCount: 5,
+        selectedPage: 1,
+    },
+};
+export const InsideContainer = () => (React.createElement("div", { style: { display: 'grid', height: '60vh', border: '1px solid lightgrey' } },
+    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingBottom: '12px', alignSelf: 'end' } }, ' ')));
+export const InsideContainer10Pages = () => (React.createElement("div", { style: { display: 'grid', height: '60vh', border: '1px solid lightgrey' } },
+    React.createElement(PageIndicator, { pageCount: 10, selectedPage: 3, style: { paddingBottom: '12px', alignSelf: 'end' } }, ' ')));
+export const OutsideContainer = () => (React.createElement("div", { style: { height: '450px', border: '1px solid lightgrey' } },
+    React.createElement("div", { style: { height: '300px', borderBottom: '1px solid #e6e6e6' } }),
+    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingTop: '16px' } }, ' ')));

package/dist/packages/pageindicator/pageindicator.stories.d.ts

@@ -0,0 +1,32 @@
+import './index.js';
+declare const _default: {
+    component: string;
+    title: string;
+    render: ({ pageCount, selectedPage }: {
+        pageCount: any;
+        selectedPage: any;
+    }) => import("lit").TemplateResult<1>;
+    argTypes: {
+        pageCount: {
+            control: {
+                type: string;
+            };
+        };
+        selectedPage: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        pageCount: number;
+        selectedPage: number;
+    };
+};
+export declare const InsideContainer: () => import("lit").TemplateResult<1>;
+export declare const InsideContainerChangePage: () => import("lit").TemplateResult<1>;
+export declare const InsideContainer10Pages: () => import("lit").TemplateResult<1>;
+export declare const OutsideContainer: () => import("lit").TemplateResult<1>;

package/dist/packages/pageindicator/pageindicator.stories.js

@@ -0,0 +1,71 @@
+import { html, LitElement } from 'lit';
+import './index.js';
+export default {
+    component: 'w-pageindicator',
+    title: 'Navigation/PageIndicator',
+    render: ({ pageCount, selectedPage }) => html `
+    <w-pageindicator page-count=${pageCount} selected-page=${selectedPage}></w-pageindicator>
+  `,
+    argTypes: {
+        pageCount: {
+            control: { type: 'number' },
+        },
+        selectedPage: {
+            control: { type: 'number' },
+        },
+    },
+};
+export const Default = {
+    args: {
+        pageCount: 5,
+        selectedPage: 1,
+    },
+};
+export const InsideContainer = () => html `
+  <div style="display: grid; height: 60vh; border: 1px solid lightgrey;">
+    <w-pageindicator page-count="5" selected-page="1" style="padding-bottom: 12px; align-self: end;"> </w-pageindicator>
+  </div>
+`;
+class PageIndicatorChangePage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.page = 1;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.startPageChanger();
+    }
+    startPageChanger() {
+        setInterval(() => {
+            if (this.page > 4) {
+                this.page = 1;
+            }
+            else {
+                this.page = this.page + 1;
+            }
+        }, 1000);
+    }
+    render() {
+        return html `
+      <div style="display: grid; height: 60vh; border: 1px solid lightgrey;">
+        <div style="align-self: center; justify-self: center;">Page ${this.page}</div>
+        <w-pageindicator page-count="5" selected-page=${this.page} style="padding-bottom: 12px; align-self: end;"> </w-pageindicator>
+      </div>
+    `;
+    }
+}
+if (!customElements.get('page-indicator-change-page')) {
+    customElements.define('page-indicator-change-page', PageIndicatorChangePage);
+}
+export const InsideContainerChangePage = () => html ` <page-indicator-change-page></page-indicator-change-page> `;
+export const InsideContainer10Pages = () => html `
+  <div style="display: grid; height: 60vh; border: 1px solid lightgrey;">
+    <w-pageindicator page-count="10" selected-page="3" style="padding-bottom: 12px; align-self: end;"> </w-pageindicator>
+  </div>
+`;
+export const OutsideContainer = () => html `
+  <div style="height: 450px; border: 1px solid lightgrey;">
+    <div style="height: 300px; border-bottom: 1px solid #e6e6e6;"></div>
+    <w-pageindicator page-count="5" selected-page="1" style="padding-top: 16px;"> </w-pageindicator>
+  </div>
+`;

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

@@ -0,0 +1,2 @@
+import { WarpPageIndicator } from '.';
+export declare const PageIndicator: import("@lit/react").ReactWebComponent<WarpPageIndicator, {}>;

package/dist/packages/pageindicator/react.js

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+import { createComponent } from '@lit/react';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const PageIndicator = createComponent({
+    tagName: 'w-pageindicator',
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/pageindicator/style.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/pageindicator/style.js

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+export const styles = css `
+  .w-pageindicator {
+    display: grid;
+    justify-content: center;
+    height: max-content;
+    pointer-events: none;
+  }
+
+  .w-pageindicator--container {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 8px;
+  }
+
+  .w-pageindicator--dot {
+    background-color: var(--w-s-color-background-disabled);
+    border-radius: 5px;
+    width: 10px;
+    height: 10px;
+  }
+
+  .w-pageindicator--selecteddot {
+    background-color: var(--w-s-color-icon-selected);
+  }
+`;

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

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/chevron-double-left-16';
+import '@warp-ds/icons/elements/chevron-left-16';
+import '@warp-ds/icons/elements/chevron-right-16';
+/**
+ * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
+ *
+ * @fires {CustomEvent} page-click - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+ */
+declare class WarpPagination extends LitElement {
+    #private;
+    baseUrl: string;
+    pages: number;
+    currentPageNumber: number;
+    visiblePages: number;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    /** @internal */
+    get shouldShowShowFirstPageButton(): boolean;
+    /** @internal */
+    get shouldShowPreviousPageButton(): boolean;
+    /** @internal */
+    get shouldShowNextPageButton(): boolean;
+    /** @internal */
+    get currentPageIndex(): number;
+    /** @internal */
+    get visiblePageNumbers(): number[];
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpPagination };