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

package/dist/packages/rip-and-tear-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/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/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/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/rip-and-tear-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/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 {};