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

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',
+    },
 });

package/dist/packages/pill/index.js

@@ -2446,7 +2446,7 @@ Please compile your catalog first.
                     display: none
                 }
             }
-        `;var ne=JSON.parse('{"pill.aria.openFilter":["\xC5bn filter"],"pill.aria.removeFilter":["Fjern filter ",["label"]]}');var se=JSON.parse('{"pill.aria.openFilter":["Open filter"],"pill.aria.removeFilter":["Remove filter ",["label"]]}');var le=JSON.parse('{"pill.aria.openFilter":["Avaa suodatin"],"pill.aria.removeFilter":["Tyhjenn\xE4 suodatin ",["label"]]}');var ce=JSON.parse('{"pill.aria.openFilter":["\xC5pne filter"],"pill.aria.removeFilter":["Fjern filter ",["label"]]}');var de=JSON.parse('{"pill.aria.openFilter":["\xD6ppna filter"],"pill.aria.removeFilter":["Ta bort filtret ",["label"]]}');import{css as rr}from"lit";var be=rr`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.bg-\\[--w-color-pill-suggestion-background\\]{background-color:var(--w-color-pill-suggestion-background)}.hover\\:bg-\\[--w-color-pill-suggestion-background-hover\\]:hover{background-color:var(--w-color-pill-suggestion-background-hover)}.active\\:bg-\\[--w-color-pill-suggestion-background-active\\]:active{background-color:var(--w-color-pill-suggestion-background-active)}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.flex{display:flex}.inline-flex{display:inline-flex}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.hover\\:s-bg-primary-hover:hover{background-color:var(--w-s-color-background-primary-hover)}.active\\:s-bg-primary-active:active{background-color:var(--w-s-color-background-primary-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.h-16{height:1.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.pl-12{padding-left:1.2rem}.pl-4{padding-left:.4rem}.pr-12{padding-right:1.2rem}.pr-2{padding-right:.2rem}.font-bold{font-weight:700}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}`;var d={wrapper:"flex items-center",button:"inline-flex items-center focusable text-xs transition-all",suggestion:"bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold",filter:"s-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted",label:"pl-12 py-8 rounded-l-full",labelWithoutClose:"pr-12 rounded-r-full",labelWithClose:"pr-2",close:"pr-12 pl-4 py-8 rounded-r-full",closeIcon:"h-16",a11y:"sr-only"},g=class extends or{constructor(){super(),te(se,ce,le,ne,de),this.canClose=!1,this.suggestion=!1,this.openFilterSrText=p._({id:"pill.aria.openFilter",message:"Open filter",comment:"Fallback screen reader message for open filter"}),this.removeFilterSrText=p._({id:"pill.aria.removeFilter",message:"Remove filter {label}",comment:"Fallback screen reader message for removal of the filter"})}get _labelClasses(){return S([d.button,d.label,this.suggestion?d.suggestion:d.filter,this.canClose?d.labelWithClose:d.labelWithoutClose])}get _closeClasses(){return S([d.button,d.close,this.suggestion?d.suggestion:d.filter])}_onClick(){this.dispatchEvent(new CustomEvent("w-pill-click",{bubbles:!0,composed:!0}))}_onClose(){this.dispatchEvent(new CustomEvent("w-pill-close",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),this.openSrLabel&&(this.openAriaLabel=this.openSrLabel),this.closeSrLabel&&(this.closeAriaLabel=this.closeSrLabel)}render(){return pe`
+        `;var ne=JSON.parse('{"pill.aria.openFilter":["\xC5bn filter"],"pill.aria.removeFilter":["Fjern filter ",["label"]]}');var se=JSON.parse('{"pill.aria.openFilter":["Open filter"],"pill.aria.removeFilter":["Remove filter ",["label"]]}');var le=JSON.parse('{"pill.aria.openFilter":["Avaa suodatin"],"pill.aria.removeFilter":["Tyhjenn\xE4 suodatin ",["label"]]}');var ce=JSON.parse('{"pill.aria.openFilter":["\xC5pne filter"],"pill.aria.removeFilter":["Fjern filter ",["label"]]}');var de=JSON.parse('{"pill.aria.openFilter":["\xD6ppna filter"],"pill.aria.removeFilter":["Ta bort filtret ",["label"]]}');import{css as rr}from"lit";var be=rr`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.bg-\\[--w-color-pill-suggestion-background\\]{background-color:var(--w-color-pill-suggestion-background)}.hover\\:bg-\\[--w-color-pill-suggestion-background-hover\\]:hover{background-color:var(--w-color-pill-suggestion-background-hover)}.active\\:bg-\\[--w-color-pill-suggestion-background-active\\]:active{background-color:var(--w-color-pill-suggestion-background-active)}.rounded{border-radius:4px}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.flex{display:flex}.inline-flex{display:inline-flex}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.hover\\:s-bg-primary-hover:hover{background-color:var(--w-s-color-background-primary-hover)}.active\\:s-bg-primary-active:active{background-color:var(--w-s-color-background-primary-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.h-16{height:1.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.pl-12{padding-left:1.2rem}.pl-4{padding-left:.4rem}.pr-12{padding-right:1.2rem}.pr-2{padding-right:.2rem}.font-bold{font-weight:700}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}`;var d={wrapper:"flex items-center",button:"inline-flex items-center focusable text-xs transition-all",suggestion:"bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold",filter:"s-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted",label:"pl-12 py-8 rounded-l-full",labelWithoutClose:"pr-12 rounded-r-full",labelWithClose:"pr-2",close:"pr-12 pl-4 py-8 rounded-r-full",closeIcon:"h-16",a11y:"sr-only"},g=class extends or{constructor(){super(),te(se,ce,le,ne,de),this.canClose=!1,this.suggestion=!1,this.openFilterSrText=p._({id:"pill.aria.openFilter",message:"Open filter",comment:"Fallback screen reader message for open filter"}),this.removeFilterSrText=p._({id:"pill.aria.removeFilter",message:"Remove filter {label}",comment:"Fallback screen reader message for removal of the filter"})}get _labelClasses(){return S([d.button,d.label,this.suggestion?d.suggestion:d.filter,this.canClose?d.labelWithClose:d.labelWithoutClose])}get _closeClasses(){return S([d.button,d.close,this.suggestion?d.suggestion:d.filter])}_onClick(){this.dispatchEvent(new CustomEvent("w-pill-click",{bubbles:!0,composed:!0}))}_onClose(){this.dispatchEvent(new CustomEvent("w-pill-close",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),this.openSrLabel&&(this.openAriaLabel=this.openSrLabel),this.closeSrLabel&&(this.closeAriaLabel=this.closeSrLabel)}render(){return pe`
       <div class="${d.wrapper}">
         <button type="button" class="${this._labelClasses}" @click="${this._onClick}">
           <span class="${d.a11y}">${this.openAriaLabel?this.openAriaLabel:this.openFilterSrText}</span>