@warp-ds/elements 2.5.1-next.1 → 2.5.1-next.2

package/dist/.storybook/utilities.d.ts

@@ -3,6 +3,7 @@
  *
  * - Empty strings are treated as not set.
  * - Boolean false don't get set.
+ * - camelCase property names are converted to kebab-case attribute names.
  *
  * @example
  * ```ts

package/dist/.storybook/utilities.js

@@ -1,8 +1,16 @@
+/**
+ * Converts camelCase to kebab-case.
+ * @example camelToKebab('openOnFocus') // 'open-on-focus'
+ */
+function camelToKebab(str) {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
 /**
  * Massages storybook args before being spread to HTML attributes.
  *
  * - Empty strings are treated as not set.
  * - Boolean false don't get set.
+ * - camelCase property names are converted to kebab-case attribute names.
  *
  * @example
  * ```ts
@@ -26,27 +34,27 @@
  * ```
  */
 export function prespread(args) {
-    const newArgs = {
-        ...args,
-    };
-    for (const field of Object.keys(newArgs)) {
+    const newArgs = {};
+    for (const field of Object.keys(args)) {
         const value = args[field];
+        // Skip empty strings
+        if (value === '') {
+            continue;
+        }
+        // Convert camelCase to kebab-case for attribute names
+        const attrName = camelToKebab(field);
         // Add Lit syntax for boolean attributes
         if (typeof value === 'boolean') {
-            newArgs[`?${field}`] = value;
-            delete newArgs[field];
+            newArgs[`?${attrName}`] = value;
+            continue;
         }
-        // Add Lit syntax for complex properties
+        // Add Lit syntax for complex properties (keep camelCase for properties)
         if (typeof value === 'object') {
             newArgs[`.${field}`] = value;
-            delete newArgs[field];
-        }
-        // The manifest has a bunch of default empty strings (which we should probably investigate)
-        // that turn on features that should be off in Storybook canvases.
-        // Remove the empty strings.
-        if (newArgs[field] === '') {
-            delete newArgs[field];
+            continue;
         }
+        // String and number values use kebab-case attribute names
+        newArgs[attrName] = value;
     }
     return newArgs;
 }

package/dist/custom-elements.json

@@ -4858,6 +4858,137 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/pagination/pagination.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)",
+          "name": "WarpPagination",
+          "members": [
+            {
+              "kind": "field",
+              "name": "baseUrl",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "base-url",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pages",
+              "type": {
+                "text": "number"
+              },
+              "attribute": "pages",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "currentPageNumber",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "current-page",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "visiblePages",
+              "type": {
+                "text": "number"
+              },
+              "default": "7",
+              "attribute": "visible-pages",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "#dispatchClickPage",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "page-click",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "base-url",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "baseUrl"
+            },
+            {
+              "name": "pages",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "pages"
+            },
+            {
+              "name": "current-page",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "currentPageNumber"
+            },
+            {
+              "name": "visible-pages",
+              "type": {
+                "text": "number"
+              },
+              "default": "7",
+              "fieldName": "visiblePages"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-pagination",
+          "customElement": true,
+          "modulePath": "packages/pagination/pagination.ts",
+          "definitionPath": "packages/pagination/pagination.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-pagination",
+          "declaration": {
+            "name": "WarpPagination",
+            "module": "packages/pagination/pagination.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpPagination",
+          "declaration": {
+            "name": "WarpPagination",
+            "module": "packages/pagination/pagination.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/index.d.ts

@@ -23,6 +23,7 @@ import type { WarpTab } from "./packages/tab/tab.ts";
 import type { WarpTabPanel } from "./packages/tab-panel/tab-panel.ts";
 import type { WarpTabs } from "./packages/tabs/tabs.ts";
 import type { WIcon } from "./packages/icon/icon.ts";
+import type { WarpPagination } from "./packages/pagination/pagination.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -1268,6 +1269,50 @@ export type WIconSolidJsProps = {
   textContent?: string | number;
 };
 
+export type WarpPaginationProps = {
+  /**  */
+  "base-url"?: WarpPagination["baseUrl"];
+  /**  */
+  baseUrl?: WarpPagination["baseUrl"];
+  /**  */
+  pages?: WarpPagination["pages"];
+  /**  */
+  "current-page"?: WarpPagination["currentPageNumber"];
+  /**  */
+  currentPageNumber?: WarpPagination["currentPageNumber"];
+  /**  */
+  "visible-pages"?: WarpPagination["visiblePages"];
+  /**  */
+  visiblePages?: WarpPagination["visiblePages"];
+
+  /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
+  "onpage-click"?: (e: CustomEvent) => void;
+};
+
+export type WarpPaginationSolidJsProps = {
+  /**  */
+  "attr:base-url"?: WarpPagination["baseUrl"];
+  /**  */
+  "prop:baseUrl"?: WarpPagination["baseUrl"];
+  /**  */
+  "prop:pages"?: WarpPagination["pages"];
+  /**  */
+  "attr:current-page"?: WarpPagination["currentPageNumber"];
+  /**  */
+  "prop:currentPageNumber"?: WarpPagination["currentPageNumber"];
+  /**  */
+  "attr:visible-pages"?: WarpPagination["visiblePages"];
+  /**  */
+  "prop:visiblePages"?: WarpPagination["visiblePages"];
+  /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
+  "on:page-click"?: (e: CustomEvent) => void;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type CustomElements = {
   /**
    * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
@@ -1910,6 +1955,30 @@ export type CustomElements = {
    * - `locale`: Locale used in CDN URL
    */
   "w-icon": Partial<WIconProps & BaseProps<WIcon> & BaseEvents>;
+
+  /**
+   * 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)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `base-url`/`baseUrl`: undefined
+   * - `pages`: undefined
+   * - `current-page`/`currentPageNumber`: undefined
+   * - `visible-pages`/`visiblePages`: undefined
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+   */
+  "w-pagination": Partial<
+    WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents
+  >;
 };
 
 export type CustomElementsSolidJs = {
@@ -2624,6 +2693,33 @@ export type CustomElementsSolidJs = {
   "w-icon": Partial<
     WIconProps & WIconSolidJsProps & BaseProps<WIcon> & BaseEvents
   >;
+
+  /**
+   * 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)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `base-url`/`baseUrl`: undefined
+   * - `pages`: undefined
+   * - `current-page`/`currentPageNumber`: undefined
+   * - `visible-pages`/`visiblePages`: undefined
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+   */
+  "w-pagination": Partial<
+    WarpPaginationProps &
+      WarpPaginationSolidJsProps &
+      BaseProps<WarpPagination> &
+      BaseEvents
+  >;
 };
 
 export type CustomCssProperties = {};

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 };