@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";
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;
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 };