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

package/dist/packages/radio/radio-group.js

@@ -1,342 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { BaseFormAssociatedElement } from './form-associated-element';
-import { uniqueId } from './math';
-import './radio';
-// eslint-disable-next-line
-// @ts-ignore
-import { styles } from './radio-group-styles';
-import { RequiredValidator } from './required-validator';
-import { HasSlotController } from './slot';
-/**
- * @slot label - Alternative to the `label` attribute should you need custom HTML.
- */
-export class WRadioGroup extends BaseFormAssociatedElement {
-    static { this.css = [styles]; }
-    static get validators() {
-        const validators = [
-            RequiredValidator({
-                validationElement: Object.assign(document.createElement('input'), {
-                    required: true,
-                    type: 'radio',
-                    // we need an id that's guaranteed to be unique; users will never see this
-                    name: uniqueId('__w-radio'),
-                }),
-            }),
-        ];
-        return [...super.validators, ...validators];
-    }
-    get value() {
-        if (this.valueHasChanged) {
-            return this._value;
-        }
-        return this._value ?? this.defaultValue;
-    }
-    /** The current value of the radio group, submitted as a name/value pair with form data. */
-    set value(val) {
-        if (typeof val === 'number')
-            val = String(val);
-        this.valueHasChanged = true;
-        this._value = val;
-    }
-    //
-    // We need this because if we don't have it, FormValidation yells at us that it's "not focusable".
-    //   If we use `this.tabIndex = -1` we can't focus the radio inside.
-    //
-    static { this.shadowRootOptions = { ...BaseFormAssociatedElement.shadowRootOptions, delegatesFocus: true }; }
-    constructor() {
-        super();
-        this.hasSlotController = new HasSlotController(this, 'hint', 'label');
-        this.hasRadioButtons = false;
-        /**
-         * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-         * instead.
-         */
-        this.label = '';
-        /** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
-        this.hint = '';
-        /** The name of the radio group, submitted as a name/value pair with form data. */
-        this.name = null;
-        /** Disables the radio group and all child radios. */
-        this.disabled = false;
-        /** The orientation in which to show radio items. */
-        this.orientation = 'vertical';
-        this._value = null;
-        /** The default value of the form control. Primarily used for resetting the form control. */
-        this.defaultValue = this.getAttribute('value') || null;
-        /** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
-        this.size = 'medium';
-        /** Ensures a child radio is checked before allowing the containing form to submit. */
-        this.required = false;
-        /**
-         * Used for SSR. if true, will show slotted label on initial render.
-         */
-        this.withLabel = false;
-        /**
-         * Used for SSR. if true, will show slotted hint on initial render.
-         */
-        this.withHint = false;
-        this.handleRadioClick = (e) => {
-            const clickedRadio = e.target.closest('w-radio');
-            /* eslint-disable */
-            if (!clickedRadio || clickedRadio.disabled || clickedRadio.forceDisabled || this.disabled) {
-                return;
-            }
-            const oldValue = this.value;
-            this.value = clickedRadio.value;
-            clickedRadio.checked = true;
-            const radios = this.getAllRadios();
-            for (const radio of radios) {
-                if (clickedRadio === radio) {
-                    continue;
-                }
-                radio.checked = false;
-                radio.setAttribute('tabindex', '-1');
-            }
-            if (this.value !== oldValue) {
-                this.updateComplete.then(() => {
-                    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-                    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-                });
-            }
-        };
-        this.addEventListener('keydown', this.handleKeyDown);
-        this.addEventListener('click', this.handleRadioClick);
-    }
-    /**
-     * 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() {
-        const radio = this.querySelector(':is(w-radio):not([disabled])');
-        if (!radio)
-            return undefined;
-        return radio;
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('disabled') || changedProperties.has('value')) {
-            this.syncRadioElements();
-        }
-    }
-    formResetCallback(...args) {
-        this.value = this.defaultValue;
-        super.formResetCallback(...args);
-        this.syncRadioElements();
-    }
-    getAllRadios() {
-        return [...this.querySelectorAll('w-radio')];
-    }
-    handleLabelClick() {
-        this.focus();
-    }
-    async syncRadioElements() {
-        const radios = this.getAllRadios();
-        let hasRadioButtons = false;
-        // Add data attributes to support styling
-        radios.forEach((radio, index) => {
-            if (radio.appearance === 'button')
-                hasRadioButtons = true;
-            radio.setAttribute('size', this.size);
-            radio.toggleAttribute('data-w-radio-horizontal', this.orientation !== 'vertical');
-            radio.toggleAttribute('data-w-radio-vertical', this.orientation === 'vertical');
-            radio.toggleAttribute('data-w-radio-first', index === 0);
-            radio.toggleAttribute('data-w-radio-inner', index !== 0 && index !== radios.length - 1);
-            radio.toggleAttribute('data-w-radio-last', index === radios.length - 1);
-            // Set forceDisabled state based on radio group's disabled state
-            radio.forceDisabled = this.disabled;
-        });
-        // If at least one radio button exists, we assume it's a radio button group
-        this.hasRadioButtons = hasRadioButtons;
-        await Promise.all(radios.map(async (radio) => {
-            await radio.updateComplete;
-            if (!radio.disabled && radio.value === this.value) {
-                radio.checked = true;
-            }
-            else {
-                radio.checked = false;
-            }
-        }));
-        // Manage tabIndex based on disabled state and checked status
-        if (this.disabled) {
-            // If radio group is disabled, all radios should not be tabbable
-            radios.forEach((radio) => {
-                radio.tabIndex = -1;
-            });
-        }
-        else {
-            // Normal tabbing behavior
-            const enabledRadios = radios.filter((radio) => !radio.disabled);
-            const checkedRadio = enabledRadios.find((radio) => radio.checked);
-            if (enabledRadios.length > 0) {
-                if (checkedRadio) {
-                    // If there's a checked radio, it should be tabbable
-                    enabledRadios.forEach((radio) => {
-                        radio.tabIndex = radio.checked ? 0 : -1;
-                    });
-                }
-                else {
-                    // If no radio is checked, first enabled radio should be tabbable
-                    enabledRadios.forEach((radio, index) => {
-                        radio.tabIndex = index === 0 ? 0 : -1;
-                    });
-                }
-            }
-            // Disabled radios should never be tabbable
-            radios
-                .filter((radio) => radio.disabled)
-                .forEach((radio) => {
-                radio.tabIndex = -1;
-            });
-        }
-    }
-    handleKeyDown(event) {
-        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key) || this.disabled) {
-            return;
-        }
-        const radios = this.getAllRadios().filter((radio) => !radio.disabled);
-        if (radios.length <= 0) {
-            return;
-        }
-        event.preventDefault();
-        const oldValue = this.value;
-        const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];
-        const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-        let index = radios.indexOf(checkedRadio) + incr;
-        if (!index)
-            index = 0;
-        if (index < 0) {
-            index = radios.length - 1;
-        }
-        if (index > radios.length - 1) {
-            index = 0;
-        }
-        const hasRadioButtons = radios.some((radio) => radio.tagName.toLowerCase() === 'w-radio-button');
-        this.getAllRadios().forEach((radio) => {
-            radio.checked = false;
-            if (!hasRadioButtons) {
-                radio.setAttribute('tabindex', '-1');
-            }
-        });
-        this.value = radios[index].value;
-        radios[index].checked = true;
-        if (!hasRadioButtons) {
-            radios[index].setAttribute('tabindex', '0');
-            radios[index].focus();
-        }
-        else {
-            radios[index].shadowRoot?.querySelector('button')?.focus();
-        }
-        if (this.value !== oldValue) {
-            this.updateComplete.then(() => {
-                this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            });
-        }
-        event.preventDefault();
-    }
-    /** Sets focus on the radio group. */
-    focus(options) {
-        if (this.disabled)
-            return;
-        const radios = this.getAllRadios();
-        const checked = radios.find((radio) => radio.checked);
-        const firstEnabledRadio = radios.find((radio) => !radio.disabled);
-        const radioToFocus = checked || firstEnabledRadio;
-        // Call focus for the checked radio. If no radio is checked, focus the first one that isn't disabled.
-        if (radioToFocus) {
-            radioToFocus.focus(options);
-        }
-    }
-    render() {
-        const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test('label') : this.withLabel;
-        const hasHintSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHint;
-        const hasLabel = this.label ? true : !!hasLabelSlot;
-        const hasHint = this.hint ? true : !!hasHintSlot;
-        return html `
-      <fieldset
-        part="form-control"
-        class=${classMap({
-            'form-control': true,
-            'form-control-radio-group': true,
-            'form-control-has-label': hasLabel,
-            'has-radio-buttons': this.hasRadioButtons,
-        })}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="hint"
-        aria-errormessage="error-message"
-        aria-orientation=${this.orientation}>
-        <label
-          part="form-control-label"
-          id="label"
-          class="label"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-          @click=${this.handleLabelClick}>
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <slot part="form-control-input" @slotchange=${this.syncRadioElements}></slot>
-
-        <slot
-          id="hint"
-          name="hint"
-          part="hint"
-          class=${classMap({
-            'has-slotted': hasHint,
-        })}
-          aria-hidden=${hasHint ? 'false' : 'true'}
-          >${this.hint}</slot
-        >
-      </fieldset>
-    `;
-    }
-}
-__decorate([
-    state()
-], WRadioGroup.prototype, "hasRadioButtons", void 0);
-__decorate([
-    query('slot:not([name])')
-], WRadioGroup.prototype, "defaultSlot", void 0);
-__decorate([
-    property()
-], WRadioGroup.prototype, "label", void 0);
-__decorate([
-    property({ attribute: 'hint' })
-], WRadioGroup.prototype, "hint", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadioGroup.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WRadioGroup.prototype, "disabled", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadioGroup.prototype, "orientation", void 0);
-__decorate([
-    state()
-], WRadioGroup.prototype, "value", null);
-__decorate([
-    property({ attribute: 'value', reflect: true })
-], WRadioGroup.prototype, "defaultValue", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadioGroup.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WRadioGroup.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'with-label' })
-], WRadioGroup.prototype, "withLabel", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'with-hint' })
-], WRadioGroup.prototype, "withHint", void 0);
-if (!customElements.get('w-radio-group')) {
-    customElements.define('w-radio-group', WRadioGroup);
-}

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

@@ -1,38 +0,0 @@
-import type { PropertyValues } from 'lit';
-import { BaseFormAssociatedElement } from './form-associated-element';
-export declare class WRadio extends BaseFormAssociatedElement {
-    static css: import("lit").CSSResult[];
-    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/radio/radio.js

@@ -1,115 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { BaseFormAssociatedElement } from './form-associated-element';
-// eslint-disable-next-line
-// @ts-ignore
-import { toggleStyles } from '../toggle-styles';
-import { reset } from '../styles';
-export class WRadio extends BaseFormAssociatedElement {
-    static { this.css = [reset, toggleStyles]; }
-    constructor() {
-        super();
-        this.checked = false;
-        /** @internal Used by radio group to force disable radios while preserving their original disabled state. */
-        this.forceDisabled = false;
-        /**
-         * The string pointing to a form's id.
-         */
-        this.form = null;
-        /** The radio's value. When selected, the radio group will receive this value. */
-        this.appearance = 'default';
-        /**
-         * 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.
-         */
-        this.size = 'medium';
-        /** Disables the radio. */
-        this.disabled = false;
-        // Update the handleClick method (around line 75)
-        this.handleClick = () => {
-            if (!this.disabled && !this.forceDisabled) {
-                this.checked = true;
-            }
-        };
-        this.addEventListener('click', this.handleClick);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setInitialAttributes();
-    }
-    setInitialAttributes() {
-        this.setAttribute('role', 'radio');
-        this.tabIndex = 0;
-        this.setAttribute('aria-disabled', this.disabled || this.forceDisabled ? 'true' : 'false');
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('checked')) {
-            this.customStates.set('checked', this.checked);
-            this[this.checked ? 'setAttribute' : 'removeAttribute']('checked-ui', '');
-            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-            // Only set tabIndex if not disabled
-            if (!this.disabled && !this.forceDisabled) {
-                this.tabIndex = this.checked ? 0 : -1;
-            }
-        }
-        if (changedProperties.has('disabled') || changedProperties.has('forceDisabled')) {
-            const effectivelyDisabled = this.disabled || this.forceDisabled;
-            this.customStates.set('disabled', effectivelyDisabled);
-            this[effectivelyDisabled ? 'setAttribute' : 'removeAttribute']('disabled-ui', '');
-            this.setAttribute('aria-disabled', effectivelyDisabled ? 'true' : 'false');
-            // Set tabIndex based on disabled state
-            if (effectivelyDisabled) {
-                this.tabIndex = -1;
-            }
-            else {
-                // Restore proper tabIndex - this will be managed by the radio group
-                this.tabIndex = this.checked ? 0 : -1;
-            }
-        }
-    }
-    /**
-     * @override
-     */
-    setValue() {
-        // We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself.
-    }
-    render() {
-        return html `
-      <div class="wrapper">
-        <div part="control" class="control"></div>
-        <slot part="label" class="label"></slot>
-      </div>
-    `;
-    }
-}
-__decorate([
-    state()
-], WRadio.prototype, "checked", void 0);
-__decorate([
-    state()
-], WRadio.prototype, "forceDisabled", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadio.prototype, "form", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadio.prototype, "value", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadio.prototype, "appearance", void 0);
-__decorate([
-    property({ reflect: true })
-], WRadio.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean })
-], WRadio.prototype, "disabled", void 0);
-if (!customElements.get('w-radio')) {
-    customElements.define('w-radio', WRadio);
-}

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

@@ -1,9 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { Radio } from './react';
-declare const _default: {
-    title: string;
-    component: import("@lit/react").ReactWebComponent<import("./radio").WRadio, {}>;
-};
-export default _default;
-export type Story = StoryObj<typeof Radio>;
-export declare const Primary: Story;

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

@@ -1,10 +0,0 @@
-import { Radio } from './react';
-export default {
-    title: 'Forms/Radio',
-    component: Radio,
-};
-export const Primary = {
-    args: {
-        children: 'Hello',
-    },
-};

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

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WRadioGroup } from './radio-group.js';
-import './radio';
-import './radio-group';
-declare const args: Partial<WRadioGroup> & {
-    [key: string]: any;
-};
-declare const meta: Meta<typeof args>;
-export default meta;
-type Story = StoryObj<typeof args>;
-export declare const Default: Story;
-export declare const Disabled: Story;
-export declare const Required: Story;
-export declare const DisabledGroup: Story;
-export declare const DisabledRadio: Story;

package/dist/packages/radio/radio.stories.js

@@ -1,61 +0,0 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import './radio';
-import './radio-group';
-const { events: radioEvents, args: radioArgs, argTypes: radioArgTypes } = getStorybookHelpers('w-radio');
-const { events, args, argTypes } = getStorybookHelpers('w-radio-group');
-const meta = {
-    title: 'Forms/Radio',
-    render: (args) => {
-        return html `
-      <w-radio-group ${spread(prespread(args))}>
-        <w-radio value="foo">foo</w-radio>
-        <w-radio value="bar">bar</w-radio>
-      </w-radio-group>
-    `;
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        label: 'Group',
-        name: 'foobar',
-        value: 'foo',
-    },
-};
-export const Disabled = {
-    args: {
-        label: 'Disabled',
-        disabled: true,
-    },
-};
-export const Required = {
-    args: {},
-    render() {
-        return html `
-      <form>
-        <w-radio-group required>
-          <w-radio value="foo">foo</w-radio>
-          <w-radio value="bar">bar</w-radio>
-        </w-radio-group>
-        <button>click me</button>
-      </form>
-    `;
-    },
-};
-export const DisabledGroup = {
-    args: { disabled: true },
-};
-export const DisabledRadio = {
-    args: {},
-    render() {
-        return html `
-      <w-radio-group>
-        <w-radio value="foo" disabled appearance="button">disabled</w-radio>
-        <w-radio value="bar" appearance="clickable">not disabled</w-radio>
-      </w-radio-group>
-    `;
-    },
-};

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

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

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

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

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