@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
97 lines (96 loc) • 3.43 kB
TypeScript
import { ControlValueAccessor } from '@angular/forms';
import * as i0 from "@angular/core";
/** Possible switch style variants */
export type SwitchVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'info' | 'success' | 'error' | 'warning' | null | undefined;
/** Possible switch size variants */
export type SwitchSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Configuration object for switch styling */
export type SwitchProps = {
variant?: SwitchVariantProps;
size?: SwitchSizeProps;
};
/**
* A customizable switch/toggle component with form integration
*
* @remarks
* Implements ControlValueAccessor for Angular form compatibility.
* Supports various style variants and sizes through Tailwind CSS.
*
* @example
* ```html
* <!-- Basic standalone usage -->
* <st-switch [(value)]="isEnabled"></st-switch>
* ```
*
* @example
* ```html
* <!-- With form integration -->
* <st-switch
* [parentForm]="settingsForm"
* formControlName="darkMode"
* label="Dark Mode"
* ></st-switch>
* ```
*/
export declare class SwitchComponent implements ControlValueAccessor {
/**
* Switch style variant
* @defaultValue 'primary'
*/
variant: import("@angular/core").InputSignal<SwitchVariantProps>;
/**
* Switch size variant
* @defaultValue 'md'
*/
size: import("@angular/core").InputSignal<SwitchSizeProps>;
/**
* Label text displayed next to the switch
*/
label: import("@angular/core").InputSignal<string>;
/**
* HTML name attribute for the switch
*/
name: import("@angular/core").InputSignal<string | null>;
/**
* Two-way bindable switch state
*/
value: import("@angular/core").ModelSignal<boolean>;
/**
* Event emitted when switch loses focus
*/
blurred: import("@angular/core").OutputEmitterRef<boolean>;
/** @internal */
private onControlChange;
/** @internal */
private onControlTouch;
/**
* Whether the switch is disabled
* @defaultValue false
*/
disabled: import("@angular/core").ModelSignal<boolean>;
/**
* Event emitted when switch state changes
*/
valueUpdated: import("@angular/core").OutputEmitterRef<boolean>;
/**
* @internal
* Computed base switch classes
*/
componentClass: import("@angular/core").Signal<string>;
writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(isDisabled: boolean): void;
/**
* @internal
* Handles state changes
*/
handleChange(): void;
/**
* @internal
* Handles blur event
*/
handleBlur(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "st-switch", 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": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "blurred": "blurred"; "disabled": "disabledChange"; "valueUpdated": "valueUpdated"; }, never, never, true, never>;
}