import { p as proxyCustomElement, H, c as createEvent, h } from './p-ac76a689.js';
import { s as solidIcons, l as library$1, i as icon, d as defineCustomElement$1, g as getIconHtmlFromIconDefinition, c as classNames, f as faTimes } from './p-67725a25.js';
import { D as DataTestIdsEnum } from './p-545d6d1c.js';
import { d as defineCustomElement$2 } from './p-07470759.js';

function getIconHtmlFromIconName(iconName) {
    let faIcon;
    const dynamicIcon = solidIcons[`fa${capitalize(iconName)}`];
    if (!dynamicIcon) {
        console.error(`Icon "${iconName}" not found"`);
        return null;
    }
    library$1.add(dynamicIcon);
    faIcon = icon(dynamicIcon);
    return faIcon ? faIcon.html[0] : null;
}
function capitalize(iconName) {
    if (!iconName) {
        return iconName;
    }
    return iconName.charAt(0).toUpperCase() + iconName.slice(1);
}

const transactionToastContentCss = ".content {\n  display: flex;\n  align-items: center;\n}\n.content-left {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding-left: 0.5rem;\n  padding-right: 0.75rem;\n}\n.success {\n  background-color: #5cb85c;\n}\n.warning {\n  background-color: #ffc107;\n}\n.danger {\n  background-color: #d9534f;\n}\n.content-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  svg {\n    height: auto;\n    width: 20px;\n\n    path {\n      fill: white;\n    }\n  }\n}\n\n.icon-close {\n  cursor: pointer;\n  float: right;\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1;\n  color: #000;\n  text-shadow: 0 1px 0 #fff;\n  opacity: 0.5;\n  padding: 0;\n  background-color: rgba(0, 0, 0, 0);\n  border: 0;\n  display: flex;\n  align-items: center;\n  margin: 0 0.5rem;\n  width: 12px;\n}\n\n.content-right {\n  display: block;\n  overflow: hidden;\n  width: 100%;\n}\n\n.content-heading {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.25rem;\n}\n\n.content-heading-title {\n  margin: 0;\n  margin-bottom: 0.5rem;\n  font-weight: 500;\n  line-height: 1.2;\n  font-size: 1.25rem;\n}\n";
const TransactionToastContentStyle0 = transactionToastContentCss;

const TransactionToastContent = /*@__PURE__*/ proxyCustomElement(class TransactionToastContent extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.deleteToast = createEvent(this, "deleteToast", 7);
        this.transactions = undefined;
        this.toastDataState = undefined;
        this.processedTransactionsStatus = undefined;
    }
    render() {
        const { icon, iconClassName, title, hasCloseButton } = this.toastDataState;
        let iconHtml = null;
        if (typeof icon === 'string') {
            iconHtml = getIconHtmlFromIconName(icon);
        }
        if (icon instanceof H) {
            iconHtml = icon.outerHTML;
        }
        return (h("div", { key: 'a1f1d8b368b91f4e21ad7577472d56cc572554d6', class: "content", "data-testid": DataTestIdsEnum.transactionToastContent }, h("div", { key: '0ecef1658ddd3540a61cd1989ff5751e00cd6676', class: "content-left" }, h("div", { key: '05cabf1cac879eb2f55cee1c531327d960b50bc3', class: classNames('content-icon', iconClassName), innerHTML: iconHtml })), h("div", { key: '749ec666bde13109417b7adea951f1c9c13a57b1', class: "content-right" }, h("div", { key: '755662680e8b4758806950b6380617579a29442a', class: "content-heading" }, h("h5", { key: '5b2cc414aef6a6207237f346b0664d58796fb8bb', class: "content-heading-title", "data-testid": DataTestIdsEnum.transactionToastTitle }, title), hasCloseButton && h("button", { key: 'b1990cbd987c62e2cf0f25d80649d41d1ce47aea', onClick: () => this.deleteToast.emit(), type: "button", class: "icon-close", innerHTML: getIconHtmlFromIconDefinition(faTimes) })), h("div", { key: 'a1f5e680a171c3b1ef19cd10779aa063ed29aba2', class: "content-heading-title" }, h("transaction-toast-details", { key: '0b495ade2e5fca2e955f7f1951ca940d4d88ab1a', transactions: this.transactions, processedTransactionsStatus: this.processedTransactionsStatus })))));
    }
    static get style() { return TransactionToastContentStyle0; }
}, [1, "transaction-toast-content", {
        "transactions": [16],
        "toastDataState": [16],
        "processedTransactionsStatus": [1, "processed-transactions-status"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["transaction-toast-content", "transaction-toast-details", "transaction-toast-details-body"];
    components.forEach(tagName => { switch (tagName) {
        case "transaction-toast-content":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TransactionToastContent);
            }
            break;
        case "transaction-toast-details":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "transaction-toast-details-body":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { TransactionToastContent as T, defineCustomElement as d };

//# sourceMappingURL=p-52db5b4c.js.map