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

HTML dialog made with Web Components

import { __decorate } from "tslib";
import "@conectate/ct-card/ct-card";
import { CtLit, customElement, html } from "@conectate/ct-lit";
import { showCtDialog } from "./ct-dialog.js";
/**
 * Creates and displays a card-styled dialog with the specified content
 *
 * @param {HTMLElement} el - The HTML element to display within the card 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 function showCtCardDialog(el, id, history) {
    let cardDialog = document.createElement("ct-card-dialog");
    cardDialog.el = el;
    cardDialog.dialog = showCtDialog(cardDialog, id, history);
    return cardDialog.dialog;
}
// @ts-ignore
window.showCtCardDialog = showCtCardDialog;
/**
 * ## `ct-card-dialog`
 * A card-styled dialog component that presents content in a card format.
 *
 * ### Usage
 * ```javascript
 * import { showCtCardDialog } from '@conectate/ct-dialog';
 *
 * // Create content for the card dialog
 * const content = document.createElement('div');
 * content.innerHTML = `
 *   <h2>Card Title</h2>
 *   <p>This is card content with nice styling.</p>
 *   <button>Close</button>
 * `;
 *
 * // Show the card dialog
 * const dialog = showCtCardDialog(content);
 *
 * // Close dialog when needed
 * dialog.close();
 * ```
 *
 * @group ct-elements
 * @element ct-card-dialog
 */
let CtCardDialog = class CtCardDialog extends CtLit {
    static get properties() {
        return {
            el: { type: Object }
        };
    }
    render() {
        return html `
			<style>
				:host {
					display: block;
					position: relative;
					margin: 16px auto;
					overflow: auto;
					border-radius: var(--border-radius, 16px);
					background: var(--color-background, #fff);
					box-shadow:
						0 8px 16px 0 rgba(10, 14, 29, 0.02),
						0 8px 40px 0 rgba(10, 14, 29, 0.06);
					color: var(--color-on-surface);
				}

				:host(::-webkit-scrollbar) {
					width: 9px;
				}

				:host(::-webkit-scrollbar-track) {
					border-radius: 8px;
				}

				:host(::-webkit-scrollbar-thumb) {
					background-color: var(--color-primary);
					outline: 1px solid slategrey;
					border-radius: 8px;
				}
			</style>
			${this.el}
		`;
    }
};
CtCardDialog = __decorate([
    customElement("ct-card-dialog")
], CtCardDialog);
export { CtCardDialog };