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

package/dist/packages/pageindicator/pageindicator.react.stories.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { PageIndicator } from './react';
+declare const _default: {
+    title: string;
+    render: ({ pageCount, selectedPage }: Omit<React.HTMLAttributes<import(".").WarpPageIndicator>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "selectedPage" | "pageCount"> & {} & Partial<Omit<import(".").WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<import(".").WarpPageIndicator>) => React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpPageIndicator, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof PageIndicator>;
+export declare const Default: {
+    args: {
+        pageCount: number;
+        selectedPage: number;
+    };
+};
+export declare const InsideContainer: () => React.JSX.Element;
+export declare const InsideContainer10Pages: () => React.JSX.Element;
+export declare const OutsideContainer: () => React.JSX.Element;

package/dist/packages/pageindicator/pageindicator.react.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PageIndicator } from './react';
+export default {
+    title: 'Navigation/PageIndicator',
+    render: ({ pageCount, selectedPage }) => React.createElement(PageIndicator, { pageCount: pageCount, selectedPage: selectedPage }),
+    component: PageIndicator,
+};
+export const Default = {
+    args: {
+        pageCount: 5,
+        selectedPage: 1,
+    },
+};
+export const InsideContainer = () => (React.createElement("div", { style: { display: 'grid', height: '60vh', border: '1px solid lightgrey' } },
+    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingBottom: '12px', alignSelf: 'end' } }, ' ')));
+export const InsideContainer10Pages = () => (React.createElement("div", { style: { display: 'grid', height: '60vh', border: '1px solid lightgrey' } },
+    React.createElement(PageIndicator, { pageCount: 10, selectedPage: 3, style: { paddingBottom: '12px', alignSelf: 'end' } }, ' ')));
+export const OutsideContainer = () => (React.createElement("div", { style: { height: '450px', border: '1px solid lightgrey' } },
+    React.createElement("div", { style: { height: '300px', borderBottom: '1px solid #e6e6e6' } }),
+    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingTop: '16px' } }, ' ')));

package/dist/packages/pageindicator/pageindicator.stories.d.ts

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

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

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

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

package/dist/packages/pageindicator/react.js

@@ -0,0 +1,11 @@
+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 PageIndicator = createComponent({
+    tagName: 'w-pageindicator',
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/pageindicator/style.d.ts

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

package/dist/packages/pageindicator/style.js

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

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

@@ -0,0 +1,66 @@
+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;
+    }
+}