@sixbell-telco/sdk/components/forms/select/src/select.component.d.ts

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { FormGroup } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import * as i0 from "@angular/core";
/** Possible select dropdown style variants */
export type SelectVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'info' | 'success' | 'error' | 'warning' | null | undefined;
/** Possible select dropdown size variants */
export type SelectSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Configuration object for select styling */
export type SelectProps = {
    variant?: SelectVariantProps;
    size?: SelectSizeProps;
};
/**
 * A customizable select dropdown component with form integration
 *
 * @remarks
 * Supports both primitive and object options with configurable tracking properties.
 * Implements ControlValueAccessor for Angular form compatibility.
 *
 * @example
 * ```html
 * <!-- Basic usage with primitive values -->
 * <st-select
 *   [options]="['Option 1', 'Option 2']"
 *   [(value)]="selectedValue"
 * ></st-select>
 * ```
 *
 * @example
 * ```html
 * <!-- Object options with custom tracking -->
 * <st-select
 *   [options]="users"
 *   trackBy="id"
 *   key="name"
 *   label="Select user"
 *   [parentForm]="userForm"
 *   formControlName="selectedUser"
 * ></st-select>
 * ```
 */
export declare class SelectComponent {
    /** @internal Translation service instance */
    translateService: TranslateService;
    /**
     * Select dropdown style variant
     * @defaultValue 'secondary'
     */
    variant: import("@angular/core").InputSignal<SelectVariantProps>;
    /**
     * Select dropdown size variant
     * @defaultValue 'md'
     */
    size: import("@angular/core").InputSignal<SelectSizeProps>;
    /**
     * Whether to use ghost (transparent) styling
     * @defaultValue false
     */
    ghost: import("@angular/core").InputSignal<boolean>;
    /**
     * HTML name attribute for the select
     */
    name: import("@angular/core").InputSignal<string | null>;
    /**
     * Placeholder text when no option is selected
     */
    placeholder: import("@angular/core").InputSignal<string>;
    /**
     * Label text displayed above the select
     */
    label: import("@angular/core").InputSignal<string>;
    /**
     * Two-way bindable selected value
     */
    value: import("@angular/core").ModelSignal<any>;
    /**
     * Array of available options (primitives or objects)
     */
    options: import("@angular/core").InputSignal<any[]>;
    /**
     * Text to display when no options are available
     */
    emptyOptionText: import("@angular/core").InputSignal<string | undefined>;
    /**
     * Property name for tracking object options
     * @defaultValue 'id'
     */
    trackBy: import("@angular/core").InputSignal<string>;
    /**
     * Property name for displaying object options
     * @defaultValue 'name'
     */
    key: import("@angular/core").InputSignal<string>;
    /**
     * Parent form group for reactive forms
     */
    parentForm: import("@angular/core").InputSignal<FormGroup<any> | null>;
    /**
     * Form control name for reactive forms
     */
    formControlName: import("@angular/core").InputSignal<string>;
    /**
     * Event emitted when select loses focus
     */
    blurred: import("@angular/core").OutputEmitterRef<unknown>;
    private onControlChange;
    private onControlTouch;
    /**
     * Whether the select is disabled
     * @defaultValue false
     */
    disabled: import("@angular/core").ModelSignal<boolean>;
    /**
     * Event emitted when selection changes
     */
    valueUpdated: import("@angular/core").OutputEmitterRef<any>;
    /**
     * @internal
     * Checks if options are primitive values
     */
    simpleOption: import("@angular/core").Signal<boolean>;
    /**
     * @internal
     * Computed base select classes
     */
    componentClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Computed error state classes
     */
    errorClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Computed success state classes
     */
    successClass: import("@angular/core").Signal<string>;
    writeValue(obj: any): void;
    registerOnChange(fn: any): void;
    registerOnTouched(fn: any): void;
    setDisabledState(isDisabled: boolean): void;
    /**
     * @internal
     * Handles selection changes
     */
    handleSelect(): void;
    /**
     * @internal
     * Handles blur event
     */
    handleBlur(): void;
    private blurTrigger;
    private formControl;
    private formControl$;
    private statusChanges$;
    private stateChanges$;
    private statusSignal;
    private stateSignal;
    /**
     * @internal
     * Computed validation classes based on form state
     */
    validationClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Validates trackBy and key configuration
     */
    isValidTrackAndKey: import("@angular/core").Signal<boolean>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "st-select", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ghost": { "alias": "ghost"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "emptyOptionText": { "alias": "emptyOptionText"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "parentForm": { "alias": "parentForm"; "required": false; "isSignal": true; }; "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "blurred": "blurred"; "disabled": "disabledChange"; "valueUpdated": "valueUpdated"; }, never, ["*"], true, never>;
}