@sixbell-telco/sdk

import { AfterViewInit, ElementRef } from '@angular/core'; import { ControlValueAccessor, FormGroup } from '@angular/forms'; import { TranslateService } from '@ngx-translate/core'; import { CdkListbox } from '@angular/cdk/listbox'; 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; }; /** Animation states for the select overlay */ type AnimationState = 'closed' | 'opening' | 'open' | 'closing'; /** * A customizable select dropdown component with CDK overlay integration * * @remarks * Uses the same visual design as the combobox but simplified for single selection only. * No search functionality or multi-select support. Implements ControlValueAccessor * for Angular form compatibility. * * @example * ```html *  * <st-select * [options]="['Option 1', 'Option 2']" * [(value)]="selectedValue" * ></st-select> * ``` * * @example * ```html *  * <st-select * [options]="users" * valueKey="id" * displayKey="name" * label="Select user" * [parentForm]="userForm" * formControlName="selectedUser" * ></st-select> * ``` */ export declare class SelectComponent implements AfterViewInit, ControlValueAccessor { /** @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[]>; /** * The object property to use for display text when options are objects * Falls back to common property names if not specified */ displayKey: import("@angular/core").InputSignal<string>; /** * The object property to use as the value when options are objects * Uses the entire object if not specified */ valueKey: import("@angular/core").InputSignal<string>; /** * Whether to show a clear button next to the selected value * @default true */ allowClear: import("@angular/core").InputSignal<boolean>; /** * 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>; /** * Whether the select is disabled * @defaultValue false */ disabled: import("@angular/core").ModelSignal<boolean>; /** * Event emitted when select loses focus */ blurred: import("@angular/core").OutputEmitterRef<unknown>; /** * Event emitted when selection changes */ valueUpdated: import("@angular/core").OutputEmitterRef<any>; /** Dropdown chevron icon */ iconChevronDown: string; /** Check icon for selected options */ iconCheck: string; /** Close/clear icon */ iconClose: string; /** Current animation state of the overlay */ private readonly animationState; /** Trigger for blur events in form validation */ private readonly blurTrigger; /** Active option index for keyboard navigation */ private readonly activeOptionIndex; /** Reference to the trigger button element */ triggerRef: import("@angular/core").Signal<ElementRef<HTMLButtonElement> | undefined>; /** Reference to the options list container */ optionsList: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>; /** Reference to the CDK listbox for keyboard navigation */ listbox: import("@angular/core").Signal<CdkListbox<unknown> | undefined>; /** Width of the trigger button for overlay positioning */ triggerWidth: import("@angular/core").WritableSignal<number>; /** Form control reference for reactive forms */ private readonly formControl; /** Observable stream of form control */ private readonly formControl$; /** Stream of form control status changes */ private readonly statusChanges$; /** Stream of form control value changes */ private readonly stateChanges$; /** Signal for form control status */ private readonly statusSignal; /** Signal for form control state */ private readonly stateSignal; /** Callback function for value changes */ private onChange; /** Callback function for touch events */ private onTouched; /** * Whether the overlay is currently open or in the process of opening/closing * @returns True if overlay is visible or animating */ isOpen: import("@angular/core").Signal<boolean>; /** * Whether the overlay is currently animating to open state * @returns True if overlay is opening or open */ isAnimatingOpen: import("@angular/core").Signal<boolean>; /** * Current animation state for template binding * @returns Current animation state */ dataState: import("@angular/core").Signal<AnimationState>; /** * Display value for the selected option * @returns Formatted display string for the current selection */ displayValue: import("@angular/core").Signal<any>; /** * Whether the clear button should be shown * @returns True if there's a valid selected value and clear is allowed */ showClearButton: import("@angular/core").Signal<boolean>; /** * Translated placeholder text * @returns Translated placeholder or input value */ translatedPlaceholder: import("@angular/core").Signal<any>; /** * @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>; /** * Validation-aware CSS classes based on form control state * @internal */ validationClass: import("@angular/core").Signal<string>; /** * CSS classes for the options menu * @internal */ menuClass: import("@angular/core").Signal<string>; /** * Angular lifecycle hook called after view initialization * Updates the trigger width for proper overlay positioning */ ngAfterViewInit(): void; /** * Writes a new value to the component * @param value - The new value to set */ writeValue(value: any): void; /** * Registers a callback function to be called when the value changes * @param fn - The callback function */ registerOnChange(fn: (value: any) => void): void; /** * Registers a callback function to be called when the component is touched * @param fn - The callback function */ registerOnTouched(fn: () => void): void; /** * Sets the disabled state of the component * @param isDisabled - Whether the component should be disabled */ setDisabledState(isDisabled: boolean): void; /** * Toggles the overlay open/closed state * Handles focus management and animation state transitions */ toggleOverlay(): void; /** * Handles animation end events to update state * @param event - The animation event */ onAnimationEnd(event: AnimationEvent): void; /** * Handles overlay detachment * Cleans up state and triggers blur */ handleDetach(): void; /** * Handles clicks outside the component * @param event - The mouse event */ handleClickOutside(event: MouseEvent): void; /** * Handles option selection * @param option - The selected option */ handleOptionSelect(option: any): void; /** * Handles CDK listbox selection changes * @param event - The selection change event */ handleSelectionChange(event: any): void; /** * Handles keyboard events for option selection * @param event - The keyboard event */ handleListboxKeydown(event: KeyboardEvent): void; /** * Handles keyboard events on the trigger button * @param event - The keyboard event */ handleTriggerKeydown(event: KeyboardEvent): void; /** * Clears the current selection */ clearSelection(): void; /** * Handles clear selection button click * @param event - The click event */ handleClearSelection(event: Event): void; /** * Checks if an option is currently selected * @param option - The option to check * @returns True if the option is selected */ isOptionSelected(option: any): boolean; /** * Checks if an option is currently active for keyboard navigation * @param index - The option index * @returns True if the option is active */ isActiveOption(index: number): boolean; /** * Gets the display value for an option * @param option - The option to get display value for * @returns The display string for the option */ getDisplayValue(option: any): string; /** * Updates the trigger button width for overlay positioning */ private updateTriggerWidth; /** * Gets the value property from an option * @param option - The option to get value from * @returns The option value */ private getOptionValue; /** * Triggers blur event for form validation */ private triggerBlur; /** * Sets the active option for keyboard navigation * @param index - The index of the option to make active */ private setActiveOption; /** * Sets the first option as active by default */ private setDefaultActiveOption; /** * Updates the visual state of the active option */ private updateActiveOptionVisually; 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; }; "displayKey": { "alias": "displayKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "allowClear": { "alias": "allowClear"; "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"; "disabled": "disabledChange"; "blurred": "blurred"; "valueUpdated": "valueUpdated"; }, never, ["*"], true, never>; } export {};