@warp-ds/elements 2.3.2 → 2.4.0-next.10

package/dist/packages/page-indicator/page-indicator.stories.d.ts

@@ -0,0 +1,32 @@
+import './page-indicator.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/page-indicator/page-indicator.stories.js

@@ -0,0 +1,71 @@
+import { html, LitElement } from 'lit';
+import './page-indicator.js';
+export default {
+    component: 'w-page-indicator',
+    title: 'Navigation/PageIndicator',
+    render: ({ pageCount, selectedPage }) => html `
+    <w-page-indicator page-count=${pageCount} selected-page=${selectedPage}></w-page-indicator>
+  `,
+    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-page-indicator page-count="5" selected-page="1" style="padding-bottom: 12px; align-self: end;"> </w-page-indicator>
+  </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-page-indicator page-count="5" selected-page=${this.page} style="padding-bottom: 12px; align-self: end;"> </w-page-indicator>
+      </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-page-indicator page-count="10" selected-page="3" style="padding-bottom: 12px; align-self: end;"> </w-page-indicator>
+  </div>
+`;
+export const OutsideContainer = () => html `
+  <div style="height: 450px; border: 1px solid lightgrey;">
+    <div style="height: 300px; border-bottom: 1px solid #e6e6e6;"></div>
+    <w-page-indicator page-count="5" selected-page="1" style="padding-top: 16px;"> </w-page-indicator>
+  </div>
+`;

package/dist/packages/page-indicator/react.d.ts

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

package/dist/packages/page-indicator/react.js

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

package/dist/packages/page-indicator/style.d.ts

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

package/dist/packages/page-indicator/style.js

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

package/dist/packages/pagination/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Første side\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Næste side\"],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sider\"],\"pagination.aria.prev-page\":[\"Forrige side\"]}");

package/dist/packages/pagination/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"First page\"],\"pagination.aria.icon-suffix\":[\"icon\"],\"pagination.aria.next-page\":[\"Next page\"],\"pagination.aria.page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Pages\"],\"pagination.aria.prev-page\":[\"Previous page\"]}");

package/dist/packages/pagination/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Ensimmäinen sivu\"],\"pagination.aria.icon-suffix\":[\"kuvake\"],\"pagination.aria.next-page\":[\"Seuraava sivu\"],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sivut\"],\"pagination.aria.prev-page\":[\"Edellinen sivu\"]}");

package/dist/packages/pagination/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Første side\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Neste side\"],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sider\"],\"pagination.aria.prev-page\":[\"Forrige side\"]}");

package/dist/packages/pagination/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/pagination/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Första sidan\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Nästa sida\"],\"pagination.aria.page\":[\"Sida \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sidor\"],\"pagination.aria.prev-page\":[\"Föregående sida\"]}");

package/dist/packages/pagination/pagination.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 };