@warp-ds/elements 2.3.0-next.9 → 2.3.0

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

@@ -1,76 +0,0 @@
-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

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

package/dist/packages/pagination/react.js

@@ -1,15 +0,0 @@
-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

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

package/dist/packages/pagination/styles.js

@@ -1,2 +0,0 @@
-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/rip-and-tear-checkbox/checkbox-group.d.ts

@@ -1,10 +0,0 @@
-import { LitElement } from 'lit';
-export declare class WCheckboxGroup extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'w-checkbox-group': WCheckboxGroup;
-    }
-}

package/dist/packages/rip-and-tear-checkbox/checkbox-group.js

@@ -1,7 +0,0 @@
-import{css as t,html as r,LitElement as a}from"lit";var e=class extends a{render(){return r`<slot part="checkbox-group"></slot>`}};e.styles=t`
-    [part="checkbox-group"] {
-      display: grid;
-      gap: 16px;
-    }
-  `;export{e as WCheckboxGroup};
-//# sourceMappingURL=checkbox-group.js.map

package/dist/packages/rip-and-tear-checkbox/checkbox-group.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/rip-and-tear-checkbox/checkbox-group.ts"],
-  "sourcesContent": ["import { css, html, LitElement } from 'lit';\n\nexport class WCheckboxGroup extends LitElement {\n  static styles = css`\n    [part=\"checkbox-group\"] {\n      display: grid;\n      gap: 16px;\n    }\n  `\n  render() {\n    return html`<slot part=\"checkbox-group\"></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'w-checkbox-group': WCheckboxGroup;\n  }\n}\n"],
-  "mappings": "AAAA,OAAS,OAAAA,EAAK,QAAAC,EAAM,cAAAC,MAAkB,MAE/B,IAAMC,EAAN,cAA6BD,CAAW,CAO7C,QAAS,CACP,OAAOD,sCACT,CACF,EAVaE,EACJ,OAASH;AAAA;AAAA;AAAA;AAAA;",
-  "names": ["css", "html", "LitElement", "WCheckboxGroup"]
-}

package/dist/packages/rip-and-tear-checkbox/checkbox.d.ts

@@ -1,66 +0,0 @@
-import type { PropertyValues } from 'lit';
-import { BaseFormAssociatedElement } from '../rip-and-tear-radio/form-associated-element';
-import '@warp-ds/icons/elements/check-16';
-export declare class WCheckbox extends BaseFormAssociatedElement {
-    static css: import("lit").CSSResult[];
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    static get validators(): import("../rip-and-tear-radio/form-associated-element").Validator<BaseFormAssociatedElement>[];
-    private readonly hasSlotController;
-    input: HTMLInputElement;
-    title: string;
-    /** The name of the checkbox, submitted as a name/value pair with form data. */
-    name: string;
-    private _value;
-    /** The value of the checkbox, submitted as a name/value pair with form data. */
-    get value(): string | null;
-    set value(val: string | null);
-    /** The checkbox's size. */
-    size: 'small' | 'medium' | 'large';
-    /** Disables the checkbox. */
-    disabled: boolean;
-    /**
-     * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-     * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
-     */
-    indeterminate: boolean;
-    /** Draws the checkbox in a checked state. */
-    checked: boolean;
-    /** The default value of the form control. Primarily used for resetting the form control. */
-    defaultChecked: boolean;
-    /**
-     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-     * the same document or shadow root for this to work.
-     */
-    form: any;
-    /** Makes the checkbox a required field. */
-    required: boolean;
-    /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
-    hint: string;
-    connectedCallback(): void;
-    private setInitialAttributes;
-    private handleClick;
-    handleDefaultCheckedChange(): void;
-    handleValueOrCheckedChange(): void;
-    handleStateChange(): void;
-    handleDisabledChange(): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
-    formResetCallback(): void;
-    /** Simulates a click on the checkbox. */
-    click(): void;
-    /** Sets focus on the checkbox. */
-    focus(options?: FocusOptions): void;
-    /** Removes focus from the checkbox. */
-    blur(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'w-checkbox': WCheckbox;
-    }
-}