'use strict';

var index = require('./index-DOPS1LtU.js');
var index$1 = require('./index-Cws2ei2C.js');
var provider_types = require('./provider.types-Cj9a7a0n.js');
var EventBus = require('./EventBus-Dq4GLNJp.js');
var processImgSrc = require('./processImgSrc-CTLTL8gJ.js');
var getIsMetaMaskAvailable = require('./getIsMetaMaskAvailable-BqCE2tAJ.js');
require('./_commonjsHelpers-MBWFX2dn.js');

var UnlockPanelEventsEnum;
(function (UnlockPanelEventsEnum) {
    UnlockPanelEventsEnum["OPEN"] = "OPEN";
    UnlockPanelEventsEnum["CLOSE"] = "CLOSE";
    UnlockPanelEventsEnum["LOGIN"] = "LOGIN";
    UnlockPanelEventsEnum["CANCEL_LOGIN"] = "CANCEL_LOGIN";
})(UnlockPanelEventsEnum || (UnlockPanelEventsEnum = {}));

const unlockPanelCss = "/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */@layer theme{:host,:root{--mvx-font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--mvx-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--mvx-default-font-family:var(--mvx-font-sans);--mvx-default-mono-font-family:var(--mvx-font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--mvx-default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--mvx-default-font-feature-settings,normal);font-variation-settings:var(--mvx-default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--mvx-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--mvx-default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--mvx-default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentColor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components,utilities; /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities; /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities; /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities; /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities; /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities;.unlock-panel,.unlock-panel-anchor{display:flex;flex:1;flex-direction:column}.unlock-panel .unlock-panel-groups{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.unlock-panel .unlock-panel-groups .unlock-panel-group{display:flex;flex-direction:column;gap:12px}.unlock-panel .unlock-panel-groups .unlock-panel-group .unlock-panel-group-label{color:#a09a93;line-height:1}.unlock-panel .unlock-panel-groups .unlock-panel-group .unlock-panel-group-providers{display:flex;flex-direction:column;gap:2px}.unlock-panel .unlock-panel-groups .unlock-panel-group .unlock-panel-group-providers .unlock-panel-group-provider{border-radius:0}.unlock-panel .unlock-panel-groups .unlock-panel-group .unlock-panel-group-providers .unlock-panel-group-provider.first{border-top-left-radius:12px;border-top-right-radius:12px}.unlock-panel .unlock-panel-groups .unlock-panel-group .unlock-panel-group-providers .unlock-panel-group-provider.last{border-bottom-left-radius:12px;border-bottom-right-radius:12px}.unlock-panel .unlock-panel-footer{align-items:center;background:#0a0a0a;border:1px solid #212121;border-radius:16px;cursor:pointer;display:flex;margin-top:auto;overflow:hidden;padding:24px;position:relative}.unlock-panel .unlock-panel-footer:hover .unlock-panel-footer-wrapper{opacity:.75}.unlock-panel .unlock-panel-footer .unlock-panel-footer-image{margin:-24px 24px -24px -24px;pointer-events:none}.unlock-panel .unlock-panel-footer .unlock-panel-footer-wrapper{display:flex;flex:1;flex-direction:column;gap:16px;transition:all .2s}.unlock-panel .unlock-panel-footer .unlock-panel-footer-wrapper .unlock-panel-footer-title{color:#f5f5f5;font-size:24px;font-weight:500;line-height:1}.unlock-panel .unlock-panel-footer .unlock-panel-footer-wrapper .unlock-panel-footer-subtitle{color:#737373;font-size:20px;line-height:1.25}.unlock-panel .unlock-panel-footer .unlock-panel-footer-wrapper .unlock-panel-footer-icon{margin-left:auto;margin-top:auto}.unlock-panel .unlock-panel-footer .unlock-panel-footer-wrapper .unlock-panel-footer-icon svg{height:auto;width:16px}";

const DEFAULT_ALLOWED_PROVIDERS = Object.values(provider_types.ProviderTypeEnum);
const UnlockPanel = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.close = index.createEvent(this, "close", 7);
        this.login = index.createEvent(this, "login", 7);
        this.eventBus = new EventBus.EventBus();
        this.isOpen = false;
        this.allowedProviders = DEFAULT_ALLOWED_PROVIDERS;
        this.isLoggingIn = false;
        this.isIntroScreenVisible = false;
        this.selectedMethod = null;
        this.hasSlotContent = false;
        this.panelState = {
            isOpen: false,
            allowedProviders: DEFAULT_ALLOWED_PROVIDERS,
        };
        this.anchor = null;
        this.observer = null;
    }
    async getEventBus() {
        return this.eventBus;
    }
    handleIsOpenChange(newValue) {
        this.panelState = Object.assign(Object.assign({}, this.panelState), { isOpen: newValue });
    }
    handleAllowedProvidersChange(newValue) {
        this.panelState = Object.assign(Object.assign({}, this.panelState), { allowedProviders: newValue !== null && newValue !== void 0 ? newValue : DEFAULT_ALLOWED_PROVIDERS });
    }
    isExtensionInstalled(currentProvider) {
        return currentProvider === provider_types.ProviderTypeEnum.extension && getIsMetaMaskAvailable.getIsExtensionAvailable();
    }
    isMetaMaskInstalled(currentProvider) {
        return currentProvider === provider_types.ProviderTypeEnum.metamask && getIsMetaMaskAvailable.getIsMetaMaskAvailable();
    }
    async disconnectedCallback() {
        if (this.observer) {
            this.observer.disconnect();
            this.observer = null;
        }
        this.eventBus.unsubscribe(UnlockPanelEventsEnum.OPEN, this.unlockPanelUpdate.bind(this));
        this.isLoggingIn = false;
        this.selectedMethod = null;
        this.panelState = { isOpen: false, allowedProviders: DEFAULT_ALLOWED_PROVIDERS };
        return new Promise(resolve => setTimeout(resolve, 300));
    }
    observeContainer(element) {
        if (!element) {
            return;
        }
        this.anchor = element;
        if (this.observer) {
            this.observer.disconnect();
        }
        this.observer = new MutationObserver(() => {
            this.isLoggingIn = element.childElementCount > 0;
        });
        this.observer.observe(element, { childList: true, subtree: true });
    }
    handleLogin(provider) {
        this.eventBus.publish(UnlockPanelEventsEnum.LOGIN, { type: provider, anchor: this.anchor });
        this.selectedMethod = provider;
        switch (provider) {
            case provider_types.ProviderTypeEnum.ledger:
                this.isIntroScreenVisible = true;
                break;
            default:
                this.handleAccess();
        }
    }
    handleResetLoginState(event) {
        event.preventDefault();
        this.isLoggingIn = false;
        this.isIntroScreenVisible = false;
        this.selectedMethod = null;
        if (!this.anchor) {
            return;
        }
        while (this.anchor.firstChild) {
            this.anchor.removeChild(this.anchor.firstChild);
        }
        this.eventBus.publish(UnlockPanelEventsEnum.CANCEL_LOGIN);
    }
    handleClose(event) {
        event.preventDefault();
        if (this.selectedMethod) {
            this.eventBus.publish(UnlockPanelEventsEnum.CANCEL_LOGIN);
        }
        this.eventBus.publish(UnlockPanelEventsEnum.CLOSE);
    }
    handleAccess() {
        this.isIntroScreenVisible = false;
        this.isLoggingIn = true;
        this.login.emit({ provider: this.selectedMethod, anchor: this.anchor });
    }
    render() {
        const detectedProviders = this.panelState.allowedProviders.filter(allowedProvider => this.isExtensionInstalled(allowedProvider) || this.isMetaMaskInstalled(allowedProvider));
        const otherProviders = this.panelState.allowedProviders.filter(allowedProvider => !detectedProviders.includes(allowedProvider));
        const panelTitle = this.selectedMethod ? provider_types.ProviderLabelsEnum[this.selectedMethod] : 'Connect your wallet';
        const hasDetectedProviders = detectedProviders.length > 0;
        return (index.h("mvx-side-panel", { key: '6f8ee2b74d7f119124491bf9e2a80d89680d9f7e', isOpen: this.panelState.isOpen, panelTitle: panelTitle, withBackButton: this.isLoggingIn, onClose: this.handleClose.bind(this), onBack: this.handleResetLoginState.bind(this) }, index.h("div", { key: '06f67fbed4f5b63b02f7a9a52374dccb288fd89e', id: "anchor", ref: element => this.observeContainer(element), class: { 'unlock-panel-anchor': this.isLoggingIn } }), this.isIntroScreenVisible && index.h("mvx-unlock-provider-intro", { key: 'fab94eb622d27357c94ca092f481ce327db88398', provider: this.selectedMethod, onAccess: this.handleAccess.bind(this) }), !this.isLoggingIn && !this.isIntroScreenVisible && (index.h("div", { key: 'd57f66ce310eb15d0a0517b8ba9cd26a7df4eb60', class: "unlock-panel" }, index.h("div", { key: 'a6e8ba7860c767f0d074f327c2594caf9229bbcb', class: "unlock-panel-groups" }, hasDetectedProviders && (index.h("div", { key: '6a617926802ac1f0cd150b15712a48f24bb1166c', class: "unlock-panel-group" }, index.h("div", { key: '4da45982432ad1f31a4185de49c10198261b390f', class: "unlock-panel-group-label" }, "Detected"), index.h("div", { key: 'ddd514e4a7311b4e4dce19d484d234d5eab78289', class: "unlock-panel-group-providers" }, detectedProviders.map((provider, providerIndex) => (index.h("mvx-unlock-provider-button", { type: provider, onClick: this.handleLogin.bind(this, provider), class: index$1.classNames('unlock-panel-group-provider', {
                first: providerIndex === 0,
                last: providerIndex === detectedProviders.length - 1,
            }) })))))), index.h("div", { key: '3deb1fa6dae9f564a50ce4cb5116099475710d40', class: "unlock-panel-group" }, index.h("div", { key: '8b3da87444c513b2755de4e62cf86db85929d17c', class: "unlock-panel-group-label" }, hasDetectedProviders ? 'Other Options' : 'Options'), index.h("div", { key: '16b3e74b5bf359c15e8f99ec5dae366280af7fa2', class: "unlock-panel-group-providers" }, otherProviders.map((provider, providerIndex) => (index.h("mvx-unlock-provider-button", { type: provider, onClick: this.handleLogin.bind(this, provider), class: index$1.classNames('unlock-panel-group-provider', {
                first: providerIndex === 0,
                last: providerIndex === otherProviders.length - 1,
            }) }))), index.h("slot", { key: '2b697ba5e0bd54b094d50603b7bec49fb3e15ed2' })))), index.h("div", { key: 'dcd574870a4a24fa3f02b5b4964c44753081d3c2', class: "unlock-panel-footer" }, index.h("img", { key: 'dabe5db6be79487c78776804aab34a9e6e40c231', src: processImgSrc.processImgSrc('unlock-panel-wallet.png'), class: "unlock-panel-footer-image" }), index.h("div", { key: 'bedb8591f7b813ececff4838b8fde7d2c8c89598', class: "unlock-panel-footer-wrapper" }, index.h("div", { key: 'fc478933e0df8a3e9f2b2d28c556be78aca9679b', class: "unlock-panel-footer-title" }, "Don't have a wallet?"), index.h("div", { key: '824c4d97f55299eb49fb14b35dc84cd69561e7f3', class: "unlock-panel-footer-subtitle" }, "Take full control of ", index.h("br", { key: 'ddc0da7f702dcda6753beaa5fa748f316cf31318' }), " your assets."), index.h("mvx-arrow-up-right-icon", { key: 'cc5233d90af4b71c6f0ed4fe6bfbd442ab964332', class: "unlock-panel-footer-icon" })))))));
    }
    componentDidLoad() {
        this.eventBus.subscribe(UnlockPanelEventsEnum.OPEN, this.unlockPanelUpdate.bind(this));
    }
    unlockPanelUpdate(payload) {
        var _a;
        this.panelState = Object.assign(Object.assign({}, payload), { allowedProviders: (_a = payload.allowedProviders) !== null && _a !== void 0 ? _a : DEFAULT_ALLOWED_PROVIDERS });
    }
    get hostElement() { return index.getElement(this); }
    static get watchers() { return {
        "isOpen": ["handleIsOpenChange"],
        "allowedProviders": ["handleAllowedProvidersChange"]
    }; }
};
UnlockPanel.style = unlockPanelCss;

exports.mvx_unlock_panel = UnlockPanel;
//# sourceMappingURL=mvx-unlock-panel.entry.cjs.js.map

//# sourceMappingURL=mvx-unlock-panel.cjs.entry.js.map