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

package/dist/packages/pagination/pagination.test.js

@@ -0,0 +1,76 @@
+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';
+test('current page is the active page', async () => {
+    const component = html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.element(page.getByLabelText('Page 5')).toBeInTheDocument();
+    await expect.element(page.getByLabelText('Page 5')).toHaveAttribute('aria-current', 'page');
+});
+test('limits the number of displayed pages', async () => {
+    const component = html `<w-pagination current-page="10" pages="20" visible-pages="5" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByRole('link').and(page.getByLabelText('Page ')).all()).toHaveLength(5);
+});
+test('shows link to first page if current page is page 3 or beyond', async () => {
+    const component = html `<w-pagination current-page="10" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('First page')).toBeInTheDocument();
+});
+test('does not show link to first page if current page is page 1 or 2', async () => {
+    for (let i = 1; i <= 2; i++) {
+        const component = html `<w-pagination current-page="${i}" pages="20" base-url="/page/"></w-pagination>`;
+        const page = render(component);
+        await expect.poll(() => page.getByText('First page').query()).not.toBeInTheDocument();
+    }
+});
+test('shows link to previous page if current page is page 2 or beyond', async () => {
+    const component = html `<w-pagination current-page="10" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('Previous page')).toBeInTheDocument();
+});
+test('does not show link to previous page if current page is the first page', async () => {
+    const component = html `<w-pagination current-page="1" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('Previous page').query()).not.toBeInTheDocument();
+});
+test('shows link to next page', async () => {
+    const component = html `<w-pagination current-page="15" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('Next page').query()).toBeInTheDocument();
+});
+test('does not show link to next page if current page is the last page', async () => {
+    const component = html `<w-pagination current-page="20" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('Next page').query()).not.toBeInTheDocument();
+});
+test('is able to get the correct data-page-number attribute from the element on click', async () => {
+    const component = html `<w-pagination current-page="15" pages="20" base-url="/page/" data-testid="pagination"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('14').query()).toBeInTheDocument();
+    let clickedPage = null;
+    page
+        .getByTestId('pagination')
+        .element()
+        .addEventListener('click', (e) => {
+        e.preventDefault();
+    });
+    page
+        .getByTestId('pagination')
+        .element()
+        .addEventListener('page-click', (e) => {
+        clickedPage = e.detail.clickedPage;
+    });
+    const element = page.getByLabelText('page 14');
+    await userEvent.click(element);
+    await vi.waitFor(() => {
+        if (clickedPage === null) {
+            throw new Error('clickedPage was not set');
+        }
+    }, {
+        interval: 100,
+    });
+    expect(clickedPage).toEqual('14');
+});

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

@@ -0,0 +1,5 @@
+import { WarpPagination } from '.';
+export declare const Pagination: import("@lit/react").ReactWebComponent<WarpPagination, {
+    onPageClick: string;
+    'onpage-click': string;
+}>;

package/dist/packages/pagination/react.js

@@ -0,0 +1,15 @@
+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 Pagination = createComponent({
+    tagName: 'w-pagination',
+    elementClass: Component,
+    react: React,
+    events: {
+        onPageClick: 'page-click',
+        'onpage-click': 'page-click',
+    },
+});

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

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

package/dist/packages/pagination/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,: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}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.border-0{border-width:0}.rounded-full{border-radius:9999px}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:no-underline:hover,.focus\\:no-underline:focus{text-decoration:none}.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}.justify-center{justify-content:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-4{padding:.4rem}.p-8{padding:.8rem}.visible{visibility:visible}.pointer-events-none{pointer-events:none}.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-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}`;

package/dist/packages/slider/Slider.d.ts

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

package/dist/packages/slider/Slider.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { WarpSlider } from './slider.js';
+export const Slider = createComponent({
+    tagName: 'w-slider',
+    elementClass: WarpSlider,
+    react: React,
+});

package/dist/packages/slider/SliderThumb.d.ts

@@ -0,0 +1,2 @@
+import { WarpSliderThumb } from './slider-thumb.js';
+export declare const SliderThumb: import("@lit/react").ReactWebComponent<WarpSliderThumb, {}>;

package/dist/packages/slider/SliderThumb.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { WarpSliderThumb } from './slider-thumb.js';
+export const SliderThumb = createComponent({
+    tagName: 'w-slider-thumb',
+    elementClass: WarpSliderThumb,
+    react: React,
+});

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

@@ -0,0 +1,2 @@
+export * from './slider.js';
+export * from './slider-thumb.js';

package/dist/packages/slider/index.js

@@ -0,0 +1,2 @@
+export * from './slider.js';
+export * from './slider-thumb.js';

package/dist/packages/slider/oddbird-css-anchor-positioning.d.ts

@@ -0,0 +1,2 @@
+import polyfill from '@oddbird/css-anchor-positioning/fn';
+export default polyfill;

package/dist/packages/slider/oddbird-css-anchor-positioning.js

@@ -0,0 +1,3 @@
+// This file is only here to give the Storybook Vite dev server a target
+import polyfill from '@oddbird/css-anchor-positioning/fn';
+export default polyfill;

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

@@ -0,0 +1,8 @@
+import { EventName } from '@lit/react';
+import { WarpSlider } from './slider';
+import { WarpSliderThumb } from './slider-thumb';
+export declare const Slider: import("@lit/react").ReactWebComponent<WarpSlider, {}>;
+export declare const SliderThumb: import("@lit/react").ReactWebComponent<WarpSliderThumb, {
+    onSliderValidity: EventName<CustomEvent>;
+    'onslider-validity': EventName<CustomEvent>;
+}>;

package/dist/packages/slider/react.js

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import React from 'react';
+import { createComponent } from '@lit/react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Slider = createComponent({
+    tagName: 'w-slider',
+    elementClass: Component,
+    react: React,
+});
+export const SliderThumb = createComponent({
+    tagName: 'w-slider-thumb',
+    elementClass: Component,
+    react: React,
+    events: {
+        onSliderValidity: 'slidervalidity',
+        'onslider-validity': 'slidervalidity', // should be slider-validity
+    },
+});

package/dist/packages/slider/slider-thumb.d.ts

@@ -0,0 +1,57 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { WarpTextField } from '../textfield/index.js';
+declare const WarpSliderThumb_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * Component to place inside a `<w-slider>`.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ */
+declare class WarpSliderThumb extends WarpSliderThumb_base {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult[];
+    ariaLabel: string;
+    ariaDescription: string;
+    label: string;
+    name: string;
+    value: string;
+    disabled: boolean;
+    /** Set by `<w-slider>` */
+    markers: string;
+    /** Set by `<w-slider>` */
+    required: boolean;
+    /** Set by `<w-slider>` */
+    step: number;
+    /** Set by `<w-slider>` */
+    min: string;
+    /** Set by `<w-slider>` */
+    max: string;
+    /** Set by `<w-slider>` */
+    suffix: string;
+    /** @internal */
+    forceDisabled: boolean;
+    /** @internal */
+    forceInvalid: boolean;
+    /** JS hook to help you format the numeric value how you want. */
+    formatter: (value: string) => string;
+    range: HTMLInputElement;
+    textfield: WarpTextField;
+    /** @internal */
+    _invalid: boolean;
+    /** @internal */
+    _showTooltip: boolean;
+    /**
+     * Reference to the anchor positioning style element used by the polyfill.
+     * @internal
+     */
+    anchorPositioningStyleElement: HTMLStyleElement | null;
+    connectedCallback(): Promise<void>;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpSliderThumb };