@synergy-design-system/metadata 1.0.0 → 3.0.0

package/data/layers/full/component/component:syn-radio-group/components/radio-group.component.ts

@@ -0,0 +1,440 @@
+/* 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/data/layers/full/component/component:syn-radio-group/components/radio-group.styles.ts

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  :host([data-user-invalid]) {
+    --syn-input-border-color: var(--syn-input-border-color-focus-error);
+    --syn-input-border-color-hover: var(--syn-input-border-color-focus-error);
+    --syn-color-primary-600: var(--syn-input-border-color-focus-error);
+    --syn-color-primary-900: var(--syn-color-error-900);
+    --syn-color-primary-950: var(--syn-color-error-950);
+    --syn-color-neutral-1000: var(--syn-input-border-color-focus-error);
+    --syn-interactive-emphasis-color: var(--syn-input-border-color-focus-error);
+    --syn-interactive-emphasis-color-hover: var(--syn-input-border-color-focus-error);
+    --syn-interactive-emphasis-color-active: var(--syn-input-border-color-focus-error);
+  }
+
+  .form-control {
+    border: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  .form-control__label {
+    padding: 0;
+  }
+
+  .radio-group--required .radio-group__label::after {
+    content: var(--syn-input-required-content);
+    margin-inline-start: var(--syn-input-required-content-offset);
+  }
+
+  .visually-hidden {
+    border: 0;
+    /* stylelint-disable-next-line property-no-deprecated */
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .form-control-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-x-small);
+  }
+
+  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
+    margin-top: var(--syn-spacing-x-small);
+  }
+`;

package/data/layers/full/component/component:syn-radio-group/components/radio-group.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import SynRadioGroup from './radio-group.component.js';
+
+export * from './radio-group.component.js';
+export default SynRadioGroup;
+
+SynRadioGroup.define('syn-radio-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-radio-group': SynRadioGroup;
+  }
+}

package/data/layers/full/component/component:syn-radio-group/react/SynRadioGroupJSXElement.ts

@@ -0,0 +1,8 @@
+export type SynRadioGroupJSXElement = SynCustomElement<
+  SynRadioGroup,
+  [
+    ['syn-change', SynChangeEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-invalid', SynInvalidEvent],
+  ]
+>;

package/data/layers/full/component/component:syn-radio-group/react/radio-group.ts

@@ -0,0 +1,56 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/radio-group/radio-group.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-radio-group';
+Component.define('syn-radio-group');
+
+/**
+ * @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.
+ */
+export const SynRadioGroup = createComponent({
+  displayName: 'SynRadioGroup',
+  elementClass: Component,
+  events: {
+    onSynChange: 'syn-change' as EventName<SynChangeEvent>,
+    onSynInput: 'syn-input' as EventName<SynInputEvent>,
+    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';