ooxml-ui 0.20.0 → 0.22.0

package/dist/chunk-E47762NY.js

@@ -0,0 +1,90 @@
+import { OfficeElement, controlStyles, definer } from './chunk-5A4REH6T.js';
+import { html } from 'lit';
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/presence/presence.css?raw
+var presence_default = ":host {\n	display: inline-flex;\n	align-items: center;\n}\nul {\n	display: flex;\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\nli {\n	margin-inline-start: calc(-1 * var(--office-space-1-5));\n}\nli:first-child {\n	margin-inline-start: 0;\n}\nbutton,\n.more {\n	box-sizing: border-box;\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	padding: 0;\n	border-radius: 50%;\n	border: var(--office-border-width-thick) solid var(--office-avatar-color);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	font: 600 var(--office-font-size-xs) var(--office-font);\n	cursor: pointer;\n}\n.more {\n	cursor: default;\n	border-color: var(--office-border);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n	z-index: 1;\n}\nbutton[data-status='idle'] {\n	opacity: 0.7;\n}\nbutton[data-status='away'] {\n	opacity: 0.45;\n	border-style: dashed;\n}\n@media (forced-colors: active) {\n	button,\n	.more {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
+
+// src/presence/presence.ts
+function participantsFromAwareness(states, selfId) {
+  const out = [];
+  for (const state of states) {
+    const user = state?.user;
+    const id = String(user?.id ?? state?.clientId ?? "");
+    if (!id || !user?.name) continue;
+    out.push({
+      id,
+      name: user.name,
+      ...user.color ? { color: user.color } : {},
+      ...user.status ? { status: user.status } : {},
+      ...id === selfId || user.self ? { self: true } : {}
+    });
+  }
+  return out;
+}
+var initialsOf = (name) => {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const first = [...parts[0] ?? ""][0] ?? "?";
+  const last = parts.length > 1 ? [...parts[parts.length - 1] ?? ""][0] ?? "" : "";
+  return (first + last).toUpperCase();
+};
+var OfficeUiPresence = class extends OfficeElement {
+  static styles = controlStyles(presence_default);
+  static properties = {
+    // `participants` keeps the local user first, so it has an accessor.
+    max: { type: String },
+    label: { type: String }
+  };
+  people = [];
+  constructor() {
+    super();
+    this.max = null;
+    this.label = null;
+  }
+  get participants() {
+    return this.people;
+  }
+  set participants(next) {
+    this.people = [...next].sort((a, b) => Number(Boolean(b.self)) - Number(Boolean(a.self)));
+    this.requestUpdate("participants");
+  }
+  get visible() {
+    const n = Number(this.max ?? 4);
+    return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 4;
+  }
+  willUpdate() {
+    this.setAttribute("role", "group");
+    this.setAttribute("aria-label", this.label ?? `${this.people.length} collaborators`);
+  }
+  person(person) {
+    const status = person.status && person.status !== "active" ? `, ${person.status}` : "";
+    return html`<li>
+			<button
+				type="button"
+				data-id=${person.id}
+				data-status=${person.status ?? "active"}
+				style=${person.color ? `--office-avatar-color:${person.color}` : ""}
+				aria-label="${person.name}${person.self ? " (you)" : ""}${status}"
+				title=${person.name}
+				@click=${() => this.fire("office-presence-select", { id: person.id })}
+				>${initialsOf(person.name)}</button
+			>
+		</li>`;
+  }
+  render() {
+    const shown = this.people.slice(0, this.visible);
+    const hidden = this.people.length - shown.length;
+    const names = this.people.slice(shown.length).map((p) => p.name).join(", ");
+    return html`<ul role="list">
+			${shown.map((person) => this.person(person))}
+			${hidden > 0 ? html`<li>
+							<span class="more" title=${names} aria-label="${hidden} more: ${names}"
+								>+${hidden}</span
+							>
+						</li>` : ""}
+		</ul>`;
+  }
+};
+var definePresence = definer("office-ui-presence", () => OfficeUiPresence);
+
+export { OfficeUiPresence, definePresence, initialsOf, participantsFromAwareness };