@ghub/identity-chrome 0.3.0 → 0.5.0

package/README.md

@@ -76,7 +76,9 @@ const account = document.querySelector("gp-account")!;
 account.core = chrome;
 account.product = "GAdvisory"; // your own name, from your catalogue entry
 account.person = { name: user.name, email: user.email, id: user.id, avatarUrl: user.picture };
-account.organisations = [{ id: "org_1", name: "Hafen Labs", role: "Admin", active: true }];
+account.organisations = [
+  { id: "org_1", name: "Hafen Labs", role: "Admin", iconUrl: "/orgs/org_1/avatar", active: true },
+];
 account.onSwitch = async (id) => switchOrganisation(id); // reject when it did not switch
 account.onSignOut = async () => {
   await signOut(); // reject when it failed: the popup says they are still signed in
@@ -90,7 +92,8 @@ and the account popup renders nothing without a person.
 
 **The account popup shows mostly what the product passes**: the name and address from your
 session, your organisations with the role your product gives them there (its own label, already in the
-person's language and shown as given; none, and the row has no second line) and your two actions.
+person's language and shown as given; none, and the row has no second line) and their own picture
+where they have one (`iconUrl`; the initial otherwise, and if it does not load), and your two actions.
 Identity adds the picture, the colour of the initial, the links to its own account and set up
 screens and the footer, so the popup still signs somebody out while Identity is down. The
 picture is Identity's if the person has one, else yours, else a coloured initial whose tint
@@ -104,7 +107,13 @@ Every word can be replaced through `labels`; the rest stay English.
 
 ```html
 <div style="display: flex; align-items: center">
-  <gp-account layout="row" placement="top" align="start" style="flex: 1"></gp-account>
+  <gp-account
+    layout="row"
+    density="compact"
+    placement="top"
+    align="start"
+    style="flex: 1"
+  ></gp-account>
   <gp-apps placement="top" align="start"></gp-apps>
 </div>
 ```
@@ -114,13 +123,14 @@ account.labels = { organisations: "Groups" };
 account.items = [
   { id: "profile", label: "Profile", href: "/settings/profile", icon: userSvg },
   { id: "account", label: "Account", href: "/settings/account", icon: settingsSvg },
-  { id: "replay", label: "Session recording", onSelect: () => openReplayChoice(), icon: videoSvg },
+  { id: "shortcuts", label: "Keyboard shortcuts", onSelect: () => openShortcuts(), icon: keysSvg },
 ];
 ```
 
 `layout="row"` draws the trigger as a full width row, the picture with the name over the
-address; `placement="top"` opens both popups upward. Your items follow the organisations
-under your product's name, as links or as buttons; on a link, `onSelect` may call
+address; `density="compact"` draws the account popup a step smaller (320 wide, tighter rows),
+so it does not cover the rail and half the page; `placement="top"` opens both popups upward.
+Your items follow the organisations under your product's name, as links or as buttons; on a link, `onSelect` may call
 `preventDefault()` and navigate with your own router. An icon is SVG markup on a 24 grid and
 is kept to its shapes. Until you sign in through Identity, Sign out is the last row of your
 items' group; with `viaIdentity` it ends both sessions and stands on its own.

package/dist/elements/account.d.ts

@@ -35,6 +35,8 @@
  * **In a sidebar** (`layout="row"`, `placement="top"`): the trigger is a full
  * width row, the picture with the name over the address, and the popup opens
  * upward from it. A product with a sidebar puts `<gp-apps>` at the row's end.
+ * `density="compact"` draws the popup a step smaller (320 wide, tighter rows),
+ * so it does not cover the rail and half the page.
  *
  * **The product's own items** (`items`) sit after the organisations, as a group
  * headed with the product's name. Until the product signs in through Identity,
@@ -67,6 +69,12 @@ export interface AccountOrganisation {
      * so the element has no list of its own. None, and the row has no second line.
      */
     role?: string | null;
+    /**
+     * The organisation's own picture, absolute or relative to the page, http or
+     * https only. Drawn in place of the initial, which comes back if it does not
+     * load.
+     */
+    iconUrl?: string | null;
     active: boolean;
 }
 /** One of the product's own items in the popup, such as its profile or its settings. */

package/dist/elements/account.js

@@ -36,6 +36,8 @@
  * **In a sidebar** (`layout="row"`, `placement="top"`): the trigger is a full
  * width row, the picture with the name over the address, and the popup opens
  * upward from it. A product with a sidebar puts `<gp-apps>` at the row's end.
+ * `density="compact"` draws the popup a step smaller (320 wide, tighter rows),
+ * so it does not cover the rail and half the page.
  *
  * **The product's own items** (`items`) sit after the organisations, as a group
  * headed with the product's name. Until the product signs in through Identity,
@@ -227,8 +229,9 @@ exports.ACCOUNT_CSS = `${contract_js_1.CONTRACT_CSS}
   .wrap > .radios:last-child > .org:last-child { border-radius: 4px 4px 18px 18px; }
   .org-mark {
     display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
-    color: ${tint_js_1.AVATAR_INK}; font-size: 14px; font-weight: 600;
+    overflow: hidden; color: ${tint_js_1.AVATAR_INK}; font-size: 14px; font-weight: 600;
   }
+  .org-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
   .org-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
   .org-name { font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .org-role { font-size: 12.5px; line-height: 17px; color: var(--_ink-2); }
@@ -258,6 +261,40 @@ exports.ACCOUNT_CSS = `${contract_js_1.CONTRACT_CSS}
   .legal a:hover { text-decoration: underline; }
   .legal a:focus-visible { outline: 2px solid var(--_ring); outline-offset: 2px; }
 
+  /* density="compact": the same popup a step smaller, for a sidebar, where the
+     full one covers the rail and half the page. Below 600 it is the same sheet. */
+  :host([density="compact"]) .popup:not(.sheet) { width: 320px; padding: 6px 6px 8px; border-radius: 22px; }
+  :host([density="compact"]) .top { min-height: 32px; padding-left: 36px; }
+  :host([density="compact"]) .context { font-size: 12px; line-height: 16px; }
+  :host([density="compact"]) .close { width: 32px; height: 32px; }
+  :host([density="compact"]) .card { padding: 14px 14px 14px; border-radius: 18px; gap: 1px; }
+  :host([density="compact"]) .portrait { width: 52px; height: 52px; margin-bottom: 8px; }
+  :host([density="compact"]) .s72 { width: 52px; height: 52px; font-size: 22px; }
+  :host([density="compact"]) .pencil { width: 24px; height: 24px; right: -5px; bottom: -3px; }
+  :host([density="compact"]) .name { font-size: 16px; line-height: 21px; }
+  :host([density="compact"]) .email { font-size: 13px; line-height: 18px; }
+  :host([density="compact"]) .pill {
+    min-height: 34px; margin-top: 10px; padding: 0 14px 0 10px; gap: 8px; font-size: 13px; line-height: 18px;
+  }
+  :host([density="compact"]) .pill img { width: 18px; height: 18px; }
+  :host([density="compact"]) .section { margin-top: 4px; }
+  :host([density="compact"]) .heading { padding: 6px 12px 2px; font-size: 12px; line-height: 16px; }
+  :host([density="compact"]) .heading img { width: 14px; height: 14px; }
+  :host([density="compact"]) .stack > :first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
+  :host([density="compact"]) .stack > :last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
+  :host([density="compact"]) .item { min-height: 38px; padding: 0 12px; gap: 10px; font-size: 13px; line-height: 18px; }
+  :host([density="compact"]) .item svg, :host([density="compact"]) .signout svg { width: 16px; height: 16px; }
+  :host([density="compact"]) .org { min-height: 44px; padding: 5px 12px; gap: 10px; }
+  :host([density="compact"]) .wrap > .radios:last-child > .org:last-child { border-radius: 4px 4px 14px 14px; }
+  :host([density="compact"]) .org-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 12.5px; }
+  :host([density="compact"]) .org-name { font-size: 13px; line-height: 18px; }
+  :host([density="compact"]) .org-role { font-size: 11.5px; line-height: 15px; }
+  :host([density="compact"]) .active { font-size: 12px; gap: 5px; }
+  :host([density="compact"]) .more { min-height: 38px; padding: 0 12px; font-size: 13px; border-radius: 4px 4px 14px 14px; }
+  :host([density="compact"]) .signout { min-height: 40px; padding: 0 12px; gap: 10px; font-size: 13px; }
+  :host([density="compact"]) .error { padding: 4px 12px 2px; font-size: 12px; line-height: 17px; }
+  :host([density="compact"]) .legal { padding: 8px 0 2px; font-size: 11.5px; line-height: 16px; }
+
   @media (prefers-reduced-motion: reduce) {
     .popup, .popup.sheet { animation: none; }
     .spinner { animation-duration: 2400ms; }
@@ -316,6 +353,30 @@ function emailLine(email) {
     }
     return line;
 }
+/** An organisation's picture where it has one that loads, else its initial on its tint. */
+function orgMark(one) {
+    const initial = initialOf(one.name);
+    const mark = (0, dom_js_1.element)("span", {
+        class: `org-mark t${String((0, tint_js_1.avatarTint)(one.id))}`,
+        "aria-hidden": "true",
+    });
+    const picture = productAddress(one.iconUrl);
+    if (picture === null) {
+        mark.textContent = initial;
+        return mark;
+    }
+    const image = (0, dom_js_1.element)("img", {
+        src: picture,
+        alt: "",
+        decoding: "async",
+        referrerpolicy: "no-referrer",
+    });
+    image.addEventListener("error", () => {
+        mark.textContent = initial;
+    }, { once: true });
+    mark.append(image);
+    return mark;
+}
 /** An address the product gave, absolute or relative to the page, and only ever http or https. */
 function productAddress(value) {
     if (typeof value !== "string" || value === "")
@@ -450,11 +511,17 @@ function organisationsOf(value) {
     for (const one of value) {
         if (typeof one !== "object" || one === null)
             continue;
-        const { id, name, role, active } = one;
+        const { id, name, role, iconUrl, active } = one;
         if (typeof id !== "string" || id === "" || typeof name !== "string" || name.trim() === "")
             continue;
         const label = typeof role === "string" && role.trim() !== "" ? role.trim() : null;
-        out.push({ id, name: name.trim(), role: label, active: active === true });
+        out.push({
+            id,
+            name: name.trim(),
+            role: label,
+            iconUrl: typeof iconUrl === "string" && iconUrl !== "" ? iconUrl : null,
+            active: active === true,
+        });
     }
     // The active one first: the row says which one you are acting in.
     const active = out.findIndex((one) => one.active);
@@ -1131,7 +1198,7 @@ function createAccountElementClass() {
                 text.append((0, dom_js_1.element)("span", { class: "org-name", title: one.name }, one.name));
                 if (one.role)
                     text.append((0, dom_js_1.element)("span", { class: "org-role" }, one.role));
-                row.append((0, dom_js_1.element)("span", { class: `org-mark t${String((0, tint_js_1.avatarTint)(one.id))}`, "aria-hidden": "true" }, initialOf(one.name)), text);
+                row.append(orgMark(one), text);
                 if (one.active) {
                     const tag = (0, dom_js_1.element)("span", { class: "active", "aria-hidden": "true" });
                     tag.append((0, dom_js_1.element)("span", { class: "check" }), labels.active);

package/dist/react.d.ts

@@ -39,11 +39,13 @@ export interface GpAccountProps {
     labels?: Partial<AccountLabels>;
     /** `row` for the bottom of a sidebar: the picture with the name over the address, full width. */
     layout?: "button" | "row";
+    /** `compact` for a sidebar: the popup a step smaller. */
+    density?: "regular" | "compact";
     align?: Align;
     placement?: Placement;
     className?: string;
 }
 /** `<gp-account>`, the account popup. */
-export declare function GpAccount({ core, person, organisations, product, viaIdentity, onSignOut, onSwitch, items, labels, layout, align, placement, className, }: GpAccountProps): ReactElement;
+export declare function GpAccount({ core, person, organisations, product, viaIdentity, onSignOut, onSwitch, items, labels, layout, density, align, placement, className, }: GpAccountProps): ReactElement;
 export {};
 //# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -31,7 +31,7 @@ function GpApps({ core, labels, align, placement, className }) {
     return (0, react_1.createElement)("gp-apps", { ref, className, align, placement });
 }
 /** `<gp-account>`, the account popup. */
-function GpAccount({ core, person, organisations = null, product = null, viaIdentity = false, onSignOut = null, onSwitch = null, items = null, labels, layout, align, placement, className, }) {
+function GpAccount({ core, person, organisations = null, product = null, viaIdentity = false, onSignOut = null, onSwitch = null, items = null, labels, layout, density, align, placement, className, }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         (0, index_js_1.defineChromeElements)();
@@ -72,6 +72,6 @@ function GpAccount({ core, person, organisations = null, product = null, viaIden
         if (ref.current !== null && labels !== undefined)
             ref.current.labels = labels;
     }, [labels]);
-    return (0, react_1.createElement)("gp-account", { ref, className, layout, align, placement });
+    return (0, react_1.createElement)("gp-account", { ref, className, layout, density, align, placement });
 }
 //# sourceMappingURL=react.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghub/identity-chrome",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "The shared header controls of the Gelhaus Solutions products: the apps picker and the account popup, as custom elements with shadow DOM and as React wrappers. The browser half (state, cache, the last list held for an outage) and the server half (the token calls and a route handler). No dependencies.",
   "author": "Gelhaus Solutions (Enno Gelhaus) <egelhaus@ennogelhaus.de> (https://ennogelhaus.de)",
   "homepage": "https://ennogelhaus.de",