@warp-ds/elements 2.3.2 → 2.4.0-next.2

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

@@ -0,0 +1,9 @@
+import { WRadio } from './radio.js';
+import { WRadioGroup } from './radio-group.js';
+export declare const Radio: import("@lit/react").ReactWebComponent<WRadio, {}>;
+export declare const RadioGroup: import("@lit/react").ReactWebComponent<WRadioGroup, {
+    onInput: string;
+    oninput: string;
+    onChange: string;
+    onchange: string;
+}>;

package/dist/packages/radio/react.js

@@ -0,0 +1,22 @@
+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 Radio = createComponent({
+    tagName: 'w-radio',
+    elementClass: Component,
+    react: React,
+});
+export const RadioGroup = createComponent({
+    tagName: 'w-radio-group',
+    elementClass: Component,
+    react: React,
+    events: {
+        onInput: 'input',
+        oninput: 'input',
+        onChange: 'change',
+        onchange: 'change',
+    },
+});

package/dist/packages/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/radio/required-validator.js

@@ -0,0 +1,34 @@
+export const RequiredValidator = (options = {}) => {
+    let { validationElement, validationProperty } = options;
+    if (!validationElement) {
+        validationElement = Object.assign(document.createElement('input'), { required: true });
+    }
+    if (!validationProperty) {
+        validationProperty = 'value';
+    }
+    const obj = {
+        observedAttributes: ['required'],
+        message: validationElement.validationMessage, // @TODO: Add a translation.
+        checkValidity(element) {
+            const validity = {
+                message: '',
+                isValid: true,
+                invalidKeys: [],
+            };
+            const isRequired = element.required ?? element.hasAttribute('required');
+            // Always true if the element isn't required.
+            if (!isRequired) {
+                return validity;
+            }
+            const value = element[validationProperty];
+            const isEmpty = !value;
+            if (isEmpty) {
+                validity.message = typeof obj.message === 'function' ? obj.message(element) : obj.message || '';
+                validity.isValid = false;
+                validity.invalidKeys.push('valueMissing');
+            }
+            return validity;
+        },
+    };
+    return obj;
+};

package/dist/packages/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/radio/slot.js

@@ -0,0 +1,71 @@
+/** A reactive controller that determines when slots exist. */
+export class HasSlotController {
+    constructor(host, ...slotNames) {
+        this.slotNames = [];
+        this.handleSlotChange = (event) => {
+            const slot = event.target;
+            if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
+                this.host.requestUpdate();
+            }
+        };
+        (this.host = host).addController(this);
+        this.slotNames = slotNames;
+    }
+    hasDefaultSlot() {
+        return [...this.host.childNodes].some((node) => {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '') {
+                return true;
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                // Ignore visually hidden elements since they aren't rendered
+                if (tagName === 'w-visually-hidden') {
+                    return false;
+                }
+                // If it doesn't have a slot attribute, it's part of the default slot
+                if (!el.hasAttribute('slot')) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+    hasNamedSlot(name) {
+        return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+    }
+    test(slotName) {
+        return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+    }
+    hostConnected() {
+        this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);
+    }
+    hostDisconnected() {
+        this.host.shadowRoot?.removeEventListener('slotchange', this.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 function getInnerHTML(nodes, callback) {
+    let html = '';
+    for (const node of nodes) {
+        if (callback) {
+            const customHTML = callback(node);
+            if (customHTML !== undefined) {
+                html += customHTML;
+                continue;
+            }
+        }
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            html += node.outerHTML;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            html += node.textContent;
+        }
+    }
+    return html;
+}

package/dist/packages/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/radio/watch.js

@@ -0,0 +1,39 @@
+/**
+ * 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 function watch(propertyName, options) {
+    const resolvedOptions = {
+        waitUntilFirstUpdate: false,
+        ...options,
+    };
+    return (proto, decoratedFnName) => {
+        // @ts-expect-error - update is a protected property
+        const { update } = proto;
+        const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+        // @ts-expect-error - update is a protected property
+        proto.update = function (changedProps) {
+            watchedProperties.forEach((property) => {
+                const key = property;
+                if (changedProps.has(key)) {
+                    const oldValue = changedProps.get(key);
+                    const newValue = this[key];
+                    if (oldValue !== newValue) {
+                        if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                            this[decoratedFnName](oldValue, newValue);
+                        }
+                    }
+                }
+            });
+            update.call(this, changedProps);
+        };
+    };
+}

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/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/slider/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.overlap\":[\"Maksimumværdien må ikke være mindre end minimumværdien\"],\"slider.error.required\":[\"Dette felt er påkrævet\"],\"slider.error.out_of_bounds\":[\"Værdien skal være mellem \",[\"min\"],\" og \",[\"max\"]]}");

package/dist/packages/slider/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/slider/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.overlap\":[\"The maximum value cannot be less than the minimum\"],\"slider.error.required\":[\"This field is required\"],\"slider.error.out_of_bounds\":[\"Value must be between \",[\"min\"],\" and \",[\"max\"]]}");

package/dist/packages/slider/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/slider/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.overlap\":[\"Maksimiarvo ei voi olla pienempi kuin minimiarvo\"],\"slider.error.required\":[\"Tämä kenttä on pakollinen\"],\"slider.error.out_of_bounds\":[\"Arvon on oltava välillä \",[\"min\"],\" - \",[\"max\"]]}");

package/dist/packages/slider/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/slider/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.overlap\":[\"Maksimumsverdien kan ikke være mindre enn minimumsverdien\"],\"slider.error.required\":[\"Dette feltet er påkrevd\"],\"slider.error.out_of_bounds\":[\"Verdien må være mellom \",[\"min\"],\" og \",[\"max\"]]}");

package/dist/packages/slider/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/slider/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.overlap\":[\"Maxvärdet kan inte vara mindre än minimivärdet\"],\"slider.error.required\":[\"Detta fält är obligatoriskt\"],\"slider.error.out_of_bounds\":[\"Värdet måste vara mellan \",[\"min\"],\" och \",[\"max\"]]}");

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.js';
+import { WarpSliderThumb } from './slider-thumb.js';
+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,63 @@
+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;
+    invalid: boolean;
+    /** Set by `<w-slider>` */
+    allowValuesOutsideRange: 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;
+    /** JS hook to help you format the numeric value how you want. */
+    formatter: (value: string, type: 'from' | 'to') => string;
+    range: HTMLInputElement;
+    textfield: WarpTextField;
+    /** @internal */
+    _showTooltip: boolean;
+    /** @internal */
+    _inputHasFocus: boolean;
+    resetFormControl(): void;
+    /**
+     * Reference to the anchor positioning style element used by the polyfill.
+     * @internal
+     */
+    anchorPositioningStyleElement: HTMLStyleElement | null;
+    updateFieldAfterValidation(): Promise<void>;
+    connectedCallback(): Promise<void>;
+    get boundaryValue(): string;
+    /** Value to display in the textfield (shows boundary when focused on empty value) */
+    get textFieldDisplayValue(): string;
+    /** Value to display in the tooltip */
+    get tooltipDisplayValue(): string | number;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpSliderThumb };