@conectate/ct-dialog
Version:
HTML dialog made with Web Components
184 lines (183 loc) • 6.22 kB
TypeScript
/**
@license
Copyright (c) 2020 Herberth Obregón. All rights reserved.
This code may only be used under the BSD style license found at
https://open.grupoconectate.com/LICENSE.txt The complete set of authors may be found at
https://open.grupoconectate.com/AUTHORS.txt The complete set of contributors may be
found at https://open.grupoconectate.com/CONTRIBUTORS.txt Code distributed by Herberth Obregón as
part of the Conectate Open Source Project is also subject to an additional IP rights grant
found at https://open.grupoconectate.com/PATENTS.txt
*/
import { CtLit } from "@conectate/ct-lit";
type Modal = {
destroy: () => void;
close: (e?: Event | null, type?: "click" | "keyup" | "popstate") => Promise<Event>;
};
declare global {
interface Window {
customModals: {
history: {
id: string;
modal: Modal;
}[];
toDelete: Modal | null;
closePopState: (() => void) | null;
closeESC: (() => void) | null;
};
}
}
/**
* Creates and displays a dialog with the specified content
*
* @param {HTMLElement} el - The HTML element to display within the dialog
* @param {string} [id] - Optional identifier for the dialog
* @param {ConectateHistory} [history] - Optional history object for browser history integration
* @returns {CtDialog} The created dialog instance
*/
export declare function showCtDialog(el: HTMLElement, id?: string, history?: ConectateHistory): CtDialog;
/**
* Closes a specific dialog or all dialogs if none specified
*
* @param {CtDialog} [id] - Optional dialog instance to close
* @returns {Promise<number>} Promise that resolves when the dialog(s) is closed
*/
export declare function closeCtDialog(id?: CtDialog): Promise<unknown>;
/**
* Animation types available for dialogs
*/
type typeDialog = "alert" | "cupertino" | "slide-right" | "slide-left" | "bottom-sheet";
/**
* Size preferences for dialogs
*/
export declare enum DialogSizePreferences {
/** Full screen dialog */
fullsreen = 0,
/** 80% of window width with max-width */
fullsize = 1
}
/**
* Interface for history integration
*/
export interface ConectateHistory {
/** Page title for history entry */
title: string;
/** URL for history entry */
href: string;
}
/**
* ## `ct-dialog`
* A versatile dialog component that supports multiple animation styles and modal behaviors.
*
* ### Usage
* ```javascript
* import { showCtDialog, closeCtDialog } from '@conectate/ct-dialog';
*
* // Create content for the dialog
* const content = document.createElement('div');
* content.textContent = 'This is a dialog';
*
* // Show the dialog
* const dialog = showCtDialog(content);
*
* // Configure dialog
* dialog.setAnimation('slide-right');
* dialog.interactiveDismissDisabled = true; // Prevent closing by clicking outside
*
* // Close dialog
* dialog.close();
* // or
* closeCtDialog(dialog);
* ```
*
* ### Animation Types
* - `alert`: Standard modal dialog (default)
* - `cupertino`: iOS-style dialog animation
* - `slide-right`: Dialog slides in from the right
* - `slide-left`: Dialog slides in from the left
* - `bottom-sheet`: Dialog slides up from the bottom
*
* @group ct-elements
* @element ct-dialog
* @fires close - Fired when the dialog closes
* @fires open - Fired when the dialog opens
* @csspart overlay - The overlay that covers the screen behind the dialog
* @csspart container - The container of the dialog content
* @cssProp --ct-dialog-width - Width of the dialog (default: 25cm)
* @cssProp --ct-dialog-height - Height of the dialog (default: 80%)
* @cssProp --ct-dialog-background - Background color of the dialog
* @cssProp --ct-dialog-border-radius - Border radius of the dialog
* @cssProp --ct-dialog-box-shadow - Shadow of the dialog
*/
export declare class CtDialog extends CtLit {
/** Flag for checking CriOS browser */
static checkForCriOS: boolean;
/** Element to hide overflow on when dialog is open */
static hiddenOverflow: HTMLElement | null;
static styles: import("lit").CSSResult[];
dialogID?: string;
interactiveDismissDisabled: boolean;
role: string;
type: typeDialog;
ariaModal: string;
disableHistoryAPI: boolean;
_closeViaPopState: any;
_clseDialogESC: any;
/** Esto es para esperar que efectivamente se haya hecho el push state */
mappingContainer?: Promise<any>;
history: ConectateHistory;
_element?: HTMLElement;
preferences: any[];
resolveMapping: (value?: {} | PromiseLike<{}>) => void;
finish: () => void;
get element(): HTMLElement;
set element(val: HTMLElement);
render(): import("lit").TemplateResult<1>;
getStylesPref(pref: DialogSizePreferences[]): import("lit").TemplateResult<1>[];
disconnectedCallback(): void;
computeAnimation(anim: typeDialog): "anim-normal" | "anim-cupertino" | "anim-slide-left" | "anim-slide-right" | "anim-bottom-sheet";
constructor();
firstUpdated(): void;
enableHistoryAPI(value?: boolean): this;
fullscreenMode(): this;
fullsizeMode(): this;
setAnimation(anim: typeDialog): this;
show(): void;
waitForDefined(param: () => any, timeout?: number): Promise<any>;
close(e?: Event | null, type?: "click" | "keyup" | "popstate"): Promise<Event>;
getAnimOut(type: typeDialog): {
transform: string;
opacity: number;
}[];
destroy(): void;
/**
* @deprecated Use close() instead. The method will be removed in the next major version.
*/
closeDialog(e?: Event | null): Promise<Event>;
static get properties(): {
/**
*
*/
dialogID: {
type: StringConstructor;
reflect: boolean;
};
/**
* Entrada para el History API de tipe {title,href}
*/
history: {
type: ObjectConstructor;
};
element: {
type: ObjectConstructor;
};
free: {
type: ObjectConstructor;
};
};
}
declare global {
interface HTMLElementTagNameMap {
"ct-dialog": CtDialog;
}
}
export {};