@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
106 lines (105 loc) • 3.75 kB
TypeScript
import { ControlValueAccessor } from '@angular/forms';
import * as i0 from "@angular/core";
/** Possible radio button color variants */
export type RadioVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'info' | 'error' | null | undefined;
/** Possible radio button size variants */
export type RadioSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Configuration object for radio button styling */
export type RadioProps = {
variant?: RadioVariantProps;
size?: RadioSizeProps;
};
/**
* A customizable radio button component with form integration
*
* @remarks
* Implements ControlValueAccessor for seamless Angular form integration.
* Supports grouped radio buttons through name attribute binding.
*
* @example
* ```html
* <!-- Basic usage -->
* <st-radio value="option1" [(selected)]="selectedOption"></st-radio>
* ```
*
* @example
* ```html
* <!-- Grouped radio buttons with labels -->
* <st-radio
* variant="success"
* size="lg"
* label="Option 1"
* value="opt1"
* name="options"
* [(selected)]="selectedOption"
* ></st-radio>
* <st-radio
* variant="success"
* size="lg"
* label="Option 2"
* value="opt2"
* name="options"
* [(selected)]="selectedOption"
* ></st-radio>
* ```
*/
export declare class RadioComponent implements ControlValueAccessor {
/**
* Radio button color variant
* @defaultValue 'primary'
*/
variant: import("@angular/core").InputSignal<RadioVariantProps>;
/**
* Radio button size variant
* @defaultValue 'md'
*/
size: import("@angular/core").InputSignal<RadioSizeProps>;
/**
* Label text displayed next to the radio button
*/
label: import("@angular/core").InputSignal<string>;
/**
* Group name for radio button selection
*/
name: import("@angular/core").InputSignal<string | null>;
/**
* The value associated with this radio button
*/
value: import("@angular/core").InputSignal<any>;
/**
* Two-way bindable selected value for radio group
*/
selected: import("@angular/core").ModelSignal<any>;
/**
* Event emitted when radio button is selected
*/
valueUpdated: import("@angular/core").OutputEmitterRef<any>;
private onControlChange;
private onControlTouch;
/**
* Whether the radio button is disabled
* @defaultValue false
*/
disabled: import("@angular/core").ModelSignal<boolean>;
/**
* @internal
* Computed class string for the radio button
*/
componentClass: import("@angular/core").Signal<string>;
writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(isDisabled: boolean): void;
/**
* @internal
* Handles radio button selection changes
*/
handleChange(): void;
/**
* @internal
* Handles blur event
*/
handleBlur(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "st-radio", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "valueUpdated": "valueUpdated"; "disabled": "disabledChange"; }, never, never, true, never>;
}