@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/packages/components/components/syn-radio-group/component.ts

@@ -1,440 +0,0 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable no-param-reassign */
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import type { CSSResultGroup } from 'lit';
-import {
-  FormControlController,
-  customErrorValidityState,
-  validValidityState,
-  valueMissingValidityState,
-} from '../../internal/form.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import formControlStyles from '../../styles/form-control.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import SynButtonGroup from '../button-group/button-group.component.js';
-import styles from './radio-group.styles.js';
-import type { SynergyFormControl } from '../../internal/synergy-element.js';
-import type SynRadio from '../radio/radio.js';
-import type SynRadioButton from '../radio-button/radio-button.js';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-button-group
- *
- * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
- * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
- *  attribute.
- * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
- *
- * @event syn-change - Emitted when the radio group's selected value changes.
- * @event syn-input - Emitted when the radio group receives user input.
- * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- *
- * @csspart form-control - The form control that wraps the label, input, and help text.
- * @csspart form-control-label - The label's wrapper.
- * @csspart form-control-input - The input's wrapper.
- * @csspart form-control-help-text - The help text's wrapper.
- * @csspart button-group - The button group that wraps radio buttons.
- * @csspart button-group__base - The button group's `base` part.
- */
-@enableDefaultSettings('SynRadioGroup')
-export default class SynRadioGroup extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
-
-  static dependencies = { 'syn-button-group': SynButtonGroup };
-
-  protected readonly formControlController = new FormControlController(this);
-
-  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
-
-  private customValidityMessage = '';
-
-  private validationTimeout: number;
-
-  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
-
-  @query('.radio-group__validation-input') validationInput: HTMLInputElement;
-
-  @state() private hasButtonGroup = false;
-
-  @state() private errorMessage = '';
-
-  @state() defaultValue: string | number = '';
-
-  /**
-   * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-   * instead.
-   */
-  @property() label = '';
-
-  /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
-
-  /** The name of the radio group, submitted as a name/value pair with form data. */
-  @property() name = 'option';
-
-  /** The current value of the radio group, submitted as a name/value pair with form data. */
-  @property({ reflect: true }) value: string | number = '';
-
-  /** The radio group's size. This size will be applied to all child radios and radio buttons. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  /**
-   * 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.
-   */
-  @property({ reflect: true }) form = '';
-
-  /** Ensures a child radio is checked before allowing the containing form to submit. */
-  @property({ reflect: true, type: Boolean }) required = false;
-
-  /** Gets the validity state object */
-  get validity() {
-    const isRequiredAndEmpty = this.required && !this.value;
-    const hasCustomValidityMessage = this.customValidityMessage !== '';
-
-    if (hasCustomValidityMessage) {
-      return customErrorValidityState;
-    }
-
-    if (isRequiredAndEmpty) {
-      return valueMissingValidityState;
-    }
-
-    return validValidityState;
-  }
-
-  /** Gets the validation message */
-  get validationMessage() {
-    const isRequiredAndEmpty = this.required && !this.value;
-    const hasCustomValidityMessage = this.customValidityMessage !== '';
-
-    if (hasCustomValidityMessage) {
-      return this.customValidityMessage;
-    }
-
-    if (isRequiredAndEmpty) {
-      return this.validationInput.validationMessage;
-    }
-
-    return '';
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.defaultValue = this.value;
-  }
-
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
-
-  private getAllRadios() {
-    return [...this.querySelectorAll<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')];
-  }
-
-  private handleRadioClick(event: MouseEvent) {
-    const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;
-    const radios = this.getAllRadios();
-    const oldValue = this.value;
-
-    // #1174: If we have a radio, also do nothing if the radio is readonly
-    if (!target || target.disabled || (target as SynRadio).readonly) {
-      return;
-    }
-
-    this.value = target.value;
-    radios.forEach(radio => {
-      radio.checked = radio === target;
-    });
-
-    if (this.value !== oldValue) {
-      this.emit('syn-change');
-      this.emit('syn-input');
-    }
-  }
-
-  private handleKeyDown(event: KeyboardEvent) {
-    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
-      return;
-    }
-
-    // #1174: Filter out elements that are either disabled or readonly
-    const availableRadios = this.getAllRadios().filter(radio => (!radio.disabled && !(radio as SynRadio).readonly));
-    const checkedRadio = availableRadios.find(radio => radio.checked) ?? availableRadios[0];
-
-    // eslint-disable-next-line no-nested-ternary
-    const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-    const oldValue = this.value;
-    let index = availableRadios.indexOf(checkedRadio) + incr;
-
-    if (index < 0) {
-      index = availableRadios.length - 1;
-    }
-
-    if (index > availableRadios.length - 1) {
-      index = 0;
-    }
-
-    const allRadios = this.getAllRadios();
-
-    allRadios.forEach(radio => {
-      radio.checked = false;
-
-      if (!this.hasButtonGroup) {
-        radio.setAttribute('tabindex', '-1');
-      }
-    });
-
-    // #1175: If all radios are readonly, skip and focus the first one and do not change the value
-    if (!availableRadios[index]) {
-      return;
-    }
-
-    this.value = availableRadios[index].value;
-    availableRadios[index].checked = true;
-
-    if (!this.hasButtonGroup) {
-      availableRadios[index].setAttribute('tabindex', '0');
-      availableRadios[index].focus();
-    } else {
-      availableRadios[index].shadowRoot!.querySelector('button')!.focus();
-    }
-
-    if (this.value !== oldValue) {
-      this.emit('syn-change');
-      this.emit('syn-input');
-    }
-
-    event.preventDefault();
-  }
-
-  private handleLabelClick() {
-    this.focus();
-  }
-
-  private handleInvalid(event: Event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-
-  private async syncRadioElements() {
-    const radios = this.getAllRadios();
-
-    await Promise.all(
-      // Sync the checked state and size
-      radios.map(async radio => {
-        await radio.updateComplete;
-        radio.checked = radio.value === this.value;
-        radio.size = this.size;
-      }),
-    );
-
-    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'syn-radio-button');
-
-    if (radios.length > 0 && !radios.some(radio => radio.checked)) {
-      if (this.hasButtonGroup) {
-        const buttonRadio = radios[0].shadowRoot?.querySelector('button');
-
-        if (buttonRadio) {
-          buttonRadio.setAttribute('tabindex', '0');
-        }
-      } else {
-        radios[0].setAttribute('tabindex', '0');
-      }
-    }
-
-    if (this.hasButtonGroup) {
-      const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');
-
-      if (buttonGroup) {
-        buttonGroup.disableRole = true;
-      }
-    }
-  }
-
-  private syncRadios() {
-    if (customElements.get('syn-radio') && customElements.get('syn-radio-button')) {
-      this.syncRadioElements();
-      return;
-    }
-
-    if (customElements.get('syn-radio')) {
-      this.syncRadioElements();
-    } else {
-      customElements.whenDefined('syn-radio').then(() => this.syncRadios());
-    }
-
-    if (customElements.get('syn-radio-button')) {
-      this.syncRadioElements();
-    } else {
-      // Rerun this handler when <syn-radio> or <syn-radio-button> is registered
-      customElements.whenDefined('syn-radio-button').then(() => this.syncRadios());
-    }
-  }
-
-  private updateCheckedRadio() {
-    const radios = this.getAllRadios();
-    radios.forEach(radio => {
-      radio.checked = radio.value === this.value;
-    });
-    this.formControlController.setValidity(this.validity.valid);
-  }
-
-  @watch('size', { waitUntilFirstUpdate: true })
-  handleSizeChange() {
-    this.syncRadios();
-  }
-
-  @watch('value')
-  handleValueChange() {
-    if (this.hasUpdated) {
-      this.updateCheckedRadio();
-    }
-  }
-
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    const isRequiredAndEmpty = this.required && !this.value;
-    const hasCustomValidityMessage = this.customValidityMessage !== '';
-
-    if (isRequiredAndEmpty || hasCustomValidityMessage) {
-      this.formControlController.emitInvalidEvent();
-      return false;
-    }
-
-    return true;
-  }
-
-  /** Gets the associated form, if one exists. */
-  getForm(): HTMLFormElement | null {
-    return this.formControlController.getForm();
-  }
-
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): boolean {
-    const isValid = this.validity.valid;
-
-    this.errorMessage = this.customValidityMessage || isValid ? '' : this.validationInput.validationMessage;
-    this.formControlController.setValidity(isValid);
-    this.validationInput.hidden = true;
-    clearTimeout(this.validationTimeout);
-
-    if (!isValid) {
-      // Show the browser's constraint validation message
-      this.validationInput.hidden = false;
-      this.validationInput.reportValidity();
-      this.validationTimeout = setTimeout(() => {
-        this.validationInput.hidden = true;
-      }, 10000) as unknown as number;
-    }
-
-    return isValid;
-  }
-
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message = '') {
-    this.customValidityMessage = message;
-    this.errorMessage = message;
-    this.validationInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-
-  /** Sets focus on the radio-group. */
-  public focus(options?: FocusOptions) {
-    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 is not disabled
-    if (radioToFocus) {
-      radioToFocus.focus(options);
-    }
-  }
-
-  render() {
-    /* eslint-disable @typescript-eslint/unbound-method */
-    const hasLabelSlot = this.hasSlotController.test('label');
-    const hasHelpTextSlot = this.hasSlotController.test('help-text');
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    const defaultSlot = html`
-      <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
-    `;
-
-    return html`
-      <fieldset
-        part="form-control"
-        class=${classMap({
-          'form-control': true,
-          'form-control--has-help-text': hasHelpText,
-          'form-control--has-label': hasLabel,
-          'form-control--large': this.size === 'large',
-          'form-control--medium': this.size === 'medium',
-          'form-control--radio-group': true,
-          'form-control--small': this.size === 'small',
-        })}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="help-text"
-        aria-errormessage="error-message"
-      >
-        <label
-          part="form-control-label"
-          id="label"
-          class="form-control__label"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-          @click=${this.handleLabelClick}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <div part="form-control-input" class="form-control-input">
-          <div class="visually-hidden">
-            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
-            <label class="radio-group__validation">
-              <input
-                type="text"
-                class="radio-group__validation-input"
-                ?required=${this.required}
-                tabindex="-1"
-                hidden
-                @invalid=${this.handleInvalid}
-              />
-            </label>
-          </div>
-
-          ${this.hasButtonGroup
-            ? html`
-                <syn-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
-                  ${defaultSlot}
-                </syn-button-group>
-              `
-            : defaultSlot}
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${hasHelpText ? 'false' : 'true'}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </fieldset>
-    `;
-    /* eslint-enable @typescript-eslint/unbound-method */
-  }
-}

package/metadata/packages/components/components/syn-radio-group/component.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-// ---------------------------------------------------------------------
-// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
-// Please do not edit this file directly!
-// It will get recreated when running pnpm build.
-// ---------------------------------------------------------------------
-
-/**
- * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-button-group
- *
- * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
- * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
- *  attribute.
- * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
- *
- * @event syn-change - Emitted when the radio group's selected value changes.
- * @event syn-input - Emitted when the radio group receives user input.
- * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- *
- * @csspart form-control - The form control that wraps the label, input, and help text.
- * @csspart form-control-label - The label's wrapper.
- * @csspart form-control-input - The input's wrapper.
- * @csspart form-control-help-text - The help text's wrapper.
- * @csspart button-group - The button group that wraps radio buttons.
- * @csspart button-group__base - The button group's `base` part.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/radio-group/radio-group.js';
-
-import type { SynChangeEvent } from '@synergy-design-system/components';
-import type { SynInputEvent } from '@synergy-design-system/components';
-import type { SynInvalidEvent } from '@synergy-design-system/components';
-import type { SynRadioGroup } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynRadioGroup>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* The radio group's label.
-* Required for proper accessibility.
-* If you need to display HTML, use the `label` slot
-instead.
- */
-  label?: SynRadioGroup['label'];
-
-  /**
-   * The radio groups's help text.
-   * If you need to display HTML, use the `help-text` slot instead.
-   */
-  helpText?: SynRadioGroup['helpText'];
-
-  /**
-   * The name of the radio group, submitted as a name/value pair with form data.
-   */
-  name?: SynRadioGroup['name'];
-
-  /**
-   * The current value of the radio group, submitted as a name/value pair with form data.
-   */
-  value?: SynRadioGroup['value'];
-
-  /**
-   * The radio group's size.
-   * This size will be applied to all child radios and radio buttons.
-   */
-  size?: SynRadioGroup['size'];
-
-  /**
-* 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?: SynRadioGroup['form'];
-
-  /**
-   * Ensures a child radio is checked before allowing the containing form to submit.
-   */
-  required?: SynRadioGroup['required'];
-
-  /**
-   * Support for two way data binding
-   */
-  modelValue?: SynRadioGroup['value'];
-}>();
-
-// Make sure prop binding only forwards the props that are actually there.
-// This is needed because :param="param" also adds an empty attribute
-// when using web-components, which breaks optional arguments like size in SynInput
-// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
-const visibleProps = computed(() =>
-  Object.fromEntries(
-    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
-  ),
-);
-
-// Map events
-defineEmits<{
-  /**
-   * Emitted when the radio group's selected value changes.
-   */
-  'syn-change': [e: SynChangeEvent];
-
-  /**
-   * Emitted when the radio group receives user input.
-   */
-  'syn-input': [e: SynInputEvent];
-
-  /**
-   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   */
-  'syn-invalid': [e: SynInvalidEvent];
-
-  /**
-   * Support for two way data binding
-   */
-  'update:modelValue': [newValue: SynRadioGroup['value']];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynChangeEvent } from '@synergy-design-system/components';
-export type { SynInputEvent } from '@synergy-design-system/components';
-export type { SynInvalidEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-radio-group
-    @syn-change="$emit('syn-change', $event)"
-    @syn-input="
-      $emit('update:modelValue', ($event.target as SynRadioGroup).value);
-      $emit('syn-input', $event);
-    "
-    @syn-invalid="$emit('syn-invalid', $event)"
-    :value="
-      typeof props.modelValue !== 'undefined'
-        ? props.modelValue
-        : typeof props.value !== 'undefined'
-          ? props.value
-          : undefined
-    "
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-radio-group>
-</template>