@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
103 lines (102 loc) • 4.34 kB
TypeScript
import { ElementRef } from '@angular/core';
import * as i0 from "@angular/core";
/**
* CSS class generator for modal component variants
* @internal
*/
export declare const modalComponent: (props?: ({
width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
aligment?: "center" | "top" | "bottom" | "start" | "end" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible width values for the modal component */
export type ModalWidthProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | null | undefined;
/** Possible vertical alignment values for the modal component */
export type ModalAlignmentProps = 'top' | 'center' | 'bottom' | 'start' | 'end' | null | undefined;
/** Configuration properties for the modal component */
export type ModalProps = {
width?: ModalWidthProps;
alignment?: ModalAlignmentProps;
};
/**
* A customizable modal dialog component with Tailwind CSS integration
*
* @remarks
* Uses Angular's signal-based inputs and outputs for reactive state management.
* Supports various sizes and vertical alignments through input properties.
*
* @example
* ```html
* <st-modal
* modalId="confirmDialog"
* [(opened)]="isOpen"
* width="lg"
* alignment="top"
* (close)="handleClose()"
* (clickOutside)="handleClickOustide()"
* />
* ```
*/
export declare class ModalComponent {
/**
* Specifies the maximum width of the modal content
* @defaultValue 'md'
*/
width: import("@angular/core").InputSignal<ModalWidthProps>;
/**
* Controls the vertical positioning of the modal
* @defaultValue 'center'
*/
alignment: import("@angular/core").InputSignal<ModalAlignmentProps>;
/** Required unique identifier for the modal dialog */
modalId: import("@angular/core").InputSignal<string>;
/** Event emitted when clicking outside the modal content */
clickOutside: import("@angular/core").OutputEmitterRef<void>;
/** Event emitted when the modal closes */
closed: import("@angular/core").OutputEmitterRef<void>;
/** @internal Icon reference for close button */
iconClose: string;
/** @internal Reference to the underlying dialog element */
dialog: import("@angular/core").Signal<ElementRef<HTMLDialogElement> | undefined>;
/**
* Controls the visibility state of the modal
* Supports two-way binding via Angular's model
*/
opened: import("@angular/core").ModelSignal<boolean>;
/** @internal Handles open/close state changes */
openedEffect: import("@angular/core").EffectRef;
/**
* Computes CSS classes for modal content based on current configuration
* @returns Combined Tailwind classes string
* @internal
*/
componentClass: import("@angular/core").Signal<string>;
/**
* Computes CSS classes for modal overlay positioning
* @returns Combined positioning classes string
* @internal
*/
modalClass: import("@angular/core").Signal<string>;
/** @internal Opens the native dialog element */
handleOpen(): void;
/** @internal Closes the native dialog element */
handleClose(): void;
/**
* Public method to close the modal and emit close event
* Can be called directly from parent components
*/
handleCloseClick(): void;
/**
* Handles cancel events from the dialog element
* @param event - Native dialog cancel event
* @internal
*/
handleCancelClick(event: Event): void;
/**
* Handles click events outside the modal content
* @param event - Native mouse event
* @internal
*/
handleClickOutside(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "st-modal", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "modalId": { "alias": "modalId"; "required": true; "isSignal": true; }; "opened": { "alias": "opened"; "required": false; "isSignal": true; }; }, { "clickOutside": "clickOutside"; "closed": "closed"; "opened": "openedChange"; }, never, ["st-modal-title", "st-modal-content", "st-modal-actions"], true, never>;
}