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

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

import * as i0 from "@angular/core";
/**
 * @internal
 * Generates base dropdown button classes with style variants
 */
export declare const dropdownButton: (props?: ({
    variant?: "primary" | "secondary" | "tertiary" | "accent" | "info" | "success" | "warning" | "error" | "icon" | null | undefined;
    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
    iconPosition?: "left" | "right" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible dropdown button style variants */
export type DropdownButtonVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'icon' | null | undefined;
/** Possible dropdown button alignment options */
export type DropdownButtonAlignmentProps = 'center' | 'left' | 'right' | null | undefined;
/** Possible dropdown button icon positions */
export type DropdownButtonPositionProps = 'left' | 'right' | null | undefined;
/** Possible dropdown button size variants */
export type DropdownButtonSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/**
 * @internal
 * Generates base dropdown menu classes with positioning variants
 */
export declare const dropdownMenu: (props?: ({
    menuPosition?: "left" | "right" | "top" | "bottom" | null | undefined;
    menuAlignment?: "start" | "end" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible dropdown menu position variants */
export type DropdownMenuPositionProps = 'top' | 'bottom' | 'right' | 'left' | null | undefined;
/** Possible dropdown menu alignment variants */
export type DropdownMenuAlignmentProps = 'start' | 'end' | null | undefined;
/** Configuration object for dropdown styling variants */
export type DropdownProps = {
    variant?: DropdownButtonVariantProps;
    alignment?: DropdownButtonAlignmentProps;
    menuAlignment?: DropdownMenuAlignmentProps;
    menuPosition?: DropdownMenuPositionProps;
    iconPosition?: DropdownButtonPositionProps;
};
/**
 * @internal
 * Combines dropdown button and menu classes
 */
export declare const dropdownComponent: ({ variant, menuAlignment, menuPosition, iconPosition }?: DropdownProps) => string;
/**
 * A customizable dropdown component with menu positioning and various styling options
 *
 * @remarks
 * Built with Tailwind CSS and class-variance-authority for style management.
 * Supports multiple button variants, menu positioning, and responsive behavior.
 *
 * @example
 * ```html
 * <st-dropdown
 *   variant="primary"
 *   menuPosition="bottom"
 *   menuAlignment="end"
 *   icon="chevron-down"
 * >
 *   <button>Actions</button>
 *   <div slot="menu">
 *     <button class="menu-item">Edit</button>
 *     <button class="menu-item">Delete</button>
 *   </div>
 * </st-dropdown>
 * ```
 *
 * @example
 * ```html
 * <st-dropdown
 *   variant="icon"
 *   menuPosition="right"
 *   icon="more-vertical"
 * >
 *   <div slot="menu">...</div>
 * </st-dropdown>
 * ```
 */
export declare class DropdownComponent {
    /**
     * Button style variant
     * @defaultValue 'secondary'
     */
    variant: import("@angular/core").InputSignal<DropdownButtonVariantProps>;
    /**
     * Ghost button style (transparent background)
     * @defaultValue false
     */
    ghost: import("@angular/core").InputSignal<boolean>;
    /**
     * Outline button style (border with transparent fill)
     * @defaultValue false
     */
    outline: import("@angular/core").InputSignal<boolean>;
    /**
     * Soft button style (muted/subdued color variant)
     * @defaultValue false
     */
    soft: import("@angular/core").InputSignal<boolean>;
    /**
     * Dash button style (dashed border)
     * @defaultValue false
     */
    dash: import("@angular/core").InputSignal<boolean>;
    /**
     * Circular button shape
     * @defaultValue false
     */
    circle: import("@angular/core").InputSignal<boolean>;
    /**
     * Square button shape
     * @defaultValue false
     */
    square: import("@angular/core").InputSignal<boolean>;
    /**
     * Glass effect styling
     * @defaultValue false
     */
    glass: import("@angular/core").InputSignal<boolean>;
    /**
     * Button size variant
     * @defaultValue 'md'
     */
    size: import("@angular/core").InputSignal<DropdownButtonSizeProps>;
    /**
     * Add drop shadow
     * @defaultValue false
     */
    shadow: import("@angular/core").InputSignal<boolean>;
    /**
     * Icon name (from icon library)
     */
    icon: import("@angular/core").InputSignal<string | undefined>;
    /**
     * Position of icon relative to text
     */
    iconPosition: import("@angular/core").InputSignal<DropdownButtonPositionProps>;
    /**
     * Position of dropdown menu relative to button
     * @defaultValue 'bottom'
     */
    menuPosition: import("@angular/core").InputSignal<DropdownMenuPositionProps>;
    /**
     * Alignment of dropdown menu content
     */
    menuAlignment: import("@angular/core").InputSignal<DropdownMenuAlignmentProps>;
    /**
     * Button label text
     */
    label: import("@angular/core").InputSignal<string | undefined>;
    /**
     * Controls dropdown open/close state
     * @defaultValue false
     */
    isOpened: import("@angular/core").ModelSignal<boolean>;
    /**
     * Event emitted when dropdown toggle state changes
     */
    toggled: import("@angular/core").OutputEmitterRef<boolean>;
    /**
     * @internal
     * Computed class string for the dropdown button
     */
    buttonClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Computed class string for the dropdown menu container
     */
    menuClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Computed class string for the dropdown content
     */
    dropdownContentClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Toggles dropdown visibility state
     */
    handleToggle(): void;
    /**
     * @internal
     * Handles click outside to close dropdown
     */
    handleClickOuside(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "st-dropdown", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "ghost": { "alias": "ghost"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "soft": { "alias": "soft"; "required": false; "isSignal": true; }; "dash": { "alias": "dash"; "required": false; "isSignal": true; }; "circle": { "alias": "circle"; "required": false; "isSignal": true; }; "square": { "alias": "square"; "required": false; "isSignal": true; }; "glass": { "alias": "glass"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "menuPosition": { "alias": "menuPosition"; "required": false; "isSignal": true; }; "menuAlignment": { "alias": "menuAlignment"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
}