@warp-ds/elements 2.1.1 → 2.2.0-next.10

package/dist/packages/rip-and-tear-radio/invalid.d.ts

@@ -0,0 +1,8 @@
+export declare class WInvalidEvent extends Event {
+    constructor();
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'wa-invalid': WInvalidEvent;
+    }
+}

package/dist/packages/rip-and-tear-radio/math.d.ts

@@ -0,0 +1 @@
+export declare function uniqueId(prefix?: string): string;

package/dist/packages/rip-and-tear-radio/radio-group.d.ts

@@ -0,0 +1,72 @@
+import type { PropertyValues } from 'lit';
+import { BaseFormAssociatedElement } from './form-associated-element';
+import './radio';
+import type { WRadio } from './radio';
+/**
+ * @slot label - Alternative to the `label` attribute should you need custom HTML.
+ */
+export declare class WRadioGroup extends BaseFormAssociatedElement {
+    static css: any[];
+    static get validators(): import("./form-associated-element").Validator<BaseFormAssociatedElement>[];
+    private readonly hasSlotController;
+    hasRadioButtons: boolean;
+    defaultSlot: HTMLSlotElement;
+    /**
+     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+     * instead.
+     */
+    label: string;
+    /** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
+    hint: string;
+    /** The name of the radio group, submitted as a name/value pair with form data. */
+    name: string | null;
+    /** Disables the radio group and all child radios. */
+    disabled: boolean;
+    /** The orientation in which to show radio items. */
+    orientation: 'horizontal' | 'vertical';
+    private _value;
+    get value(): string | number | null;
+    /** The current value of the radio group, submitted as a name/value pair with form data. */
+    set value(val: string | number | null);
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string | null;
+    /** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
+    size: 'small' | 'medium' | 'large';
+    /** Ensures a child radio is checked before allowing the containing form to submit. */
+    required: boolean;
+    /**
+     * Used for SSR. if true, will show slotted label on initial render.
+     */
+    withLabel: boolean;
+    /**
+     * Used for SSR. if true, will show slotted hint on initial render.
+     */
+    withHint: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    constructor();
+    /**
+     * We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
+     * the first radio element.
+     */
+    get validationTarget(): WRadio;
+    updated(changedProperties: PropertyValues<this>): void;
+    formResetCallback(...args: Parameters<BaseFormAssociatedElement['formResetCallback']>): void;
+    private handleRadioClick;
+    private getAllRadios;
+    private handleLabelClick;
+    private syncRadioElements;
+    private handleKeyDown;
+    /** Sets focus on the radio group. */
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-radio-group': WRadioGroup;
+    }
+}

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

@@ -0,0 +1,38 @@
+import type { PropertyValues } from 'lit';
+import { BaseFormAssociatedElement } from './form-associated-element';
+export declare class WRadio extends BaseFormAssociatedElement {
+    static css: any[];
+    checked: boolean;
+    /** @internal Used by radio group to force disable radios while preserving their original disabled state. */
+    forceDisabled: boolean;
+    /**
+     * The string pointing to a form's id.
+     */
+    form: string | null;
+    /** The radio's value. When selected, the radio group will receive this value. */
+    value: string;
+    /** The radio's value. When selected, the radio group will receive this value. */
+    appearance: 'default' | 'button' | 'clickable';
+    /**
+     * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+     * attribute can typically be omitted.
+     */
+    size: 'small' | 'medium' | 'large';
+    /** Disables the radio. */
+    disabled: boolean;
+    constructor();
+    connectedCallback(): void;
+    private setInitialAttributes;
+    updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * @override
+     */
+    setValue(): void;
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-radio': WRadio;
+    }
+}

package/dist/packages/rip-and-tear-radio/required-validator.d.ts

@@ -0,0 +1,11 @@
+import type { Validator } from './form-associated-element';
+export interface RequiredValidatorOptions {
+    /** This is a cheap way for us to get translation strings for the user without having proper translations. */
+    validationElement?: HTMLSelectElement | HTMLInputElement;
+    /**
+     * The property to check if its not null-ish. For most elements this will be "value".
+     * For "checkbox" for example it will be "checked"
+     */
+    validationProperty?: string;
+}
+export declare const RequiredValidator: (options?: RequiredValidatorOptions) => Validator;

package/dist/packages/rip-and-tear-radio/slot.d.ts

@@ -0,0 +1,20 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** A reactive controller that determines when slots exist. */
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleSlotChange;
+}
+/**
+ * Given a list of nodes, this function iterates over all of them and returns the concatenated
+ * HTML as a string. This is useful for getting the HTML that corresponds to a slot’s assigned nodes (since we can't use slot.innerHTML as an alternative).
+ * @param nodes - The list of nodes to iterate over.
+ * @param callback - A function that can be used to customize the HTML output for specific types of nodes. If the function returns undefined, the default HTML output will be used.
+ */
+export declare function getInnerHTML(nodes: Iterable<Node>, callback?: (node: Node) => string | undefined): string;

package/dist/packages/rip-and-tear-radio/watch.d.ts

@@ -0,0 +1,26 @@
+import type { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

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

@@ -1,56 +1,67 @@
-declare const WarpSelect_base: {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/chevron-down-16';
+export declare const ccSelect: {
+    base: string;
+    default: string;
+    disabled: string;
+    invalid: string;
+    readOnly: string;
+    wrapper: string;
+    selectWrapper: string;
+    chevron: string;
+    chevronDisabled: string;
 };
-export class WarpSelect extends WarpSelect_base {
-    static properties: {
-        autoFocus: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        invalid: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        always: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        hint: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        label: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        optional: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        readOnly: {
-            type: BooleanConstructor;
-            relfect: boolean;
-        };
-        _options: {
-            state: boolean;
-        };
-    };
-    static styles: any[];
-    _options: any;
+export declare const ccLabel: {
+    base: string;
+    optional: string;
+};
+export declare const ccHelpText: {
+    base: string;
+    color: string;
+    colorInvalid: string;
+};
+declare const WarpSelect_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * A dropdown component for selecting a single value.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
+ */
+export declare class WarpSelect extends WarpSelect_base {
+    #private;
+    /** Whether the element should receive focus on render */
+    autoFocus: boolean;
+    /** Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error */
+    invalid: boolean;
+    /** Whether to always show a hint */
+    always: boolean;
+    /** The content displayed as the help text */
+    hint: string;
+    /** The content to disply as the label */
+    label: string;
+    /** Whether to show optional text */
+    optional: boolean;
+    /** Renders the field in a disabled state. */
+    disabled: boolean;
+    /** Renders the field in a readonly state. */
+    readOnly: boolean;
+    /** @internal */
+    _options: string;
+    name: string;
+    value: string;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    /** @internal */
+    _setValue: (value: string) => void;
     firstUpdated(): void;
-    handleKeyDown(event: any): void;
+    handleKeyDown(event: KeyboardEvent): void;
     onChange({ target }: {
         target: any;
     }): void;
     render(): import("lit").TemplateResult<1>;
-    #private;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-select': WarpSelect;
+    }
 }
 export {};