@authlocal/authlocal/x/common/views/id/view.js

User-sovereign Logins For All

import { debounce, html, shadowView } from "@benev/slate";
import stylesCss from "./styles.css.js";
import themeCss from "../../theme.css.js";
export const IdView = shadowView(use => (payload, preview) => {
    use.name("id");
    use.styles(themeCss, stylesCss);
    const truncated = payload.slice(0, 24);
    const copyStatus = use.signal(undefined);
    const clearStatus = use.once(() => debounce(1000, () => {
        copyStatus.value = undefined;
    }));
    function copy() {
        navigator.clipboard.writeText(payload)
            .then(() => { copyStatus.value = "good"; })
            .catch(() => { copyStatus.value = "bad"; })
            .finally(() => clearStatus());
    }
    const tooltip = `Copy "${truncated}..."`;
    return html `
		<span x-copy="${copyStatus}" title="${tooltip}">
			<span x-text @click="${copy}">${preview ?? truncated}</span>
			<span x-notify=good>Copied</span>
			<span x-notify=bad>Copy Failed</span>
		</span>
	`;
});
//# sourceMappingURL=view.js.map