@conectate/ct-dialog/ct-dialog-builder.js

HTML dialog made with Web Components

import { CtDialog } from "./ct-dialog.js";
/**
 * ## CtDialogBuilder
 * A builder class for creating and configuring dialogs with various components.
 *
 * This class provides a fluent API for building dialogs with headers, buttons,
 * content, and lists, similar to Material Design dialog patterns.
 *
 * ### Usage
 * ```javascript
 * import { CtDialogBuilder } from '@conectate/ct-dialog';
 *
 * // Create a dialog builder
 * const builder = new CtDialogBuilder();
 *
 * // Configure the dialog
 * builder
 *   .title('Dialog Title')
 *   .content('This is the dialog content')
 *   .positiveButton('OK')
 *   .negativeButton('Cancel')
 *   .show();
 * ```
 */
export default class CtDialogBuilder {
    /**
     * Creates a new dialog builder
     * @param {HTMLElement} cnx - Container element where dialog will be attached (default: document.body)
     * @param {CtDialog} dialog - Optional existing dialog instance to configure
     */
    constructor(cnx = document.body, dialog = new CtDialog()) {
        /**
         * Border radius value for the dialog
         */
        this.cornerRadiusValue = 16;
        this.cnx = cnx;
        this.dialog = dialog;
    }
    // ================================== Header ==================================
    /**
     * Sets an icon for the dialog header
     * @param {string} svg - SVG content for the icon
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    icon(svg) { }
    /**
     * Sets the title for the dialog
     * @param {string} title - Dialog title text
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    title(title) { }
    // ================================== Button ==================================
    /**
     * Adds a positive action button (like "OK", "Accept", etc.)
     * @param {string} positiveButton - Text for the positive button
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    positiveButton(positiveButton) { }
    /**
     * Adds a negative action button (like "Cancel", "No", etc.)
     * @param {string} negativeButton - Text for the negative button
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    negativeButton(negativeButton) { }
    /**
     * Adds a neutral action button (like "Later", "Remind me", etc.)
     * @param {string} neutralButton - Text for the neutral button
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    neutralButton(neutralButton) { }
    // ================================== BODY ==================================
    /**
     * Sets the content text for the dialog
     * @param {string} content - Content text
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    content(content) { }
    // ================= LISTAS =================
    /**
     * Adds a simple list of items to the dialog
     * @param {string[]} items - Array of text items
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    listItems(items) { }
    /**
     * Adds a single-choice list to the dialog (like radio buttons)
     * @param {string[]} items - Array of text items
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    listItemsSingleChoice(items) { }
    /**
     * Adds a multi-choice list to the dialog (like checkboxes)
     * @param {string[]} items - Array of text items
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    listItemsMultiChoice(items) { }
    /**
     * Adds a custom list with a render function for each item
     * @template T The type of items in the list
     * @param {T[]} items - Array of items
     * @param {function(T, number): TemplateResult} renderItem - Function to render each item
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    customListAdapter(items, renderItem) { }
    // ================= View =================
    /**
     * Shows the dialog
     * @returns {CtDialog} The dialog instance
     */
    show() {
        this.cnx.appendChild(this.dialogType);
    }
    /**
     * Dismisses the dialog
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    dismiss() { }
    // ================= EVENTS =================
    /**
     * Registers a callback to be called before the dialog is shown
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    onPreShow() { }
    /**
     * Registers a callback to be called after the dialog is shown
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    onPostShow() { }
    /**
     * Registers a callback to be called when the dialog is dismissed
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    onDismiss() { }
    // =============== CUSTOM ==========
    /**
     * Sets the corner radius for the dialog
     * @param {number} radius - Corner radius in pixels
     * @returns {CtDialogBuilder} The builder instance for chaining
     */
    cornerRadius(radius) {
        this.cornerRadiusValue = radius;
    }
}
// @ts-ignore
window.CtDialogBuilder = CtDialogBuilder;