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

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

import { AfterContentInit, OnDestroy, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
/** Dropdown X position options for CDK overlay positioning */
export type DialogXPosition = 'start' | 'center' | 'end';
/** Dropdown Y position options for CDK overlay positioning */
export type DialogYPosition = 'top' | 'center' | 'bottom';
/**
 * CSS class generator for dialog component variants
 * Uses carefully selected DaisyUI classes that don't conflict with CDK positioning
 * @internal
 */
export declare const dialogComponent: (props?: ({
    width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible width values for the dialog component */
export type DialogWidthProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | null | undefined;
/** Animation states for the dialog */
type AnimationState = 'closed' | 'open';
/** Configuration properties for the dialog component */
export type DialogProps = {
    width?: DialogWidthProps;
};
/**
 * A customizable dialog component using Angular CDK Dialog for declarative usage
 *
 * @remarks
 * This component provides a declarative way to create dialogs with content projection.
 * Uses CDK Dialog under the hood to avoid z-index issues with native dialog elements.
 *
 * @example
 * ```html
 * <st-dialog
 *   [(opened)]="isDialogOpen"
 *   width="lg"
 *   alignment="center"
 *   (closed)="handleDialogClosed()">
 *   <st-dialog-title>Confirm Action</st-dialog-title>
 *   <st-dialog-content>
 *     Are you sure you want to proceed?
 *   </st-dialog-content>
 *   <st-dialog-actions>
 *     <st-button (click)="confirmAction()">Confirm</st-button>
 *     <st-button variant="secondary" (click)="closeDialog()">Cancel</st-button>
 *   </st-dialog-actions>
 * </st-dialog>
 * ```
 */
export declare class DialogComponent implements AfterContentInit, OnDestroy {
    /** @internal Content children to detect what's projected */
    private readonly titleComponent;
    private readonly subTitleComponent;
    /** @internal Signals for conditional styling */
    hasTitle: import("@angular/core").WritableSignal<boolean>;
    hasSubTitle: import("@angular/core").WritableSignal<boolean>;
    ngAfterContentInit(): void;
    /**
     * Specifies the maximum width of the dialog content
     * @defaultValue 'md'
     */
    width: import("@angular/core").InputSignal<DialogWidthProps>;
    /**
     * Controls the horizontal positioning of the dialog (x-axis)
     * @defaultValue 'center'
     */
    xPosition: import("@angular/core").InputSignal<DialogXPosition>;
    /**
     * Controls the vertical positioning of the dialog (y-axis)
     * @defaultValue 'center'
     */
    yPosition: import("@angular/core").InputSignal<DialogYPosition>;
    /**
     * Controls the visibility state of the dialog
     * Supports two-way binding via Angular's model
     */
    opened: import("@angular/core").ModelSignal<boolean>;
    /** Event emitted when the dialog closes */
    closed: import("@angular/core").OutputEmitterRef<void>;
    /** Event emitted when clicking outside the dialog content */
    clickOutside: import("@angular/core").OutputEmitterRef<void>;
    /** @internal CDK Dialog service */
    private readonly dialog;
    /** @internal CDK Overlay service for positioning */
    private readonly overlay;
    /** @internal Reference to the dialog template */
    dialogTemplate: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
    /** @internal Reference to the current open dialog */
    private dialogRef;
    /** @internal Subscriptions for CDK dialog observables so we can clean up on destroy */
    private subs;
    /** @internal Animation state signal for controlling CSS animations */
    private readonly animationState;
    /** @internal Flag to track if we're in the process of closing */
    private isClosing;
    /**
     * Computes the data-state attribute value for CSS animations
     * @returns Current animation state
     * @internal
     */
    dataState: import("@angular/core").Signal<AnimationState>;
    /**
     * Computes CSS classes for dialog content based on current configuration
     * @returns Combined Tailwind classes string
     * @internal
     */
    componentClass: import("@angular/core").Signal<string>;
    /** @internal Handles open/close state changes */
    openedEffect: import("@angular/core").EffectRef;
    /**
     * Computed CDK Dialog configuration based on x/y axis signals
     * Uses CDK's overlay positioning system for full axis control
     * @internal
     */
    private readonly dialogConfig;
    /**
     * Opens the dialog using CDK Dialog
     * @internal
     */
    private openDialog;
    /**
     * Public method to close the dialog
     * Can be called directly from parent components or child components
     */
    close(): void;
    /**
     * Closes the dialog using CDK Dialog
     * @internal
     */
    private closeDialog;
    /**
     * Handles animation end events to trigger the actual dialog close
     * @internal
     */
    onAnimationEnd(event: AnimationEvent): void;
    /**
     * Clean up CDK subscriptions and ensure the overlay is closed when the component is destroyed
     */
    ngOnDestroy(): void;
    /**
     * Handles the close button click
     * @internal
     */
    handleCloseClick(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "st-dialog", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "xPosition": { "alias": "xPosition"; "required": false; "isSignal": true; }; "yPosition": { "alias": "yPosition"; "required": false; "isSignal": true; }; "opened": { "alias": "opened"; "required": false; "isSignal": true; }; }, { "opened": "openedChange"; "closed": "closed"; "clickOutside": "clickOutside"; }, ["titleComponent", "subTitleComponent"], ["st-dialog-title", "st-dialog-sub-title", "st-dialog-content", "st-dialog-actions"], true, never>;
}
export {};