dap-design-system/dist/components/radio-button/radio-button.component.d.ts

Official design system for the DÁP (dap.gov.hu)

import { PropertyValueMap } from 'lit';
import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement';
import { default as DapDSFeedback } from '../feedback/feedback.component';
import { default as DapDSFormLabel } from '../form/form-label/form-label.component';
import { default as DapDSTypography } from '../typography/typography.component';
/**
 * `dap-ds-radio-button`
 * @summary A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.
 * @element dap-ds-radio-button
 * @title - Radio button
 *
 * @event {{ checked: boolean, value: string, disabled: boolean, readonly: boolean, type: 'radio' }} dds-change - Fired when the radio button is checked.
 * @event {{ void }} dds-blur - Emitted when the radio button loses focus.
 * @event {{ void }} dds-focus - Emitted when the radio button gains focus.
 * @event {{ checked: boolean, value: string, disabled: boolean, readonly: boolean }} dds-input - Emitted when the radio button receives input.
 *
 * @property {string} name - The name of the radio button.
 * @property {string} value - The value of the radio button.
 * @property {boolean} checked - Whether the radio button is checked.
 * @property {string} label - The label of the radio button.
 * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
 * @property {string} description - The description of the radio button.
 * @property {boolean} disabled - Whether the radio button is disabled.
 * @property {boolean} readonly - Whether the radio button is readonly (cannot be changed but value is submitted with form).
 * @property {boolean} required - Whether the radio button is required.
 * @property {'xs' | 'sm' | 'lg'} size - The size of the radio button. Default is 'sm'.
 * @property {'left' | 'right'} labelPlacement - The placement of the label.
 * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.
 * @property {boolean} subtle - The weight of the label.
 * @property {string} feedback - The feedback of the radio button.
 * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the radio button.
 * @property {boolean} invalid - The invalid state of the radio button.
 * @property {boolean} optional - The optional state of the radio button.
 * @property {string} optionalLabel - The optional label of the radio button.
 * @property {string} requiredLabel - The required indicator of the radio button. (default: '*')
 * @property {boolean} preventDefault - Whether the radio button should prevent the default action.
 * @property {boolean} focusable - Whether the radio button is focusable.
 * @property {'normal' | 'background'} type - The type of the radio button.
 * @property {boolean} border - This sets up a border around the radio button, when true.
 *
 * @csspart base - The main radio button container.
 * @csspart wrapper - The wrapper of the radio button.
 * @csspart base-label - The main label container.
 * @csspart label - The label of the radio button.
 * @csspart input - The native input of the radio button.
 * @csspart control - The control of the radio button.
 * @csspart label-container - The label container of the radio button.
 * @csspart description - The description of the radio button.
 *
 * @cssproperty --dds-radio-size - Sets the size of the radio button. (default: var(--dds-spacing-600))
 * @cssproperty --dds-radio-border-width - Sets the border width of the radio button. (default: var(--dds-border-width-large))
 * @cssproperty --dds-radio-border-radius - Sets the border radius of the radio button. (default: var(--dds-radius-rounded))
 * @cssproperty --dds-radio-border-color - Sets the border color of the radio button. (default: var(--dds-border-neutral-base))
 * @cssproperty --dds-radio-background-color - Sets the background color of the radio button. (default: var(--dds-background-neutral-base))
 * @cssproperty --dds-radio-hover-border-color - Sets the border color of the radio button on hover. (default: var(--dds-border-neutral-medium))
 * @cssproperty --dds-radio-hover-background-color - Sets the background color of the radio button on hover. (default: var(--dds-background-neutral-medium))
 * @cssproperty --dds-radio-active-border-color - Sets the border color of the radio button when active. (default: var(--dds-border-neutral-strong))
 * @cssproperty --dds-radio-active-background-color - Sets the background color of the radio button when active. (default: var(--dds-background-neutral-strong))
 * @cssproperty --dds-radio-checked-background-color - Sets the background color of the checked radio button. (default: var(--dds-background-brand-base-inverted))
 * @cssproperty --dds-radio-checked-hover-background-color - Sets the background color of the checked radio button on hover. (default: var(--dds-background-brand-medium-inverted))
 * @cssproperty --dds-radio-checked-active-background-color - Sets the background color of the checked radio button when active. (default: var(--dds-background-brand-strong-inverted))
 * @cssproperty --dds-radio-disabled-background-color - Sets the background color of the disabled radio button. (default: var(--dds-background-neutral-disabled))
 * @cssproperty --dds-radio-icon-background-color - Sets the background color of the radio button icon. (default: var(--dds-transparent-white-strong-static))
 * @cssproperty --dds-radio-disabled-icon-background-color - Sets the background color of the disabled radio button icon. (default: var(--dds-background-neutral-stronger))
 * @cssproperty --dds-radio-invalid-border-color - Sets the border color of the invalid radio button. (default: var(--dds-border-negative-base))
 * @cssproperty --dds-radio-invalid-background-color - Sets the background color of the invalid radio button. (default: var(--dds-background-negative-base))
 * @cssproperty --dds-radio-invalid-hover-border-color - Sets the border color of the invalid radio button on hover. (default: var(--dds-border-negative-medium))
 * @cssproperty --dds-radio-invalid-hover-background-color - Sets the background color of the invalid radio button on hover. (default: var(--dds-background-negative-medium))
 * @cssproperty --dds-radio-invalid-active-border-color - Sets the border color of the invalid radio button when active. (default: var(--dds-border-negative-strong))
 * @cssproperty --dds-radio-invalid-active-background-color - Sets the background color of the invalid radio button when active. (default: var(--dds-background-negative-strong))
 * @cssproperty --dds-radio-invalid-checked-background-color - Sets the background color of the invalid checked radio button. (default: var(--dds-background-negative-base-inverted))
 * @cssproperty --dds-radio-invalid-checked-hover-background-color - Sets the background color of the invalid checked radio button on hover. (default: var(--dds-background-negative-medium-inverted))
 * @cssproperty --dds-radio-invalid-checked-active-background-color - Sets the background color of the invalid checked radio button when active. (default: var(--dds-background-negative-strong-inverted))
 * @cssproperty --dds-radio-icon-size - Sets the size of the radio button icon. (default: var(--dds-spacing-300))
 * @cssproperty --dds-radio-readonly-border-color - Sets the border color when the radio button is readonly. (default: var(--dds-border-neutral-subtle))
 * @cssproperty --dds-radio-readonly-background-color - Sets the background color when the radio button is readonly. (default: var(--dds-background-neutral-subtle))
 * @cssproperty --dds-radio-readonly-icon-color - Sets the color of the radio button icon when readonly. (default: var(--dds-text-neutral-base))
 */
export default class DapDSRadioButton extends LabeledChoiceElement {
    static tagName: string;
    static dependencies: {
        'dap-ds-form-label': typeof DapDSFormLabel;
        'dap-ds-typography': typeof DapDSTypography;
        'dap-ds-feedback': typeof DapDSFeedback;
    };
    private static nextId;
    private readonly inputId;
    private readonly labelId;
    private readonly descriptionId;
    private readonly input;
    /** Whether the radio button is focusable */
    focusable: boolean;
    /** Position in set — set by radio-group for correct screen reader counting */
    posInSet?: number;
    /** Set size — set by radio-group for correct screen reader counting */
    setSize?: number;
    /** Whether the radio button should prevent the default action */
    preventDefault: boolean;
    /** Whether the radio button is readonly */
    readonly: boolean;
    /** This sets up a border around the radio button, when true. */
    border: boolean;
    /** The type of the radio button
     * @type {'normal' | 'background'}
     */
    type: 'normal' | 'background';
    static readonly styles: import('lit').CSSResult;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    private _onHostKeydown;
    private _syncHostAria;
    /**
     * Handles click events on the radio button.
     * Manages the checked state and emits change events.
     * @private
     */
    private handleClick;
    formResetCallback(): void;
    /**
     * Handles input events on the radio button.
     * Emits the dds-input event with current radio button state.
     * @private
     */
    private handleInput;
    get focusElement(): HTMLInputElement;
    focus(): void;
    blur(): void;
    /**
     * Handles invalid events on the radio button input.
     * Prevents the default browser validation UI from showing and manages invalid state.
     * @param {Event} event - The invalid event
     * @private
     */
    handleInvalid(event: Event): void;
    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    render(): import('lit-html').TemplateResult;
}