@synergy-design-system/angular/components/radio-group/index.d.ts

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynRadioGroup, SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
export { SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';

/**
 * @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.
 */
declare class SynRadioGroupComponent {
    nativeElement: SynRadioGroup;
    private _ngZone;
    private modelSignal;
    constructor(e: ElementRef, ngZone: NgZone);
    /**
     * The event that will trigger the ngModel update.
     * By default, this is set to "syn-input".
     */
    set ngModelUpdateOn(v: keyof HTMLElementEventMap);
    get ngModelUpdateOn(): keyof HTMLElementEventMap;
    /**
  * The radio group's label.
  * Required for proper accessibility.
  * If you need to display HTML, use the `label` slot
  instead.
   */
    set label(v: SynRadioGroup['label']);
    get label(): SynRadioGroup['label'];
    /**
     * The radio groups's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    set helpText(v: SynRadioGroup['helpText']);
    get helpText(): SynRadioGroup['helpText'];
    /**
     * The name of the radio group, submitted as a name/value pair with form data.
     */
    set name(v: SynRadioGroup['name']);
    get name(): SynRadioGroup['name'];
    /**
     * The current value of the radio group, submitted as a name/value pair with form data.
     */
    set value(v: SynRadioGroup['value']);
    get value(): SynRadioGroup['value'];
    /**
     * The radio group's size.
     * This size will be applied to all child radios and radio buttons.
     */
    set size(v: SynRadioGroup['size']);
    get 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.
   */
    set form(v: SynRadioGroup['form']);
    get form(): SynRadioGroup['form'];
    /**
     * Ensures a child radio is checked before allowing the containing form to submit.
     */
    set required(v: '' | SynRadioGroup['required']);
    get required(): SynRadioGroup['required'];
    /**
     * Emitted when the radio group's selected value changes.
     */
    synChangeEvent: EventEmitter<SynChangeEvent>;
    /**
     * Emitted when the radio group receives user input.
     */
    synInputEvent: EventEmitter<SynInputEvent>;
    /**
     * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
     */
    synInvalidEvent: EventEmitter<SynInvalidEvent>;
    /**
     * Support for two way data binding
     */
    valueChange: EventEmitter<string | number>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynRadioGroupComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynRadioGroupComponent, "syn-radio-group", never, { "ngModelUpdateOn": { "alias": "ngModelUpdateOn"; "required": false; }; "label": { "alias": "label"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "form": { "alias": "form"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "synChangeEvent": "synChangeEvent"; "synInputEvent": "synInputEvent"; "synInvalidEvent": "synInvalidEvent"; "valueChange": "valueChange"; }, never, ["*"], true, never>;
}

export { SynRadioGroupComponent };