dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
97 lines (96 loc) • 4.57 kB
TypeScript
import { PopupPlacement } from '../../../common/types';
import { GenericFormElement } from '../../../internal/mixin/genericFormElement';
import { default as DapDSFeedback } from '../../feedback/feedback.component';
import { default as DapDSIcon } from '../../icon/icon.component';
import { default as DapDSIconButton } from '../../icon-button/icon-button.component';
import { default as DapDSTooltip } from '../../tooltip/tooltip.component';
import { default as DapDSTypography } from '../../typography/typography.component';
import { default as DapDSFormLabel } from '../form-label/form-label.component';
/**
* `dap-ds-radio-group`
* @summary A radio group is a form element that allows the user to select one option from a set.
* @element dap-ds-radio-group
* @title - Radio group
* @group radio-button
*
* @event dds-change - Fired when the radio group is checked.
* @event dds-blur - Emitted when the radio group loses focus.
* @event dds-focus - Emitted when the radio group gains focus.
*
* @property {string} name - The name of the radio group.
* @property {string} value - The value of the radio group.
* @property {boolean} disabled - Whether the radio group is disabled.
* @property {boolean} required - Whether the radio group is required.
* @property {string} label - The label of the radio group.
* @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
* @property {string} description - The description of the radio group.
* @property {string} tooltip - The tooltip of the radio group.
* @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the radio group.
* @property {string} feedback - The feedback of the radio group.
* @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the radio group. Can be `negative`, `positive`, or `warning`.
* @property {boolean} optional - The optional state of the radio group.
* @property {string} optionalLabel - Text of optional label.
* @property {string} requiredLabel - Text of required indicator. (default: '*')
* @property {boolean} subtle - The weight of the label. Default is `false`
* @property {'xs' | 'sm' | 'lg'} size - The size of the radio group. Default is `sm`.
* @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.
*
* @slot - The content of the radio group.
* @slot feedback-icon - The custom icon of the feedback.
*
* @csspart base - The main radio group container.
* @csspart label - The label of the radio group.
* @csspart tooltip - The tooltip of the radio group.
* @csspart container - The container of the radio group items.
*/
export default class DapDSRadioGroup extends GenericFormElement {
static tagName: string;
static dependencies: {
'dap-ds-form-label': typeof DapDSFormLabel;
'dap-ds-tooltip': typeof DapDSTooltip;
'dap-ds-icon-button': typeof DapDSIconButton;
'dap-ds-icon': typeof DapDSIcon;
'dap-ds-typography': typeof DapDSTypography;
'dap-ds-feedback': typeof DapDSFeedback;
};
/** The placement of the tooltip.
* @type { 'top' | 'right' | 'bottom' | 'left' }
*/
tooltipPlacement: PopupPlacement;
hiddenInput: HTMLInputElement;
optionalLabel: string;
private _previousValue?;
static readonly styles: import('lit').CSSResult;
/** A radio value may be `false` or `0`, so emptiness is not the same as falsiness. */
private get hasValue();
willUpdate(changedProperties: Map<string, unknown>): void;
updated(changedProperties: Map<string, unknown>): void;
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
private _handleSlotChange;
private getAllRadios;
private updateRadioStates;
private syncRadioElements;
private handleRadioClick;
private handleKeyDown;
setValidity(): void;
get validationMessage(): string;
checkValidity(): boolean;
get validity(): {
valid: boolean;
valueMissing: boolean;
badInput: boolean;
customError: boolean;
patternMismatch: boolean;
rangeOverflow: boolean;
rangeUnderflow: boolean;
stepMismatch: boolean;
tooLong: boolean;
tooShort: boolean;
typeMismatch: boolean;
};
reportValidity(): boolean;
handleLabelClick(): void;
handleInvalid(event: Event): void;
render(): import('lit-html').TemplateResult;
private _renderFeedback;
}