@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.11

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

@@ -0,0 +1,71 @@
+import { html, LitElement } from 'lit';
+import './index.ts';
+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 './index.js';
+export declare const PageIndicator: import("@lit/react").ReactWebComponent<WarpPageIndicator, {}>;

package/dist/packages/pageindicator/react.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { WarpPageIndicator } from './index.js';
+export const PageIndicator = createComponent({
+    tagName: 'w-pageindicator',
+    elementClass: WarpPageIndicator,
+    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,37 @@
+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 };
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-pagination': WarpPagination;
+    }
+}