@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
152 lines (151 loc) • 6.19 kB
TypeScript
import { ConnectedOverlayPositionChange, ConnectedPosition } from '@angular/cdk/overlay';
import { TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
/** Animation states for the dropdown */
type DropdownAnimationState = 'closed' | 'opening' | 'open' | 'closing';
/** Dropdown X position options for CDK overlay positioning */
export type DropdownXPosition = 'start' | 'center' | 'end';
/** Dropdown Y position options for CDK overlay positioning */
export type DropdownYPosition = 'top' | 'bottom' | 'center';
/** Dropdown fallback position configuration */
export interface DropdownFallbackPositions {
/** Enable automatic fallback positions */
enabled: boolean;
/** Custom fallback positions - if not provided, default fallbacks will be used */
positions?: ConnectedPosition[];
}
/**
* DropdownTrigger - Trigger element for opening dropdown content
*
* @remarks
* This component acts as the trigger that opens/closes the dropdown content.
* It can contain any content (buttons, avatars, text, icons, etc.).
* Uses CdkConnectedOverlay for positioning and management.
*
* @example
* ```html
* <st-dropdown>
* <st-dropdown-trigger>
* <button class="btn btn-primary">
* Open Menu
* <st-icon [icon]="chevronDown"></st-icon>
* </button>
* </st-dropdown-trigger>
* <st-dropdown-content>
* <st-dropdown-item>Item 1</st-dropdown-item>
* </st-dropdown-content>
* </st-dropdown>
* ```
*/
export declare class DropdownTriggerComponent {
/** Offset X in pixels */
offsetX: import("@angular/core").InputSignal<number>;
/** Offset Y in pixels */
offsetY: import("@angular/core").InputSignal<number>;
/** Origin X position */
originX: import("@angular/core").InputSignal<DropdownXPosition>;
/** Origin Y position */
originY: import("@angular/core").InputSignal<DropdownYPosition>;
/** Overlay X position */
overlayX: import("@angular/core").InputSignal<DropdownXPosition>;
/** Overlay Y position */
overlayY: import("@angular/core").InputSignal<DropdownYPosition>;
/** Fallback positions configuration */
fallbacks: import("@angular/core").InputSignal<DropdownFallbackPositions>;
/** Event emitted when dropdown is opened */
opened: import("@angular/core").OutputEmitterRef<void>;
/** Event emitted when dropdown is closed */
closed: import("@angular/core").OutputEmitterRef<void>;
/** Current open state */
isOpen: import("@angular/core").WritableSignal<boolean>;
/** Internal state to control overlay visibility (keeps overlay open during close animation) */
overlayOpen: import("@angular/core").WritableSignal<boolean>;
/** Current animation state */
animationState: import("@angular/core").WritableSignal<DropdownAnimationState>;
/** Current active position configuration */
currentPosition: import("@angular/core").WritableSignal<ConnectedPosition | null>;
/**
* Computed animation direction based on current position
* Returns the appropriate direction: 'top', 'bottom', 'left', or 'right'
*/
animationDirection: import("@angular/core").Signal<"top" | "bottom" | "left" | "right">;
/**
* Static class mappings for different animation directions
* Maps animation directions to complete Tailwind class names
* All class names are static and detectable by Tailwind at build time
*/
private readonly animationClassMap;
/**
* Computed class string for animations
* Applies the correct animation based on position using static class names
*/
animationClasses: import("@angular/core").Signal<string>;
/** Content template reference */
contentTemplate: TemplateRef<unknown> | null;
/**
* Computed positions array based on signal inputs
*/
positions: import("@angular/core").Signal<ConnectedPosition[]>;
/**
* Generate default fallback positions based on the primary position
* Provides comprehensive fallback coverage for all space constraints
*/
private generateDefaultFallbacks;
/**
* Helper to flip Y position
*/
private getOppositeY;
/**
* Helper to flip X position
*/
private getOppositeX;
/**
* Helper to create position variant
*/
private createPosition;
/**
* Add axis flip fallbacks
*/
private addAxisFlips;
/**
* Add standard dropdown positions
*/
private addStandardPositions;
/**
* Add center alignment fallbacks
*/
private addCenterFallbacks;
/**
* Check if position is duplicate
*/
private isPositionDuplicate; /**
* Set the content template to be displayed in the overlay
*/
setContentTemplate(template: TemplateRef<unknown>): void;
/**
* Toggle the dropdown open/close state
*/
toggle(): void;
/**
* Open the dropdown
* Sets up overlay with animation and emits opened event
*/
open(): void;
/**
* Close the dropdown
* Triggers closing animation and emits closed event
*/
close(): void;
/**
* Handle animation end events
* Completes state transitions when animations finish
*/
onAnimationEnd(event: AnimationEvent): void;
/**
* Handle position changes from CDK overlay
*/
onPositionChange(position: ConnectedOverlayPositionChange): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownTriggerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownTriggerComponent, "st-dropdown-trigger", never, { "offsetX": { "alias": "offsetX"; "required": false; "isSignal": true; }; "offsetY": { "alias": "offsetY"; "required": false; "isSignal": true; }; "originX": { "alias": "originX"; "required": false; "isSignal": true; }; "originY": { "alias": "originY"; "required": false; "isSignal": true; }; "overlayX": { "alias": "overlayX"; "required": false; "isSignal": true; }; "overlayY": { "alias": "overlayY"; "required": false; "isSignal": true; }; "fallbacks": { "alias": "fallbacks"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
}
export {};