@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
159 lines (158 loc) • 6.3 kB
TypeScript
import { ConnectedOverlayPositionChange, ConnectedPosition } from '@angular/cdk/overlay';
import { AfterContentInit } from '@angular/core';
import { OverlayContentComponent } from '../overlay-content/overlay-content.component';
import { OverlayTriggerComponent } from '../overlay-trigger/overlay-trigger.component';
import * as i0 from "@angular/core";
/** Overlay X position options for CDK overlay positioning */
export type OverlayXPosition = 'start' | 'center' | 'end';
/** Overlay Y position options for CDK overlay positioning */
export type OverlayYPosition = 'top' | 'bottom' | 'center';
/** Overlay fallback position configuration */
export interface OverlayFallbackPositions {
/** Enable automatic fallback positions */
enabled: boolean;
/** Custom fallback positions - if not provided, default fallbacks will be used */
positions?: ConnectedPosition[];
}
/**
* Overlay - Shell component for creating custom overlays with positioning
*
* @remarks
* This component provides the infrastructure for creating custom overlays with proper positioning,
* accessibility, and animation support. It's designed to be used as a shell where the consumer
* has full control over the trigger and content styling.
*
* The overlay is controlled through methods: Use `open()`, `close()`, and `toggle()` methods programmatically
* via template reference variables.
*
* @example
* ```html
* <!-- Basic usage -->
* <st-overlay>
* <st-overlay-trigger>
* <button>Trigger</button>
* </st-overlay-trigger>
* <st-overlay-content>
* <div>Content</div>
* </st-overlay-content>
* </st-overlay>
*
* <!-- Using methods for programmatic control -->
* <st-overlay #overlay="stOverlay">
* <st-overlay-trigger>
* <button>Trigger</button>
* </st-overlay-trigger>
* <st-overlay-content>
* <div>Content</div>
* <button (click)="overlay.close()">Close</button>
* </st-overlay-content>
* </st-overlay-content>
* </st-overlay>
* <button (click)="overlay.open()">Open</button>
* <button (click)="overlay.close()">Close</button>
*
* <!-- Using width sync for dropdowns/selects -->
* <st-overlay [syncWidth]="true">
* <st-overlay-trigger>
* <button class="w-64">Trigger with specific width</button>
* </st-overlay-trigger>
* <st-overlay-content>
* <div>Content will match trigger width</div>
* </st-overlay-content>
* </st-overlay>
* ```
*/
export declare class OverlayComponent implements AfterContentInit {
trigger: OverlayTriggerComponent;
content: OverlayContentComponent;
/** 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<OverlayXPosition>;
/** Origin Y position */
originY: import("@angular/core").InputSignal<OverlayYPosition>;
/** Overlay X position */
overlayX: import("@angular/core").InputSignal<OverlayXPosition>;
/** Overlay Y position */
overlayY: import("@angular/core").InputSignal<OverlayYPosition>;
/** Fallback positions configuration */
fallbacks: import("@angular/core").InputSignal<OverlayFallbackPositions>;
/** Whether to sync the overlay content width with the trigger width */
syncWidth: import("@angular/core").InputSignal<boolean>;
/** Internal signal to track overlay state */
readonly _isOpen: import("@angular/core").WritableSignal<boolean>;
/** Internal signal to track the synced width */
readonly _syncedWidth: import("@angular/core").WritableSignal<string | null>;
/** Current active position configuration */
currentPosition: import("@angular/core").WritableSignal<ConnectedPosition | null>;
/** Event emitted when overlay is opened */
opened: import("@angular/core").OutputEmitterRef<void>;
/** Event emitted when overlay is closed */
closed: import("@angular/core").OutputEmitterRef<void>;
constructor();
ngAfterContentInit(): void;
/**
* Computed positions array based on signal inputs
*/
positions: import("@angular/core").Signal<ConnectedPosition[]>;
/**
* Generate default fallback positions based on the primary position
*/
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 overlay positions
*/
private addStandardPositions;
/**
* Check if position is duplicate
*/
private isPositionDuplicate;
/**
* Open the overlay
*/
open(): void;
/**
* Close the overlay
*/
close(): void;
/**
* Toggle the overlay open/close state
*/
toggle(): void;
/**
* Update the synced width based on trigger element width
*/
private updateSyncedWidth;
/**
* Handle position changes from CDK overlay
*/
onPositionChange(position: ConnectedOverlayPositionChange): void;
/**
* Handle click outside to close overlay
*/
onClickOutside(): void;
/**
* Handle window resize to update synced width
*/
onWindowResize(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<OverlayComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OverlayComponent, "st-overlay", ["stOverlay"], { "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; }; "syncWidth": { "alias": "syncWidth"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, ["trigger", "content"], ["st-overlay-trigger"], true, never>;
}