@w3nest/ui-tk - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/Badges.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("rx-vdom"),require("@w3nest/http-clients")):"function"==typeof define&&define.amd?define("Badges",[,],t):"object"==typeof exports?exports.Badges=t(require("rx-vdom"),require("@w3nest/http-clients")):(e["@w3nest/ui-tk_APIv01"]=e["@w3nest/ui-tk_APIv01"]||{},e["@w3nest/ui-tk_APIv01"].Badges=t(e["rx-vdom_APIv01"],e["@w3nest/http-clients_APIv01"]))}("undefined"!=typeof self?self:this,((e,t)=>(()=>{"use strict";var r={511:t=>{t.exports=e},786:e=>{e.exports=t}},s={};function o(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={exports:{}};return r[e](n,n.exports,o),n.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{AuthBadge:()=>u,GuestBadge:()=>c,UserBadge:()=>p});var i=o(511),a=o(786);class u{constructor(){this.tag="div";const e=new a.Accounts.Client;this.children=[(0,i.child$)({source$:e.getSessionDetails$().pipe((0,a.raiseHTTPErrors)()),vdomMap:e=>e.userInfo.temp?new c:new p(e)})]}}class p{constructor(e){this.tag="button",this.class="btn btn-sm btn-light",this.innerText=e.userInfo.name.split(" ").filter((e=>e.length>0)).map((e=>e[0].toUpperCase())).join("")}}class c{constructor(){this.tag="button",this.class="btn btn-sm btn-light fas fa-sign-in-alt"}}return n})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("rx-vdom"),require("@w3nest/http-clients"),require("rxjs"),require("@w3nest/webpm-client")):"function"==typeof define&&define.amd?define("Badges",[,,,],e):"object"==typeof exports?exports.Badges=e(require("rx-vdom"),require("@w3nest/http-clients"),require("rxjs"),require("@w3nest/webpm-client")):(t["@w3nest/ui-tk_APIv01"]=t["@w3nest/ui-tk_APIv01"]||{},t["@w3nest/ui-tk_APIv01"].Badges=e(t["rx-vdom_APIv01"],t["@w3nest/http-clients_APIv01"],t.rxjs_APIv7,t["@w3nest/webpm-client_APIv01"]))}("undefined"!=typeof self?self:this,((t,e,n,s)=>(()=>{"use strict";var i={24:t=>{t.exports=s},511:e=>{e.exports=t},786:t=>{t.exports=e},897:t=>{t.exports=n}},o={};function r(t){var e=o[t];if(void 0!==e)return e.exports;var n=o[t]={exports:{}};return i[t](n,n.exports,r),n.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var a={};r.r(a),r.d(a,{AccountPopperBadge:()=>y,AuthBadge:()=>v,ModalGuest:()=>A,ModalProfile:()=>k});var c=r(511),l=r(786);const d="btn btn-sm border p-1 my-1 mx-auto d-flex align-items-center",u=`${d} rounded px-2 btn-light`,p=`${d} rounded-pill px-3 btn-secondary`;class h{constructor(){this.tag="button",this.class=u;const t=new l.Accounts.Client;this.children=[{tag:"i",class:"fas fa-exchange-alt mx-1"},{tag:"div",innerText:"Switch Account"}],this.onclick=e=>{window.location.href=window.location.href=t.switchAccountUrl(window.location.href),e.stopPropagation()}}}class g{constructor(){this.tag="button",this.class=u;const t=new l.Accounts.Client;this.children=[{tag:"i",class:"fas fa-sign-out-alt mx-1"},{tag:"div",innerText:"Logout"}],this.onclick=e=>{const n=t.logoutAndForgetUserUrl(window.location.href);window.location.href=n,e.stopPropagation()}}}class f{constructor(t){this.tag="button",this.class=p,this.children=[{tag:"i",class:"fas fa-cog mx-1"},{tag:"div",innerText:"Manage Account"}],this.onclick=e=>{window.location.href=t,e.stopPropagation()}}}class m{constructor(){this.tag="button",this.class="btn btn-sm btn-secondary d-flex align-items-center mx-auto",this.style={width:"fit-content"};const t=new l.Accounts.Client;this.children=[{tag:"i",class:"fas fas fa-sign-in-alt mx-1"},{tag:"div",innerText:"Sign In"}],this.onclick=()=>{window.location.href=t.switchAccountUrl(window.location.href)}}}var x=r(897),w=r(24);function b(t){return t.split(" ").filter((t=>t.length>0)).map((t=>t[0].toUpperCase())).join("")}class v{constructor(){this.tag="div",this.class="my-auto";const t=new l.Accounts.Client;this.children=[(0,c.child$)({source$:t.getSessionDetails$().pipe((0,l.raiseHTTPErrors)()),vdomMap:t=>new y(t)})]}}class y{constructor(t){this.tag="div",this.id="ui-tk-UserBadge",this.style={position:"relative"},this.expanded$=new x.BehaviorSubject(!1);const e=t.userInfo.temp,n=e?{tag:"button",class:"btn btn-sm btn-danger fas fa-user",style:{fontSize:"1.2rem"},onclick:()=>{this.expanded$.next(!this.expanded$.value)}}:{tag:"button",class:"btn btn-sm btn-danger",onclick:()=>{this.expanded$.next(!this.expanded$.value)},innerText:b(t.userInfo.name)};this.children=[n];const s=e?new A:new k(t),i=t=>{const e=t.target;e&&e instanceof HTMLElement&&this.htmlElement&&!e.closest(`#${this.id}`)&&this.expanded$.next(!1)};this.connectedCallback=t=>{this.htmlElement=t,document.addEventListener("click",i);const e=this.toggleModal(t,s);t.ownSubscriptions(e)},this.disconnectedCallback=()=>{document.removeEventListener("click",i)}}toggleModal(t,e){const n=(0,x.from)((0,w.install)({esm:["@floating-ui/dom#^1.6.3 as popper"]}));let s,i;return(0,x.combineLatest)([this.expanded$,n]).subscribe((([n,{popper:o}])=>{if(!n)return s(),void i.remove();const r=(0,c.render)(e);i=r,document.body.appendChild(r);const a=r.children[0];s=o.autoUpdate(t,r,(()=>{o.computePosition(t,r,{placement:"bottom",middleware:[o.offset(10),o.shift({padding:1*parseFloat(getComputedStyle(document.documentElement).fontSize)}),o.arrow({element:a})]}).then((({x:t,y:e,middlewareData:n})=>{Object.assign(r.style,{left:`${String(t)}px`,top:`${String(e)}px`,opacity:"1"}),Object.assign(a.style,{left:`${String(n.arrow?.x)}px`,top:"-4px"})}))}))}))}}const S={tag:"div",class:"bg-dark",style:{position:"absolute",width:"8px",height:"8px",transform:"rotate(45deg)"}};class k{constructor(t){this.tag="div",this.style={position:"fixed",width:"75vw",maxWidth:"400px",zIndex:1e3,opacity:"0",transition:"opacity 0.5s"},this.class="rounded bg-dark text-light text-center p-4 d-flex flex-column",this.children=[S,t.userInfo.email?{tag:"div",class:"mb-3",innerText:t.userInfo.email,style:{fontSize:"0.9rem"}}:void 0,{tag:"div",class:"rounded text-light p-2 mx-auto bg-danger",style:{fontSize:"2.0rem",width:"fit-content"},innerText:b(t.userInfo.name)},{tag:"div",style:{fontSize:"1.5rem"},innerText:t.userInfo.name},{tag:"div",class:"w-100 my-1"},new f(t.accountManagerUrl),{tag:"div",class:"w-100 border-top my-2"},{tag:"div",class:"d-flex justify-content-center",children:[new h,new g]}]}}class A{constructor(){this.tag="div",this.style={position:"fixed",width:"75vw",maxWidth:"400px",zIndex:1e3},this.class="rounded bg-dark text-light text-center p-4 d-flex flex-column",this.children=[S,{tag:"div",class:"rounded text-light p-2 mx-auto bg-danger fas fa-user",style:{fontSize:"1.5rem",width:"fit-content"}},{tag:"div",class:"my-2"},{tag:"div",style:{fontSize:"1.2rem"},innerText:"👋 You're currently browsing as a guest"},{tag:"div",class:"w-100 my-3 border-top border-bottom py-2",style:{textAlign:"justify"},children:[{tag:"div",innerHTML:"Your session is temporary — any data you create (like settings, drafts, or preferences) <b>may be lost after 24 hours</b>."},{tag:"div",class:"w-100 my-1"},{tag:"div",innerHTML:"To keep your work safe and access more features, please <b>sign in</b>."}]},{tag:"div",class:"d-flex justify-content-center",children:[new m]}]}}return a})()));
 //# sourceMappingURL=Badges.js.map

dist/Mkdocs.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Mkdocs",[],e):"object"==typeof exports?exports.Mkdocs=e():(t["@w3nest/ui-tk_APIv01"]=t["@w3nest/ui-tk_APIv01"]||{},t["@w3nest/ui-tk_APIv01"].Mkdocs=e())}("undefined"!=typeof self?self:this,(()=>(()=>{"use strict";var t={d:(e,s)=>{for(var i in s)t.o(s,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:s[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Footer:()=>g,baseAssetsUrl:()=>f});const s=({imgSrc:t,href:e})=>({tag:"a",class:"mx-2",href:e,children:[{tag:"img",src:t,style:{height:"1.2rem"}}]}),i={tag:"a",href:"mailto:[e-mail]",class:"fas fa-envelope-square mx-2",style:{fontSize:"1.3rem",textDecoration:"none"}},n=({app:t,title:e,img:s})=>({tag:"a",class:"d-flex align-items-center",href:`/apps/${t}/latest`,children:[{tag:"img",src:`/apps/${t}/latest/assets/${s??"favicon.svg"}`,style:{height:"1.1rem"},class:"me-1"},{tag:"div",innerText:e}]});class c{constructor(){this.class="d-flex flex-column";const t={tag:"a",class:"d-flex align-items-center",href:"https://www.youtube.com/channel/UCE6AvRo8PyKbWDTW1NrvR5w",children:[{tag:"img",src:`${f}/youtube.svg`,style:{height:"1.1rem"},class:"me-1"},{tag:"div",innerText:"YouTube Channel"}]};this.children=[{tag:"div",innerText:"Showcases",style:{fontWeight:"bolder"}},n({app:"@w3nest/gallery",title:"Gallery"}),t]}}class o{constructor(){this.class="d-flex flex-column",this.children=[{tag:"div",innerText:"Solutions",style:{fontWeight:"bolder"}},n({app:"@w3nest/doc",title:"W3Nest local server"}),n({app:"@mkdocs-ts/doc",title:"Document Creator"}),n({app:"@webpm-client/doc",title:"Web Package Manager"}),n({app:"@rx-vdom/doc",title:"Reactive DOM engine",img:"reactivex.svg"})]}}class l{constructor(){this.tag="div",this.class="col-12 col-md-6  d-flex flex-column m-3 justify-content-center justify-content-md-end",this.style={width:"fit-content",maxWidth:"450px"};const t={tag:"div",class:"d-flex align-items-center",style:{height:"2rem"},children:[{tag:"div",innerText:"About W3Nest",style:{fontWeight:"bolder",fontSize:"1rem"}},{tag:"div",class:"mx-1"},i,s({imgSrc:`${f}/linkedin.svg`,href:"https://www.linkedin.com/groups/8391841"}),s({imgSrc:`${f}/github.svg`,href:"https://github.com/w3nest"})]};this.children=[t,{tag:"div",style:{textAlign:"justify",fontSize:"0.85rem"},innerHTML:'W3Nest is all about building science tools that run right on your machine 🖥️ — working with the cloud, not stuck in it. Open, modular, and always in your hands 🤝. Find out more <a href="/apps/@w3nest/doc/latest">here</a>.'},{tag:"div",class:"my-1"},{tag:"div",class:"d-flex w-100 justify-content-left flex-wrap",children:[new c,{tag:"div",class:"mx-2"},new o]}]}}class r{constructor(){this.tag="div",this.innerHTML="Documented with <a href='/apps/@mkdocs-ts/doc/latest'>mkdocs-ts</a>"}}class a{constructor({pypi:t,npm:e,github:i}){this.tag="div",this.class="d-flex align-items-center justify-content-center m-2",this.children=[i?s({imgSrc:`${f}/github.svg`,href:i}):void 0,t?s({imgSrc:`${f}/python.svg`,href:t}):void 0,e?s({imgSrc:`${f}/npm.svg`,href:e}):void 0]}}class d{constructor({license:t,copyrights:e}){this.tag="div",this.class="d-flex flex-column",this.children=[{tag:"div",class:"d-flex align-items-center",children:[{tag:"img",class:"me-1",style:{height:"0.6rem"},src:`${f}/mit.svg`},{tag:"div",innerText:`${t} license`}]},...e.map((t=>({tag:"div",innerText:`©️ ${t.year}  ${t.holder}`})))]}}class h{constructor(t){this.tag="div",this.class="col-12 col-md-6 d-flex flex-column m-3 justify-content-center justify-content-md-start",this.style={width:"fit-content"},this.children=[{tag:"div",class:"d-flex align-items-center",style:{height:"2rem"},children:[{tag:"div",innerText:"About this project",style:{fontWeight:"bolder",fontSize:"1rem"}},new a(t)]},new d(t),t.docGithub?new r:void 0]}}class g{constructor(t){this.tag="div",this.class="d-flex flex-column mkdocs-bg-1 mkdocs-text-1 border-top py-3",this.style={fontSize:"0.8rem"},this.children=[{tag:"div",class:"container",children:[{tag:"div",class:"row text-md-start justify-content-around",children:[new h(t),new l]}]}]}}const m=JSON.parse('{"UU":"@w3nest/ui-tk","rE":"0.1.3"}'),f=`/api/assets-gateway/webpm/resources/${window.btoa(m.UU)}/${m.rE}/assets`;return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Mkdocs",[],e):"object"==typeof exports?exports.Mkdocs=e():(t["@w3nest/ui-tk_APIv01"]=t["@w3nest/ui-tk_APIv01"]||{},t["@w3nest/ui-tk_APIv01"].Mkdocs=e())}("undefined"!=typeof self?self:this,(()=>(()=>{"use strict";var t={d:(e,s)=>{for(var i in s)t.o(s,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:s[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Footer:()=>g,baseAssetsUrl:()=>f});const s=({imgSrc:t,href:e})=>({tag:"a",class:"mx-2",href:e,children:[{tag:"img",src:t,style:{height:"1.2rem"}}]}),i={tag:"a",href:"mailto:[e-mail]",class:"fas fa-envelope-square mx-2",style:{fontSize:"1.3rem",textDecoration:"none"}},n=({app:t,title:e,img:s})=>({tag:"a",class:"d-flex align-items-center",href:`/apps/${t}/latest`,children:[{tag:"img",src:`/apps/${t}/latest/assets/${s??"favicon.svg"}`,style:{height:"1.1rem"},class:"me-1"},{tag:"div",innerText:e}]});class c{constructor(){this.class="d-flex flex-column";const t={tag:"a",class:"d-flex align-items-center",href:"https://www.youtube.com/channel/UCE6AvRo8PyKbWDTW1NrvR5w",children:[{tag:"img",src:`${f}/youtube.svg`,style:{height:"1.1rem"},class:"me-1"},{tag:"div",innerText:"YouTube Channel"}]};this.children=[{tag:"div",innerText:"Showcases",style:{fontWeight:"bolder"}},n({app:"@w3nest/gallery",title:"Gallery"}),t]}}class o{constructor(){this.class="d-flex flex-column",this.children=[{tag:"div",innerText:"Solutions",style:{fontWeight:"bolder"}},n({app:"@w3nest/doc",title:"W3Nest local server"}),n({app:"@mkdocs-ts/doc",title:"Document Creator"}),n({app:"@webpm-client/doc",title:"Web Package Manager"}),n({app:"@rx-vdom/doc",title:"Reactive DOM engine",img:"reactivex.svg"})]}}class l{constructor(){this.tag="div",this.class="col-12 col-md-6  d-flex flex-column m-3 justify-content-center justify-content-md-end",this.style={width:"fit-content",maxWidth:"450px"};const t={tag:"div",class:"d-flex align-items-center",style:{height:"2rem"},children:[{tag:"div",innerText:"About W3Nest",style:{fontWeight:"bolder",fontSize:"1rem"}},{tag:"div",class:"mx-1"},i,s({imgSrc:`${f}/linkedin.svg`,href:"https://www.linkedin.com/groups/8391841"}),s({imgSrc:`${f}/github.svg`,href:"https://github.com/w3nest"})]};this.children=[t,{tag:"div",style:{textAlign:"justify",fontSize:"0.85rem"},innerHTML:'W3Nest is all about building science tools that run right on your machine 🖥️ — working with the cloud, not stuck in it. Open, modular, and always in your hands 🤝. Find out more <a href="/apps/@w3nest/doc/latest">here</a>.'},{tag:"div",class:"my-1"},{tag:"div",class:"d-flex w-100 justify-content-left flex-wrap",children:[new c,{tag:"div",class:"mx-2"},new o]}]}}class r{constructor(){this.tag="div",this.innerHTML="Documented with <a href='/apps/@mkdocs-ts/doc/latest'>mkdocs-ts</a>"}}class a{constructor({pypi:t,npm:e,github:i}){this.tag="div",this.class="d-flex align-items-center justify-content-center m-2",this.children=[i?s({imgSrc:`${f}/github.svg`,href:i}):void 0,t?s({imgSrc:`${f}/python.svg`,href:t}):void 0,e?s({imgSrc:`${f}/npm.svg`,href:e}):void 0]}}class d{constructor({license:t,copyrights:e}){this.tag="div",this.class="d-flex flex-column",this.children=[{tag:"div",class:"d-flex align-items-center",children:[{tag:"img",class:"me-1",style:{height:"0.6rem"},src:`${f}/mit.svg`},{tag:"div",innerText:`${t} license`}]},...e.map((t=>({tag:"div",innerText:`©️ ${t.year}  ${t.holder}`})))]}}class h{constructor(t){this.tag="div",this.class="col-12 col-md-6 d-flex flex-column m-3 justify-content-center justify-content-md-start",this.style={width:"fit-content"},this.children=[{tag:"div",class:"d-flex align-items-center",style:{height:"2rem"},children:[{tag:"div",innerText:"About this project",style:{fontWeight:"bolder",fontSize:"1rem"}},new a(t)]},new d(t),t.docGithub?new r:void 0]}}class g{constructor(t){this.tag="div",this.class="d-flex flex-column mkdocs-bg-1 mkdocs-text-1 border-top py-3",this.style={fontSize:"0.8rem"},this.children=[{tag:"div",class:"container",children:[{tag:"div",class:"row text-md-start justify-content-around",children:[new h(t),new l]}]}]}}const m=JSON.parse('{"UU":"@w3nest/ui-tk","rE":"0.1.4"}'),f=`/api/assets-gateway/webpm/resources/${window.btoa(m.UU)}/${m.rE}/assets`;return e})()));
 //# sourceMappingURL=Mkdocs.js.map

dist/src/lib/badges/auth-badge.d.ts

@@ -1,18 +0,50 @@
-import { ChildrenLike, VirtualDOM } from 'rx-vdom';
+import { ChildrenLike, RxHTMLElement, VirtualDOM } from 'rx-vdom';
 import { Accounts } from '@w3nest/http-clients';
+import { BehaviorSubject } from 'rxjs';
 export declare class AuthBadge implements VirtualDOM<'div'> {
     readonly tag = "div";
+    readonly class = "my-auto";
     readonly children: ChildrenLike;
     constructor();
 }
-export declare class UserBadge implements VirtualDOM<'button'> {
-    readonly tag = "button";
-    readonly class = "btn btn-sm btn-light";
+export declare class AccountPopperBadge implements VirtualDOM<'div'> {
+    readonly tag = "div";
+    readonly id = "ui-tk-UserBadge";
+    readonly style: {
+        position: "relative";
+    };
     readonly innerText: string;
+    readonly children: ChildrenLike;
+    readonly expanded$: BehaviorSubject<boolean>;
+    readonly connectedCallback?: (element: RxHTMLElement<'div'>) => void;
+    readonly disconnectedCallback?: (element: RxHTMLElement<'div'>) => void;
+    private htmlElement?;
     constructor(details: Accounts.SessionDetails);
+    private toggleModal;
 }
-export declare class GuestBadge implements VirtualDOM<'button'> {
-    readonly tag = "button";
-    readonly class = "btn btn-sm btn-light fas fa-sign-in-alt";
-    readonly innerText: string;
+export declare class ModalProfile implements VirtualDOM<'div'> {
+    readonly tag = "div";
+    readonly style: {
+        position: "fixed";
+        width: string;
+        maxWidth: string;
+        zIndex: number;
+        opacity: string;
+        transition: string;
+    };
+    readonly class = "rounded bg-dark text-light text-center p-4 d-flex flex-column";
+    readonly children: ChildrenLike;
+    constructor(details: Accounts.SessionDetails);
 }
+export declare class ModalGuest implements VirtualDOM<'div'> {
+    readonly tag = "div";
+    readonly style: {
+        position: "fixed";
+        width: string;
+        maxWidth: string;
+        zIndex: number;
+    };
+    readonly class = "rounded bg-dark text-light text-center p-4 d-flex flex-column";
+    readonly children: ChildrenLike;
+    constructor();
+}

package.json

 {
     "name": "@w3nest/ui-tk",
     "description": "A dedicated W3Nest UI toolkit that factorizes generic, reusable widgets for web applications.",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "author": "[e-mail]",
@@ -41,3 +41,4 @@ "homepage": "https://github.com/w3nest/ui-tk#README.md",
                     "rx-vdom",
-                    "@w3nest/http-clients"
+                    "@w3nest/http-clients",
+                    "@w3nest/webpm-client"
                 ],
@@ -59,3 +60,5 @@ "aliases": []
     "dependencies": {
-        "@w3nest/http-clients": "^0.1.5",
+        "@floating-ui/dom": "^1.6.3",
+        "@w3nest/http-clients": "^0.1.7",
+        "@w3nest/webpm-client": "^0.1.9",
         "rx-vdom": "^0.1.3",
@@ -92,3 +95,5 @@ "rxjs": "^7.8.1"
         "dependencies": {
-            "@w3nest/http-clients": "^0.1.5",
+            "@floating-ui/dom": "^1.6.3",
+            "@w3nest/http-clients": "^0.1.7",
+            "@w3nest/webpm-client": "^0.1.9",
             "rx-vdom": "^0.1.3",
@@ -109,5 +114,6 @@ "rxjs": "^7.8.1"
             "rx-vdom": "rx-vdom_APIv01",
-            "@w3nest/http-clients": "@w3nest/http-clients_APIv01"
+            "@w3nest/http-clients": "@w3nest/http-clients_APIv01",
+            "@w3nest/webpm-client": "@w3nest/webpm-client_APIv01"
         }
     }
 }

src/lib/badges/auth-badge.ts

@@ -1,4 +0,19 @@
-import { ChildrenLike, VirtualDOM, child$ } from 'rx-vdom'
+import {
+    AnyVirtualDOM,
+    ChildrenLike,
+    RxHTMLElement,
+    VirtualDOM,
+    child$,
+    render,
+} from 'rx-vdom'
 import { Accounts, raiseHTTPErrors } from '@w3nest/http-clients'
-
+import {
+    LogoutButton,
+    ManageAccountButton,
+    SigninButton,
+    SwitchAccountButton,
+} from './buttons'
+import { BehaviorSubject, combineLatest, from } from 'rxjs'
+import { install } from '@w3nest/webpm-client'
+import type * as Popper from '@floating-ui/dom'
 function getInitials(name: string) {
@@ -14,2 +29,3 @@ return name
     public readonly tag = 'div'
+    public readonly class = 'my-auto'
     public readonly children: ChildrenLike
@@ -22,5 +38,3 @@ constructor() {
                 vdomMap: (details: Accounts.SessionDetails) => {
-                    return details.userInfo.temp
-                        ? new GuestBadge()
-                        : new UserBadge(details)
+                    return new AccountPopperBadge(details)
                 },
@@ -32,15 +46,241 @@ }),
 
-export class UserBadge implements VirtualDOM<'button'> {
-    public readonly tag = 'button'
-    public readonly class = 'btn btn-sm btn-light'
+export class AccountPopperBadge implements VirtualDOM<'div'> {
+    public readonly tag = 'div'
+    public readonly id = 'ui-tk-UserBadge'
+    public readonly style = {
+        position: 'relative' as const,
+    }
     public readonly innerText: string
+    public readonly children: ChildrenLike
+    public readonly expanded$ = new BehaviorSubject(false)
+    public readonly connectedCallback?: (element: RxHTMLElement<'div'>) => void
+    public readonly disconnectedCallback?: (
+        element: RxHTMLElement<'div'>,
+    ) => void
+
+    private htmlElement?: HTMLElement
+
     constructor(details: Accounts.SessionDetails) {
-        this.innerText = getInitials(details.userInfo.name)
+        const isTemp = details.userInfo.temp
+        const badge: AnyVirtualDOM = isTemp
+            ? {
+                  tag: 'button',
+                  class: 'btn btn-sm btn-danger fas fa-user',
+                  style: {
+                      fontSize: '1.2rem',
+                  },
+                  onclick: () => {
+                      this.expanded$.next(!this.expanded$.value)
+                  },
+              }
+            : {
+                  tag: 'button',
+                  class: 'btn btn-sm btn-danger',
+                  onclick: () => {
+                      this.expanded$.next(!this.expanded$.value)
+                  },
+                  innerText: getInitials(details.userInfo.name),
+              }
+        this.children = [badge]
+
+        const modal = isTemp ? new ModalGuest() : new ModalProfile(details)
+
+        const outsideClickListener = (event: MouseEvent) => {
+            const target = event.target
+            if (
+                target &&
+                target instanceof HTMLElement &&
+                this.htmlElement &&
+                !target.closest(`#${this.id}`)
+            ) {
+                this.expanded$.next(false)
+            }
+        }
+        this.connectedCallback = (badge) => {
+            this.htmlElement = badge
+            document.addEventListener('click', outsideClickListener)
+            const sub = this.toggleModal(badge, modal)
+            badge.ownSubscriptions(sub)
+        }
+        this.disconnectedCallback = () => {
+            document.removeEventListener('click', outsideClickListener)
+        }
     }
+
+    private toggleModal(badge: HTMLElement, modal: AnyVirtualDOM) {
+        const popper$ = from(
+            install<{ popper: typeof Popper }>({
+                esm: ['@floating-ui/dom#^1.6.3 as popper'],
+            }),
+        )
+
+        const remToPixel = (rem) =>
+            rem *
+            parseFloat(getComputedStyle(document.documentElement).fontSize)
+
+        let cleanup: () => void
+        let modalElement: HTMLElement
+
+        return combineLatest([this.expanded$, popper$]).subscribe(
+            ([expanded, { popper }]) => {
+                if (!expanded) {
+                    cleanup()
+                    modalElement.remove()
+                    return
+                }
+
+                const modalDiv = render(modal)
+                modalElement = modalDiv
+                document.body.appendChild(modalDiv)
+                const arrowElement = modalDiv.children[0] as HTMLElement
+
+                const updatePosition = () => {
+                    void popper
+                        .computePosition(badge, modalDiv, {
+                            placement: 'bottom',
+                            middleware: [
+                                popper.offset(10),
+                                popper.shift({ padding: remToPixel(1) }),
+                                popper.arrow({ element: arrowElement }),
+                            ],
+                        })
+                        .then(({ x, y, middlewareData }) => {
+                            Object.assign(modalDiv.style, {
+                                left: `${String(x)}px`,
+                                top: `${String(y)}px`,
+                                opacity: '1',
+                            })
+                            Object.assign(arrowElement.style, {
+                                left: `${String(middlewareData.arrow?.x)}px`,
+                                top: '-4px',
+                            })
+                        })
+                }
+                cleanup = popper.autoUpdate(badge, modalDiv, updatePosition)
+            },
+        )
+    }
 }
 
-export class GuestBadge implements VirtualDOM<'button'> {
-    public readonly tag = 'button'
-    public readonly class = 'btn btn-sm btn-light fas fa-sign-in-alt'
-    public readonly innerText: string
+const arrow: AnyVirtualDOM = {
+    tag: 'div',
+    class: 'bg-dark',
+    style: {
+        position: 'absolute',
+        width: '8px',
+        height: '8px',
+        transform: 'rotate(45deg)',
+    },
 }
+export class ModalProfile implements VirtualDOM<'div'> {
+    public readonly tag = 'div'
+    public readonly style = {
+        position: 'fixed' as const,
+        width: '75vw',
+        maxWidth: '400px',
+        zIndex: 1000,
+        opacity: '0',
+        transition: 'opacity 0.5s',
+    }
+    public readonly class =
+        'rounded bg-dark text-light text-center p-4 d-flex flex-column'
+    public readonly children: ChildrenLike
+
+    constructor(details: Accounts.SessionDetails) {
+        this.children = [
+            arrow,
+            details.userInfo.email
+                ? {
+                      tag: 'div',
+                      class: 'mb-3',
+                      innerText: details.userInfo.email,
+                      style: {
+                          fontSize: '0.9rem',
+                      },
+                  }
+                : undefined,
+            {
+                tag: 'div',
+                class: 'rounded text-light p-2 mx-auto bg-danger',
+                style: {
+                    fontSize: '2.0rem',
+                    width: 'fit-content',
+                },
+                innerText: getInitials(details.userInfo.name),
+            },
+            {
+                tag: 'div',
+                style: {
+                    fontSize: '1.5rem',
+                },
+                innerText: details.userInfo.name,
+            },
+            { tag: 'div', class: 'w-100 my-1' },
+            new ManageAccountButton(details.accountManagerUrl),
+            { tag: 'div', class: 'w-100 border-top my-2' },
+            {
+                tag: 'div',
+                class: 'd-flex justify-content-center',
+                children: [new SwitchAccountButton(), new LogoutButton()],
+            },
+        ]
+    }
+}
+
+export class ModalGuest implements VirtualDOM<'div'> {
+    public readonly tag = 'div'
+    public readonly style = {
+        position: 'fixed' as const,
+        width: '75vw',
+        maxWidth: '400px',
+        zIndex: 1000,
+    }
+    public readonly class =
+        'rounded bg-dark text-light text-center p-4 d-flex flex-column'
+    public readonly children: ChildrenLike
+
+    constructor() {
+        this.children = [
+            arrow,
+            {
+                tag: 'div',
+                class: 'rounded text-light p-2 mx-auto bg-danger fas fa-user',
+                style: {
+                    fontSize: '1.5rem',
+                    width: 'fit-content',
+                },
+            },
+            { tag: 'div', class: 'my-2' },
+            {
+                tag: 'div',
+                style: {
+                    fontSize: '1.2rem',
+                },
+                innerText: `👋 You're currently browsing as a guest`,
+            },
+            {
+                tag: 'div',
+                class: 'w-100 my-3 border-top border-bottom py-2',
+                style: {
+                    textAlign: 'justify',
+                },
+                children: [
+                    {
+                        tag: 'div',
+                        innerHTML: `Your session is temporary — any data you create (like settings, drafts, or preferences) <b>may be lost after 24 hours</b>.`,
+                    },
+                    { tag: 'div', class: 'w-100 my-1' },
+                    {
+                        tag: 'div',
+                        innerHTML: `To keep your work safe and access more features, please <b>sign in</b>.`,
+                    },
+                ],
+            },
+            {
+                tag: 'div',
+                class: 'd-flex justify-content-center',
+                children: [new SigninButton()],
+            },
+        ]
+    }
+}

typedoc.js

 /* eslint-env node -- eslint-comment add exception because the running context is node environment */
 module.exports = {
-    entryPoints: ['./src/index.ts'],
+    entryPoints: ['./src/lib/badges/index.ts','./src/lib/mkdocs/index.ts'],
     exclude: ['src/tests'],
@@ -5,0 +5,0 @@ out: 'dist/docs',

No alert changes

Improved metrics

Total package byte prevSize

934448

4.06%

Number of package files

47

4.44%

Lines of code

1152

56.1%

Worsened metrics

Dependency count

5

66.67%

Dependency changes

• + Added

  @floating-ui/dom@^1.6.3

• + Added

  @w3nest/webpm-client@^0.1.9

• + Added

  @floating-ui/core@1.7.3
  (transitive)

• + Added

  @floating-ui/dom@1.7.3
  (transitive)

• + Added

  @floating-ui/utils@0.2.10
  (transitive)

• + Added

  @w3nest/webpm-client@0.1.11
  (transitive)

• + Added

  semver@7.7.2
  (transitive)

• Updated

  @w3nest/http-clients@^0.1.7