import { p as proxyCustomElement, H, h } from './p-ac76a689.js';
import { s as state } from './p-6b2f1a45.js';
import { d as defineCustomElement$2 } from './p-424c7111.js';

const fungibleComponentCss = "*{margin:0;padding:0;box-sizing:border-box}.fungible-container{display:flex;flex-direction:column}.fungible-inner-container{display:flex;justify-content:space-between;align-items:center;background-color:#f9f6ee;border-radius:8px;padding-right:8px}.fungible-img-container{display:flex;gap:1rem;align-items:flex-end}.fungible-img{width:64px;height:64px}.fungible-sft{color:#fed7aa;background-color:#171717;padding:4px 8px;text-transform:uppercase;border-radius:4px}";
const FungibleComponentStyle0 = fungibleComponentCss;

const LABELS = {
    SemiFungibleESDT: 'SFT',
    NonFungibleESDT: 'NFT',
};
const FungibleComponent$1 = /*@__PURE__*/ proxyCustomElement(class FungibleComponent extends H {
    constructor() {
        super();
        this.__registerHost();
    }
    render() {
        const { sftTransaction, nftTransaction, commonData } = state;
        const { tokenType } = commonData;
        const data = tokenType === 'SemiFungibleESDT' ? sftTransaction : nftTransaction;
        const { amount = '', identifier = '', imageURL = '' } = data || {};
        const label = LABELS[tokenType];
        return (h("sign-transaction-component", { key: '1232a385e8de99aff217faeacfe900006224398a', header: h("div", { class: "fungible-container" }, h("span", null, `You are sending ${amount} ${label}`), h("div", { class: "fungible-inner-container" }, h("div", { class: "fungible-img-container" }, h("img", { src: imageURL, alt: identifier, class: "fungible-img" }), h("div", null, h("span", null, identifier))), h("span", { class: "fungible-sft" }, label))) }));
    }
    static get style() { return FungibleComponentStyle0; }
}, [0, "fungible-component"]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["fungible-component", "sign-transaction-component"];
    components.forEach(tagName => { switch (tagName) {
        case "fungible-component":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FungibleComponent$1);
            }
            break;
        case "sign-transaction-component":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const FungibleComponent = FungibleComponent$1;
const defineCustomElement = defineCustomElement$1;

export { FungibleComponent, defineCustomElement };

//# sourceMappingURL=fungible-component.js.map