@konemono/nostr-login-components 1.0.4

package/dist/components/nl-auth2.js

@@ -0,0 +1,352 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { C as CURRENT_MODULE } from './index2.js';
+import { s as state } from './index3.js';
+import { d as defineCustomElement$m } from './button-base2.js';
+import { d as defineCustomElement$l } from './nl-confirm-logout2.js';
+import { d as defineCustomElement$k } from './nl-connect2.js';
+import { d as defineCustomElement$j } from './nl-iframe2.js';
+import { d as defineCustomElement$i } from './nl-import-flow2.js';
+import { d as defineCustomElement$h } from './nl-info2.js';
+import { d as defineCustomElement$g } from './nl-info-extension2.js';
+import { d as defineCustomElement$f } from './nl-loading2.js';
+import { d as defineCustomElement$e } from './nl-local-signup2.js';
+import { d as defineCustomElement$d } from './ns-login-status.js';
+import { d as defineCustomElement$c } from './nl-otp-migrate2.js';
+import { d as defineCustomElement$b } from './nl-previously-logged2.js';
+import { d as defineCustomElement$a } from './nl-select2.js';
+import { d as defineCustomElement$9 } from './nl-signin2.js';
+import { d as defineCustomElement$8 } from './nl-signin-bunker-url2.js';
+import { d as defineCustomElement$7 } from './nl-signin-connection-string2.js';
+import { d as defineCustomElement$6 } from './nl-signin-otp2.js';
+import { d as defineCustomElement$5 } from './nl-signin-read-only2.js';
+import { d as defineCustomElement$4 } from './nl-signup2.js';
+import { d as defineCustomElement$3 } from './nl-welcome2.js';
+import { d as defineCustomElement$2 } from './nl-welcome-signin2.js';
+import { d as defineCustomElement$1 } from './nl-welcome-signup2.js';
+
+import { baseCss } from './css.js';
+const nlAuthCss = baseCss;
+
+const NlAuthStyle0 = nlAuthCss;
+
+const NlAuth = /*@__PURE__*/ proxyCustomElement(class NlAuth extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nlCloseModal = createEvent(this, "nlCloseModal", 7);
+        this.nlChangeDarkMode = createEvent(this, "nlChangeDarkMode", 7);
+        this.nlNostrConnectDefaultCancel = createEvent(this, "nlNostrConnectDefaultCancel", 7);
+        this.prevPath = '';
+        this.theme = 'default';
+        this.bunkers = '';
+        this.startScreen = CURRENT_MODULE.WELCOME;
+        this.authMethods = [];
+        this.hasExtension = false;
+        this.hasOTP = false;
+        this.isLoading = false;
+        this.isLoadingExtension = false;
+        this.isOTP = false;
+        this.authUrl = '';
+        this.iframeUrl = '';
+        this.error = '';
+        this.localSignup = false;
+        this.signupNjump = false;
+        this.njumpIframe = '';
+        this.accounts = [];
+        this.recents = [];
+        this.darkMode = false;
+        this.welcomeTitle = '';
+        this.welcomeDescription = '';
+        this.connectionString = '';
+        this.connectionStringServices = [];
+    }
+    watchLoadingHandler(newValue) {
+        state.isLoading = newValue;
+    }
+    watchLoadingExtensionHandler(newValue) {
+        state.isLoadingExtension = newValue;
+    }
+    watchOTPHandler(newValue) {
+        state.isOTP = newValue;
+    }
+    watchAuthUrlHandler(newValue) {
+        state.authUrl = newValue;
+    }
+    watchIframeUrlHandler(newValue) {
+        state.iframeUrl = newValue;
+    }
+    watchNjumpIframeHandler(newValue) {
+        state.njumpIframe = newValue;
+    }
+    watchErrorHandler(newValue) {
+        state.error = newValue;
+    }
+    handleClose() {
+        this.nlCloseModal.emit();
+    }
+    handleChangeDarkMode() {
+        this.nlChangeDarkMode.emit(!this.darkMode);
+    }
+    componentWillLoad() {
+        // init state
+        state.path = [this.startScreen];
+        state.error = '';
+        state.iframeUrl = '';
+        state.authUrl = '';
+        state.isLoading = false;
+        state.isLoadingExtension = false;
+        state.isOTP = false;
+        console.log('path', state.path);
+    }
+    handleClickToBack() {
+        state.path.pop();
+        state.path = [...state.path];
+        // reset
+        state.isLoading = false;
+        state.isLoadingExtension = false;
+        state.authUrl = '';
+        state.isOTP = false;
+    }
+    switchSignSignUpStrategy(str) {
+        if (CURRENT_MODULE.LOCAL_SIGNUP === str) {
+            state.path = [CURRENT_MODULE.WELCOME, CURRENT_MODULE.WELCOME_SIGNUP, str];
+            return;
+        }
+        state.path = [CURRENT_MODULE.WELCOME, str];
+    }
+    render() {
+        const classWrapper = `w-full h-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto flex items-center ${this.darkMode ? 'dark' : ''}`;
+        const currentModule = state.path.at(-1);
+        if (currentModule !== this.prevPath && this.prevPath === CURRENT_MODULE.CONNECTION_STRING) {
+            this.nlNostrConnectDefaultCancel.emit();
+        }
+        this.prevPath = currentModule;
+        const renderModule = () => {
+            if (state.isOTP)
+                return h("nl-signin-otp", null);
+            // @ts-ignore
+            // const t: CURRENT_MODULE = 'import' // lastValuePath
+            switch (currentModule) {
+                case CURRENT_MODULE.WELCOME:
+                    return h("nl-welcome", { titleWelcome: this.welcomeTitle || undefined, description: this.welcomeDescription || undefined });
+                case CURRENT_MODULE.LOGIN:
+                    return h("nl-signin", null);
+                case CURRENT_MODULE.SIGNUP:
+                    return h("nl-signup", { bunkers: this.bunkers });
+                case CURRENT_MODULE.LOCAL_SIGNUP:
+                    return h("nl-local-signup", { signupNjump: this.signupNjump });
+                case CURRENT_MODULE.CONFIRM_LOGOUT:
+                    return h("nl-confirm-logout", null);
+                case CURRENT_MODULE.IMPORT_FLOW:
+                    return h("nl-import-flow", { services: this.connectionStringServices });
+                case CURRENT_MODULE.IMPORT_OTP:
+                    return h("nl-otp-migrate", { services: this.connectionStringServices });
+                case CURRENT_MODULE.INFO:
+                    return h("nl-info", null);
+                case CURRENT_MODULE.EXTENSION:
+                    return h("nl-info-extension", null);
+                case CURRENT_MODULE.LOGIN_READ_ONLY:
+                    return h("nl-signin-read-only", null);
+                case CURRENT_MODULE.LOGIN_BUNKER_URL:
+                    return h("nl-signin-bunker-url", null);
+                case CURRENT_MODULE.LOGIN_OTP:
+                    return h("nl-signin-otp", null);
+                case CURRENT_MODULE.WELCOME_LOGIN:
+                    return h("nl-welcome-signin", { hasOTP: this.hasOTP, authMethods: this.authMethods, hasExtension: this.hasExtension });
+                case CURRENT_MODULE.WELCOME_SIGNUP:
+                    return h("nl-welcome-signup", null);
+                case CURRENT_MODULE.CONNECTION_STRING:
+                    return h("nl-signin-connection-string", { connectionString: this.connectionString });
+                case CURRENT_MODULE.CONNECT:
+                    return h("nl-connect", { connectionStringServices: this.connectionStringServices, authMethods: this.authMethods });
+                case CURRENT_MODULE.PREVIOUSLY_LOGGED:
+                    return h("nl-previously-logged", { accounts: this.accounts, recents: this.recents });
+                case CURRENT_MODULE.IFRAME:
+                    return h("nl-iframe", { iframeUrl: this.authUrl });
+                default:
+                    return h("nl-welcome", null);
+            }
+        };
+        const showLogin = state.isOTP ||
+            (currentModule !== CURRENT_MODULE.INFO &&
+                currentModule !== CURRENT_MODULE.CONFIRM_LOGOUT &&
+                currentModule !== CURRENT_MODULE.IMPORT_FLOW &&
+                currentModule !== CURRENT_MODULE.WELCOME &&
+                currentModule !== CURRENT_MODULE.EXTENSION &&
+                currentModule !== CURRENT_MODULE.IFRAME &&
+                currentModule !== CURRENT_MODULE.PREVIOUSLY_LOGGED);
+        const showSignup = currentModule !== CURRENT_MODULE.IFRAME &&
+            (!this.authMethods.length || (!this.localSignup && this.authMethods.includes('connect')) || (this.localSignup && this.authMethods.includes('local')));
+        return (h("div", { class: `theme-${this.theme}`, dir: "ltr" }, h("div", { class: classWrapper }, h("div", { onClick: () => this.handleClose(), class: "absolute top-0 left-0 w-full h-full bg-gray-500 bg-opacity-75 z-[80]" }), h("div", { class: "nl-bg relative z-[81] w-full flex flex-col rounded-xl sm:max-w-lg sm:w-full sm:mx-auto" }, h("div", { class: `flex justify-between items-center py-3 px-4` }, h("div", { class: "flex gap-2 items-center" }, h("svg", { class: "w-7 h-7", width: "225", height: "224", viewBox: "0 0 225 224", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "224.047", height: "224", rx: "64", fill: "#6951FA" }), h("path", { d: "M162.441 135.941V88.0593C170.359 85.1674 176 77.5348 176 68.6696C176 57.2919 166.708 48 155.33 48C143.953 48 134.661 57.2444 134.661 68.6696C134.661 77.5822 140.302 85.1674 148.219 88.0593V135.941C147.698 136.13 147.176 136.367 146.655 136.604L87.3956 77.3452C88.6282 74.6904 89.2919 71.7511 89.2919 68.6696C89.2919 57.2444 80.0474 48 68.6696 48C57.2919 48 48 57.2444 48 68.6696C48 77.5822 53.6415 85.1674 61.5585 88.0593V135.941C53.6415 138.833 48 146.465 48 155.33C48 166.708 57.2444 176 68.6696 176C80.0948 176 89.3393 166.708 89.3393 155.33C89.3393 146.418 83.6978 138.833 75.7807 135.941V88.0593C76.3022 87.8696 76.8237 87.6326 77.3452 87.3956L136.604 146.655C135.372 149.31 134.708 152.249 134.708 155.33C134.708 166.708 143.953 176 155.378 176C166.803 176 176.047 166.708 176.047 155.33C176.047 146.418 170.406 138.833 162.489 135.941H162.441Z", fill: "white" })), h("p", { class: "font-bold nl-logo text-base" }, "Nostr ", h("span", { class: "font-light" }, "Login"))), h("div", { class: "flex gap-1" }, h("button", { onClick: () => this.handleChangeDarkMode(), type: "button", class: "nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent" }, h("span", { class: "sr-only" }, "Change theme"), this.darkMode ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "flex-shrink-0 w-5 h-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "flex-shrink-0 w-5 h-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" })))), !state.isLoading && (h("button", { onClick: () => (state.path = [...state.path, CURRENT_MODULE.INFO]), type: "button", class: "nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent" }, h("span", { class: "sr-only" }, "Info"), h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "flex-shrink-0 w-5 h-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" })))), h("button", { onClick: () => this.handleClose(), type: "button", class: "nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent" }, h("span", { class: "sr-only" }, "Close"), h("svg", { class: "flex-shrink-0 w-5 h-5", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M18 6 6 18" }), h("path", { d: "m6 6 12 12" }))))), state.path.length > 1 && !state.isLoading && (h("div", { class: "p-4" }, h("button", { onClick: () => this.handleClickToBack(), type: "button", class: "nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent  dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600", "data-hs-overlay": "#hs-vertically-centered-modal" }, h("span", { class: "sr-only" }, "Back"), h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "flex-shrink-0 w-5 h-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" }))))), state.isLoading || state.authUrl ? (h("nl-loading", { path: currentModule })) : (h(Fragment, null, renderModule(), showLogin && (h(Fragment, null, currentModule === CURRENT_MODULE.WELCOME_SIGNUP || currentModule === CURRENT_MODULE.SIGNUP || currentModule === CURRENT_MODULE.LOCAL_SIGNUP ? (h("div", { class: "p-4 overflow-y-auto" }, h("p", { class: "nl-footer font-light text-center text-sm pt-3 max-w-96 mx-auto" }, "If you already have a profile please", ' ', h("span", { onClick: () => this.switchSignSignUpStrategy(CURRENT_MODULE.WELCOME_LOGIN), class: "cursor-pointer text-blue-400" }, "log in"), "."))) : (showSignup && (h("div", { class: "p-4 overflow-y-auto" }, h("p", { class: "nl-footer font-light text-center text-sm pt-3 max-w-96 mx-auto" }, "If you don't have a profile please", ' ', h("span", { onClick: () => this.localSignup ? this.switchSignSignUpStrategy(CURRENT_MODULE.LOCAL_SIGNUP) : this.switchSignSignUpStrategy(CURRENT_MODULE.WELCOME_SIGNUP), class: "cursor-pointer text-blue-400" }, "sign up"), "."))))))))))));
+    }
+    static get watchers() { return {
+        "isLoading": ["watchLoadingHandler"],
+        "isLoadingExtension": ["watchLoadingExtensionHandler"],
+        "isOTP": ["watchOTPHandler"],
+        "authUrl": ["watchAuthUrlHandler"],
+        "iframeUrl": ["watchIframeUrlHandler"],
+        "njumpIframe": ["watchNjumpIframeHandler"],
+        "error": ["watchErrorHandler"]
+    }; }
+    static get style() { return NlAuthStyle0; }
+}, [1, "nl-auth", {
+        "theme": [1025],
+        "bunkers": [1],
+        "startScreen": [1, "start-screen"],
+        "authMethods": [16],
+        "hasExtension": [4, "has-extension"],
+        "hasOTP": [4, "has-o-t-p"],
+        "isLoading": [4, "is-loading"],
+        "isLoadingExtension": [4, "is-loading-extension"],
+        "isOTP": [4, "is-o-t-p"],
+        "authUrl": [1, "auth-url"],
+        "iframeUrl": [1, "iframe-url"],
+        "error": [1],
+        "localSignup": [4, "local-signup"],
+        "signupNjump": [4, "signup-njump"],
+        "njumpIframe": [1, "njump-iframe"],
+        "accounts": [1040],
+        "recents": [1040],
+        "darkMode": [1028, "dark-mode"],
+        "welcomeTitle": [1, "welcome-title"],
+        "welcomeDescription": [1, "welcome-description"],
+        "connectionString": [1, "connection-string"],
+        "connectionStringServices": [16]
+    }, undefined, {
+        "isLoading": ["watchLoadingHandler"],
+        "isLoadingExtension": ["watchLoadingExtensionHandler"],
+        "isOTP": ["watchOTPHandler"],
+        "authUrl": ["watchAuthUrlHandler"],
+        "iframeUrl": ["watchIframeUrlHandler"],
+        "njumpIframe": ["watchNjumpIframeHandler"],
+        "error": ["watchErrorHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nl-auth", "button-base", "nl-confirm-logout", "nl-connect", "nl-iframe", "nl-import-flow", "nl-info", "nl-info-extension", "nl-loading", "nl-local-signup", "nl-login-status", "nl-otp-migrate", "nl-previously-logged", "nl-select", "nl-signin", "nl-signin-bunker-url", "nl-signin-connection-string", "nl-signin-otp", "nl-signin-read-only", "nl-signup", "nl-welcome", "nl-welcome-signin", "nl-welcome-signup"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nl-auth":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NlAuth);
+            }
+            break;
+        case "button-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "nl-confirm-logout":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "nl-connect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "nl-iframe":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "nl-import-flow":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "nl-info":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "nl-info-extension":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "nl-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "nl-local-signup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "nl-login-status":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "nl-otp-migrate":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "nl-previously-logged":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "nl-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "nl-signin":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "nl-signin-bunker-url":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "nl-signin-connection-string":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "nl-signin-otp":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "nl-signin-read-only":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "nl-signup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "nl-welcome":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nl-welcome-signin":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "nl-welcome-signup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { NlAuth as N, defineCustomElement as d };
+
+//# sourceMappingURL=nl-auth2.js.map

package/dist/components/nl-auth2.js.map

@@ -0,0 +1 @@
+{"file":"nl-auth2.js","mappings":"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","names":[],"sources":["src/components/nl-auth/nl-auth.css?tag=nl-auth&encapsulation=shadow","src/components/nl-auth/nl-auth.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Event, EventEmitter, Fragment, h, Prop, Watch } from '@stencil/core';\nimport { AuthMethod, ConnectionString, CURRENT_MODULE, Info, NlTheme, RecentType } from '@/types';\nimport { state } from '@/store';\n\n@Component({\n  tag: 'nl-auth',\n  styleUrl: 'nl-auth.css',\n  shadow: true,\n})\nexport class NlAuth {\n  @Prop({ mutable: true }) theme: NlTheme = 'default';\n  @Prop() bunkers: string = '';\n  @Prop() startScreen: string = CURRENT_MODULE.WELCOME;\n  @Prop() authMethods: AuthMethod[] = [];\n  @Prop() hasExtension: boolean = false;\n  @Prop() hasOTP: boolean = false;\n  @Prop() isLoading: boolean = false;\n  @Prop() isLoadingExtension: boolean = false;\n  @Prop() isOTP: boolean = false;\n  @Prop() authUrl: string = '';\n  @Prop() iframeUrl: string = '';\n  @Prop() error: string = '';\n  @Prop() localSignup: boolean = false;\n  @Prop() signupNjump: boolean = false;\n  @Prop() njumpIframe: string = '';\n  @Prop({ mutable: true }) accounts: Info[] = [];\n  @Prop({ mutable: true }) recents: RecentType[] = [];\n  @Prop({ mutable: true }) darkMode: boolean = false;\n  @Prop() welcomeTitle: string = '';\n  @Prop() welcomeDescription: string = '';\n  @Prop() connectionString: string = '';\n  @Prop() connectionStringServices: ConnectionString[] = [];\n\n  @Event() nlCloseModal: EventEmitter;\n  @Event() nlChangeDarkMode: EventEmitter<boolean>;\n  @Event() nlNostrConnectDefaultCancel: EventEmitter<void>;\n\n  prevPath: string = '';\n\n  @Watch('isLoading')\n  watchLoadingHandler(newValue: boolean) {\n    state.isLoading = newValue;\n  }\n\n  @Watch('isLoadingExtension')\n  watchLoadingExtensionHandler(newValue: boolean) {\n    state.isLoadingExtension = newValue;\n  }\n\n  @Watch('isOTP')\n  watchOTPHandler(newValue: boolean) {\n    state.isOTP = newValue;\n  }\n\n  @Watch('authUrl')\n  watchAuthUrlHandler(newValue: string) {\n    state.authUrl = newValue;\n  }\n\n  @Watch('iframeUrl')\n  watchIframeUrlHandler(newValue: string) {\n    state.iframeUrl = newValue;\n  }\n\n  @Watch('njumpIframe')\n  watchNjumpIframeHandler(newValue: string) {\n    state.njumpIframe = newValue;\n  }\n\n  @Watch('error')\n  watchErrorHandler(newValue: string) {\n    state.error = newValue;\n  }\n\n  handleClose() {\n    this.nlCloseModal.emit();\n  }\n\n  handleChangeDarkMode() {\n    this.nlChangeDarkMode.emit(!this.darkMode);\n  }\n\n  componentWillLoad() {\n    // init state\n    state.path = [this.startScreen as CURRENT_MODULE];\n    state.error = '';\n    state.iframeUrl = '';\n    state.authUrl = '';\n    state.isLoading = false;\n    state.isLoadingExtension = false;\n    state.isOTP = false;\n\n    console.log('path', state.path);\n  }\n\n  handleClickToBack() {\n    state.path.pop();\n    state.path = [...state.path];\n\n    // reset\n    state.isLoading = false;\n    state.isLoadingExtension = false;\n    state.authUrl = '';\n    state.isOTP = false;\n  }\n\n  switchSignSignUpStrategy(str: CURRENT_MODULE) {\n    if (CURRENT_MODULE.LOCAL_SIGNUP === str) {\n      state.path = [CURRENT_MODULE.WELCOME, CURRENT_MODULE.WELCOME_SIGNUP, str];\n\n      return;\n    }\n\n    state.path = [CURRENT_MODULE.WELCOME, str];\n  }\n\n  render() {\n    const classWrapper = `w-full h-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto flex items-center ${this.darkMode ? 'dark' : ''}`;\n    const currentModule = state.path.at(-1);\n\n    if (currentModule !== this.prevPath && this.prevPath === CURRENT_MODULE.CONNECTION_STRING) {\n      this.nlNostrConnectDefaultCancel.emit();\n    }\n    this.prevPath = currentModule;\n\n    const renderModule = () => {\n      if (state.isOTP) return <nl-signin-otp />;\n\n      // @ts-ignore\n      // const t: CURRENT_MODULE = 'import' // lastValuePath\n\n      switch (currentModule) {\n        case CURRENT_MODULE.WELCOME:\n          return <nl-welcome titleWelcome={this.welcomeTitle || undefined} description={this.welcomeDescription || undefined} />;\n        case CURRENT_MODULE.LOGIN:\n          return <nl-signin />;\n        case CURRENT_MODULE.SIGNUP:\n          return <nl-signup bunkers={this.bunkers} />;\n        case CURRENT_MODULE.LOCAL_SIGNUP:\n          return <nl-local-signup signupNjump={this.signupNjump} />;\n        case CURRENT_MODULE.CONFIRM_LOGOUT:\n          return <nl-confirm-logout />;\n        case CURRENT_MODULE.IMPORT_FLOW:\n          return <nl-import-flow services={this.connectionStringServices} />;\n        case CURRENT_MODULE.IMPORT_OTP:\n          return <nl-otp-migrate services={this.connectionStringServices} />;\n        case CURRENT_MODULE.INFO:\n          return <nl-info />;\n        case CURRENT_MODULE.EXTENSION:\n          return <nl-info-extension />;\n        case CURRENT_MODULE.LOGIN_READ_ONLY:\n          return <nl-signin-read-only />;\n        case CURRENT_MODULE.LOGIN_BUNKER_URL:\n          return <nl-signin-bunker-url />;\n        case CURRENT_MODULE.LOGIN_OTP:\n          return <nl-signin-otp />;\n        case CURRENT_MODULE.WELCOME_LOGIN:\n          return <nl-welcome-signin hasOTP={this.hasOTP} authMethods={this.authMethods} hasExtension={this.hasExtension} />;\n        case CURRENT_MODULE.WELCOME_SIGNUP:\n          return <nl-welcome-signup />;\n        case CURRENT_MODULE.CONNECTION_STRING:\n          return <nl-signin-connection-string connectionString={this.connectionString} />;\n        case CURRENT_MODULE.CONNECT:\n          return <nl-connect connectionStringServices={this.connectionStringServices} authMethods={this.authMethods} />;\n        case CURRENT_MODULE.PREVIOUSLY_LOGGED:\n          return <nl-previously-logged accounts={this.accounts} recents={this.recents} />;\n        case CURRENT_MODULE.IFRAME:\n          return <nl-iframe iframeUrl={this.authUrl} />;\n        default:\n          return <nl-welcome />;\n      }\n    };\n\n    const showLogin =\n      state.isOTP ||\n      (currentModule !== CURRENT_MODULE.INFO &&\n        currentModule !== CURRENT_MODULE.CONFIRM_LOGOUT &&\n        currentModule !== CURRENT_MODULE.IMPORT_FLOW &&\n        currentModule !== CURRENT_MODULE.WELCOME &&\n        currentModule !== CURRENT_MODULE.EXTENSION &&\n        currentModule !== CURRENT_MODULE.IFRAME &&\n        currentModule !== CURRENT_MODULE.PREVIOUSLY_LOGGED);\n\n    const showSignup =\n      currentModule !== CURRENT_MODULE.IFRAME &&\n      (!this.authMethods.length || (!this.localSignup && this.authMethods.includes('connect')) || (this.localSignup && this.authMethods.includes('local')));\n\n    return (\n      <div class={`theme-${this.theme}`} dir=\"ltr\">\n        <div class={classWrapper}>\n          <div onClick={() => this.handleClose()} class=\"absolute top-0 left-0 w-full h-full bg-gray-500 bg-opacity-75 z-[80]\" />\n\n          <div class=\"nl-bg relative z-[81] w-full flex flex-col rounded-xl sm:max-w-lg sm:w-full sm:mx-auto\">\n            <div class={`flex justify-between items-center py-3 px-4`}>\n              <div class=\"flex gap-2 items-center\">\n                <svg class=\"w-7 h-7\" width=\"225\" height=\"224\" viewBox=\"0 0 225 224\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect width=\"224.047\" height=\"224\" rx=\"64\" fill=\"#6951FA\" />\n                  <path\n                    d=\"M162.441 135.941V88.0593C170.359 85.1674 176 77.5348 176 68.6696C176 57.2919 166.708 48 155.33 48C143.953 48 134.661 57.2444 134.661 68.6696C134.661 77.5822 140.302 85.1674 148.219 88.0593V135.941C147.698 136.13 147.176 136.367 146.655 136.604L87.3956 77.3452C88.6282 74.6904 89.2919 71.7511 89.2919 68.6696C89.2919 57.2444 80.0474 48 68.6696 48C57.2919 48 48 57.2444 48 68.6696C48 77.5822 53.6415 85.1674 61.5585 88.0593V135.941C53.6415 138.833 48 146.465 48 155.33C48 166.708 57.2444 176 68.6696 176C80.0948 176 89.3393 166.708 89.3393 155.33C89.3393 146.418 83.6978 138.833 75.7807 135.941V88.0593C76.3022 87.8696 76.8237 87.6326 77.3452 87.3956L136.604 146.655C135.372 149.31 134.708 152.249 134.708 155.33C134.708 166.708 143.953 176 155.378 176C166.803 176 176.047 166.708 176.047 155.33C176.047 146.418 170.406 138.833 162.489 135.941H162.441Z\"\n                    fill=\"white\"\n                  />\n                </svg>\n                <p class=\"font-bold nl-logo text-base\">\n                  Nostr <span class=\"font-light\">Login</span>\n                </p>\n              </div>\n\n              <div class=\"flex gap-1\">\n                <button\n                  onClick={() => this.handleChangeDarkMode()}\n                  type=\"button\"\n                  class=\"nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent\"\n                >\n                  <span class=\"sr-only\">Change theme</span>\n                  {this.darkMode ? (\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"flex-shrink-0 w-5 h-5\">\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z\"\n                      />\n                    </svg>\n                  ) : (\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"flex-shrink-0 w-5 h-5\">\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z\"\n                      />\n                    </svg>\n                  )}\n                </button>\n                {!state.isLoading && (\n                  <button\n                    onClick={() => (state.path = [...state.path, CURRENT_MODULE.INFO])}\n                    type=\"button\"\n                    class=\"nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent\"\n                  >\n                    <span class=\"sr-only\">Info</span>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"flex-shrink-0 w-5 h-5\">\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"\n                      />\n                    </svg>\n                  </button>\n                )}\n                <button\n                  onClick={() => this.handleClose()}\n                  type=\"button\"\n                  class=\"nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent\"\n                >\n                  <span class=\"sr-only\">Close</span>\n                  <svg\n                    class=\"flex-shrink-0 w-5 h-5\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  >\n                    <path d=\"M18 6 6 18\" />\n                    <path d=\"m6 6 12 12\" />\n                  </svg>\n                </button>\n              </div>\n            </div>\n            {state.path.length > 1 && !state.isLoading && (\n              <div class=\"p-4\">\n                <button\n                  onClick={() => this.handleClickToBack()}\n                  type=\"button\"\n                  class=\"nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent  dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600\"\n                  data-hs-overlay=\"#hs-vertically-centered-modal\"\n                >\n                  <span class=\"sr-only\">Back</span>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"flex-shrink-0 w-5 h-5\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18\" />\n                  </svg>\n                </button>\n              </div>\n            )}\n            {state.isLoading || state.authUrl ? (\n              <nl-loading path={currentModule} />\n            ) : (\n              <Fragment>\n                {renderModule()}\n                {showLogin && (\n                  <Fragment>\n                    {currentModule === CURRENT_MODULE.WELCOME_SIGNUP || currentModule === CURRENT_MODULE.SIGNUP || currentModule === CURRENT_MODULE.LOCAL_SIGNUP ? (\n                      <div class=\"p-4 overflow-y-auto\">\n                        <p class=\"nl-footer font-light text-center text-sm pt-3 max-w-96 mx-auto\">\n                          If you already have a profile please{' '}\n                          <span onClick={() => this.switchSignSignUpStrategy(CURRENT_MODULE.WELCOME_LOGIN)} class=\"cursor-pointer text-blue-400\">\n                            log in\n                          </span>\n                          .\n                        </p>\n                      </div>\n                    ) : (\n                      showSignup && (\n                        <div class=\"p-4 overflow-y-auto\">\n                          <p class=\"nl-footer font-light text-center text-sm pt-3 max-w-96 mx-auto\">\n                            If you don't have a profile please{' '}\n                            <span\n                              onClick={() =>\n                                this.localSignup ? this.switchSignSignUpStrategy(CURRENT_MODULE.LOCAL_SIGNUP) : this.switchSignSignUpStrategy(CURRENT_MODULE.WELCOME_SIGNUP)\n                              }\n                              class=\"cursor-pointer text-blue-400\"\n                            >\n                              sign up\n                            </span>\n                            .\n                          </p>\n                        </div>\n                      )\n                    )}\n                  </Fragment>\n                )}\n              </Fragment>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nl-banner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NlBanner extends Components.NlBanner, HTMLElement {}
+export const NlBanner: {
+    prototype: NlBanner;
+    new (): NlBanner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nl-banner.js

@@ -0,0 +1,8 @@
+import { N as NlBanner$1, d as defineCustomElement$1 } from './nl-banner2.js';
+
+const NlBanner = NlBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NlBanner, defineCustomElement };
+
+//# sourceMappingURL=nl-banner.js.map

package/dist/components/nl-banner.js.map

@@ -0,0 +1 @@
+{"file":"nl-banner.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nl-banner2.js

@@ -0,0 +1,195 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { M as METHOD_MODULE } from './index2.js';
+import { d as defineCustomElement$4 } from './button-base2.js';
+import { d as defineCustomElement$3 } from './nl-change-account2.js';
+import { d as defineCustomElement$2 } from './nl-dialog2.js';
+import { d as defineCustomElement$1 } from './ns-login-status.js';
+
+import { baseCss } from './css.js';
+const nlBannerCss = baseCss;
+
+const NlBannerStyle0 = nlBannerCss;
+
+const NlBanner = /*@__PURE__*/ proxyCustomElement(class NlBanner extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.handleNotifyConfirmBanner = createEvent(this, "handleNotifyConfirmBanner", 7);
+        this.handleNotifyConfirmBannerIframe = createEvent(this, "handleNotifyConfirmBannerIframe", 7);
+        this.handleLoginBanner = createEvent(this, "handleLoginBanner", 7);
+        this.handleLogoutBanner = createEvent(this, "handleLogoutBanner", 7);
+        this.handleOpenWelcomeModal = createEvent(this, "handleOpenWelcomeModal", 7);
+        this.handleConfirmLogout = createEvent(this, "handleConfirmLogout", 7);
+        this.handleImportModal = createEvent(this, "handleImportModal", 7);
+        this.theme = 'default';
+        this.darkMode = false;
+        this.hiddenMode = false;
+        this.titleBanner = '';
+        this.isOpen = false;
+        this.isLoading = false;
+        this.notify = null;
+        this.userInfo = null;
+        this.accounts = [];
+        this.isUserImgError = false;
+        this.domain = '';
+        this.mode = '';
+        this.url = '';
+        this.isOpenConfirm = false;
+    }
+    watchNotifyHandler(notify) {
+        var _a, _b, _c, _d;
+        this.isOpen = true;
+        this.isOpenConfirm = true;
+        this.domain = ((_a = this.userInfo) === null || _a === void 0 ? void 0 : _a.domain) || ((_d = (_c = (_b = this.userInfo) === null || _b === void 0 ? void 0 : _b.nip05) === null || _c === void 0 ? void 0 : _c.split('@')) === null || _d === void 0 ? void 0 : _d[1]) || '';
+        this.mode = notify.mode;
+        this.url = notify.url;
+        if (!this.mode) {
+            this.isOpenConfirm = false;
+            this.isOpen = false;
+        }
+    }
+    handleOpen() {
+        if (this.userInfo) {
+            this.isOpen = true;
+        }
+        else {
+            this.handleOpenWelcomeModal.emit();
+        }
+    }
+    handleClose() {
+        this.isOpen = false;
+    }
+    handleLogin() {
+        this.handleLoginBanner.emit(METHOD_MODULE.LOGIN);
+        this.handleClose();
+    }
+    handleSignup() {
+        this.handleLoginBanner.emit(METHOD_MODULE.SIGNUP);
+        this.handleClose();
+    }
+    handleImport() {
+        this.handleImportModal.emit();
+        this.handleClose();
+    }
+    handleLogout() {
+        const isBackupKey = localStorage.getItem('backupKey');
+        if (isBackupKey) {
+            this.handleLogoutBanner.emit(METHOD_MODULE.LOGOUT);
+            this.handleClose();
+            localStorage.removeItem('backupKey');
+            return;
+        }
+        if (this.userInfo.authMethod === 'local') {
+            this.handleConfirmLogout.emit();
+        }
+        else {
+            this.handleLogoutBanner.emit(METHOD_MODULE.LOGOUT);
+        }
+        this.handleClose();
+    }
+    handleConfirm() {
+        switch (this.mode) {
+            case 'authUrl':
+                this.handleNotifyConfirmBanner.emit(this.url);
+                break;
+            case 'iframeAuthUrl':
+                this.handleNotifyConfirmBannerIframe.emit(this.url);
+                break;
+        }
+        this.handleClose();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const isShowImg = Boolean((_a = this.userInfo) === null || _a === void 0 ? void 0 : _a.picture);
+        const userName = ((_b = this.userInfo) === null || _b === void 0 ? void 0 : _b.name) || ((_e = (_d = (_c = this.userInfo) === null || _c === void 0 ? void 0 : _c.nip05) === null || _d === void 0 ? void 0 : _d.split('@')) === null || _e === void 0 ? void 0 : _e[0]) || ((_f = this.userInfo) === null || _f === void 0 ? void 0 : _f.pubkey) || '';
+        const isShowUserName = Boolean(userName);
+        const isTemporary = this.userInfo && this.userInfo.authMethod === 'local';
+        const isBackupKey = localStorage.getItem('backupKey');
+        const defaultUserAvatar = (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "w-full" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" })));
+        const content = (h(Fragment, null, h("div", { class: "block w-[48px] h-[46px] relative z-10" }, h("div", { onClick: () => this.handleOpen(), class: `flex w-52 h-[46px] items-center pl-[11px]` }, h("span", { class: `${this.isLoading ? 'w-5 h-5 border-[2px] mr-3.5 ml-[2px] opacity-1' : 'w-0 h-0 border-[0px] mr-0 opacity-0 ml-0'} animate-spin transition-all duration-300 ease-in-out inline-block border-current border-t-transparent text-slate-900 dark:text-gray-300 rounded-full`, role: "status", "aria-label": "loading" }), this.userInfo ? (h("div", { class: `uppercase font-bold w-6 h-6 mr-2 rounded-full border border-gray-200 flex justify-center items-center` }, isShowImg ? (this.isUserImgError ? (defaultUserAvatar) : (h("img", { class: "w-full rounded-full", src: this.userInfo.picture, alt: "Logo", onError: () => (this.isUserImgError = true) }))) : isShowUserName ? (userName[0]) : (defaultUserAvatar))) : (h("div", { class: "flex justify-center items-center" }, h("svg", { class: "w-6 h-6", width: "225", height: "224", viewBox: "0 0 225 224", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "224.047", height: "224", rx: "64", fill: "#6951FA" }), h("path", { d: "M162.441 135.941V88.0593C170.359 85.1674 176 77.5348 176 68.6696C176 57.2919 166.708 48 155.33 48C143.953 48 134.661 57.2444 134.661 68.6696C134.661 77.5822 140.302 85.1674 148.219 88.0593V135.941C147.698 136.13 147.176 136.367 146.655 136.604L87.3956 77.3452C88.6282 74.6904 89.2919 71.7511 89.2919 68.6696C89.2919 57.2444 80.0474 48 68.6696 48C57.2919 48 48 57.2444 48 68.6696C48 77.5822 53.6415 85.1674 61.5585 88.0593V135.941C53.6415 138.833 48 146.465 48 155.33C48 166.708 57.2444 176 68.6696 176C80.0948 176 89.3393 166.708 89.3393 155.33C89.3393 146.418 83.6978 138.833 75.7807 135.941V88.0593C76.3022 87.8696 76.8237 87.6326 77.3452 87.3956L136.604 146.655C135.372 149.31 134.708 152.249 134.708 155.33C134.708 166.708 143.953 176 155.378 176C166.803 176 176.047 166.708 176.047 155.33C176.047 146.418 170.406 138.833 162.489 135.941H162.441Z", fill: "white" })), this.isOpen && (h("span", { class: "px-2" }, h("b", null, "Nostr"), " Login")))), this.isOpen && isShowUserName && h("div", { class: "show-slow truncate w-16 text-xs" }, userName), this.isOpen && isShowUserName && h("nl-login-status", { info: this.userInfo }))), h("button", { onClick: () => this.handleClose(), type: "button", class: `${this.isOpen ? 'z-20' : 'z-0'} nl-action-button absolute right-2 top-2 z-0 show-slow grid place-items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent` }, h("span", { class: "sr-only" }, "Close"), h("svg", { class: "flex-shrink-0 w-5 h-5", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M18 6 6 18" }), h("path", { d: "m6 6 12 12" }))), h("div", { class: "p-3 show-slow" }, this.isOpenConfirm ? (h("div", null, h("div", { class: "w-8 h-8 p-1/2 rounded-full border border-gray-200 bg-white mb-2 mt-2 show-slow m-auto" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "#5a68ff", class: "w-full" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" }))), h("p", { class: "mb-2 text-center max-w-40 min-w-40 mx-auto" }, this.mode === 'timeout' ? 'Keys not responding, check your key storage app' : `Confirmation required at ${this.domain}`), this.mode === 'timeout' ? (h("a", { onClick: () => this.handleClose(), href: `https://${this.domain}`, target: "_blank", class: "nl-button text-nowrap py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" }, "Go to ", this.domain)) : this.mode === 'rebind' ? (h("iframe", { src: this.url, width: '180', height: '80', frameBorder: '0' })) : (h("button-base", { onClick: () => this.handleConfirm(), titleBtn: "Confirm" })))) : (h("div", null, h("div", null, this.titleBanner && h("p", { class: "mb-2 text-center show-slow max-w-40 min-w-40 mx-auto" }, this.titleBanner), isTemporary && (h(Fragment, null, !isBackupKey && h("p", { class: "mb-2 text-center show-slow text-red-400 max-w-40 min-w-40 mx-auto" }, "Your profile may be lost if you close this tab"), h("div", { class: "mb-2" }, h("button-base", { onClick: () => this.handleImport(), theme: "lemonade", titleBtn: "Back up profile" })))), h("div", { class: "mb-2" }, h("nl-change-account", { currentAccount: this.userInfo, accounts: this.accounts })), !this.userInfo ? (h("div", null, h("button-base", { onClick: () => this.handleLogin(), titleBtn: "Log in" }, h("svg", { style: { display: 'none' }, slot: "icon-start", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "flex-shrink-0 w-4 h-4" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" }))), h("button-base", { onClick: () => this.handleSignup(), titleBtn: "Sign up" }, h("svg", { style: { display: 'none' }, slot: "icon-start", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "flex-shrink-0 w-4 h-4" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" }))))) : (h("button-base", { onClick: () => this.handleLogout(), titleBtn: "Log out" }))))))));
+        // https://gist.github.com/Haprog/848fc451c25da00b540e6d34c301e96a
+        function deepQuerySelectorAll(selector, root) {
+            root = root || document.body;
+            const results = Array.from(root.querySelectorAll(selector));
+            const pushNestedResults = function (root) {
+                deepQuerySelectorAll(selector, root).forEach(elem => {
+                    if (!results.includes(elem)) {
+                        results.push(elem);
+                    }
+                });
+            };
+            if (root.shadowRoot) {
+                pushNestedResults(root.shadowRoot);
+            }
+            for (const elem of Array.from(root.querySelectorAll('*'))) {
+                if (elem.shadowRoot) {
+                    pushNestedResults(elem.shadowRoot);
+                }
+            }
+            return results;
+        }
+        const dialogs = deepQuerySelectorAll('dialog');
+        const needDialog = !!dialogs.find(d => d.open && !d.classList.contains('nl-banner-dialog'));
+        return (h("div", { class: `theme-${this.theme} ${!this.isOpen && this.hiddenMode ? 'hidden' : ''}` }, h("div", { class: this.darkMode && 'dark', dir: "ltr" }, this.isOpenConfirm && needDialog ? (h("nl-dialog", null, h("div", { class: `nl-banner ${this.isOpen ? 'w-52 h-auto right-2 rounded-r-lg isOpen ' : 'rounded-r-none hover:rounded-r-lg cursor-pointer'} z-50 w-12 h-12 fixed top-52 right-0 inline-block gap-x-2 text-sm font-medium  rounded-lg hover:right-2  transition-all duration-300 ease-in-out` }, content))) : (h("div", { class: `nl-banner ${this.isOpen ? 'w-52 h-auto right-2 rounded-r-lg isOpen' : 'rounded-r-none hover:rounded-r-lg cursor-pointer'} z-50 w-12 h-12 fixed top-52 right-0 inline-block gap-x-2 text-sm font-medium  rounded-lg hover:right-2  transition-all duration-300 ease-in-out` }, content)))));
+    }
+    static get watchers() { return {
+        "notify": ["watchNotifyHandler"]
+    }; }
+    static get style() { return NlBannerStyle0; }
+}, [1, "nl-banner", {
+        "theme": [1025],
+        "darkMode": [1028, "dark-mode"],
+        "hiddenMode": [1028, "hidden-mode"],
+        "titleBanner": [1, "title-banner"],
+        "isOpen": [1028, "is-open"],
+        "isLoading": [4, "is-loading"],
+        "notify": [16],
+        "userInfo": [16],
+        "accounts": [1040],
+        "isUserImgError": [32],
+        "domain": [32],
+        "mode": [32],
+        "url": [32],
+        "isOpenConfirm": [32]
+    }, undefined, {
+        "notify": ["watchNotifyHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nl-banner", "button-base", "nl-change-account", "nl-dialog", "nl-login-status"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nl-banner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NlBanner);
+            }
+            break;
+        case "button-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "nl-change-account":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nl-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "nl-login-status":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { NlBanner as N, defineCustomElement as d };
+
+//# sourceMappingURL=nl-banner2.js.map