ooxml-ui 0.19.0 → 0.21.0

package/dist/chunk-5A4REH6T.js

@@ -0,0 +1,259 @@
+import { TOUCH, tok, OFFICE_TOKENS } from './chunk-HSJH6SUW.js';
+import { unsafeCSS, LitElement } from 'lit';
+
+// src/registry.ts
+var CONTRACT_REVISION = 1;
+var CONTRACT_KEY = /* @__PURE__ */ Symbol.for("office-ui.web-control-contract");
+function assertContract(registry, tag) {
+  const revision = registry.get(tag)?.[CONTRACT_KEY];
+  if (revision !== void 0 && revision !== CONTRACT_REVISION) {
+    throw new Error(
+      `Incompatible ${tag} contract (${revision}; expected ${CONTRACT_REVISION}). Load one version of ooxml-ui per window.`
+    );
+  }
+}
+function defineOnce(registry, tag, make) {
+  assertContract(registry, tag);
+  if (registry.get(tag)) return;
+  const ctor = make();
+  Object.defineProperty(ctor, CONTRACT_KEY, { value: CONTRACT_REVISION });
+  registry.define(tag, ctor);
+}
+function browserRegistry() {
+  return typeof window === "undefined" ? void 0 : window.customElements;
+}
+function definer(tag, make) {
+  const define = (registry = browserRegistry()) => {
+    if (registry) defineOnce(registry, tag, make);
+  };
+  return Object.assign(define, { tag });
+}
+function emit(host, type, detail, cancelable = false) {
+  return host.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable })
+  );
+}
+function present(value) {
+  return value === "" || Boolean(value);
+}
+
+// src/styles.ts
+var COMMON_CONTROL_CSS = `
+:host([hidden]) { display: none !important; }
+@media ${TOUCH} {
+	:host { --office-target-size: ${tok("--office-target-size-touch")}; }
+}
+@media (forced-colors: active) {
+	:host(:focus-visible), :focus-visible { outline: ${tok("--office-focus-width")} solid Highlight; outline-offset: ${tok("--office-focus-offset")}; }
+}
+`;
+
+// src/base.ts
+function withTokens(css) {
+  return css.replace(
+    /var\((--office-[\w-]+)\)/g,
+    (whole, name) => name in OFFICE_TOKENS ? `var(${name}, ${OFFICE_TOKENS[name]})` : whole
+  );
+}
+var controlStyles = (...sheets) => [
+  unsafeCSS(COMMON_CONTROL_CSS),
+  ...sheets.map((sheet) => unsafeCSS(withTokens(sheet)))
+];
+var flag = {
+  type: Boolean,
+  reflect: true,
+  converter: {
+    fromAttribute: (value) => value !== null,
+    toAttribute: (value) => present(value) ? "" : null
+  }
+};
+var readFlag = {
+  type: Boolean,
+  converter: {
+    fromAttribute: (value) => value !== null && value !== "false"
+  }
+};
+var triState = {
+  reflect: true,
+  converter: {
+    fromAttribute: (value) => value === null ? void 0 : value !== "false",
+    toAttribute: (value) => value === void 0 ? null : String(value)
+  }
+};
+var valueOn = {
+  type: String,
+  converter: { fromAttribute: (value) => value ?? "on" }
+};
+var OfficeElement = class extends LitElement {
+  static syncUpdates = true;
+  _rendering;
+  _ready;
+  constructor() {
+    super();
+    this.renderRoot = this.createRenderRoot();
+    this._ready = true;
+    if (this.constructor.syncUpdates)
+      queueMicrotask(() => {
+        if (this.isConnected) this.ensureRendered();
+      });
+  }
+  /**
+   * Render now if the element has never rendered; a no-op afterwards or while rendering. A
+   * disconnected element may be rendered here from inside a constructor (a subclass reading
+   * `shadowRoot`), and a constructor may not add host attributes, so while it renders its host
+   * writes are queued and applied before the next write or update, or on connection.
+   */
+  ensureRendered() {
+    if (!this._ready || this._rendering || this.hasUpdated || !this.isUpdatePending || !this.constructor.syncUpdates)
+      return;
+    this._deferring = !this.isConnected;
+    this._detachedRender ||= this._deferring;
+    try {
+      this.performUpdate();
+    } finally {
+      this._deferring = false;
+    }
+  }
+  _detachedRender;
+  /** True while a detached first render runs (inside a constructor, maybe): no children may be added. */
+  get detachedFirstRender() {
+    return this._deferring === true;
+  }
+  _queue;
+  _deferring;
+  /** Write to the host element: queued (and dropped) during a detached first render, else applied at once. */
+  hostWrite(write) {
+    if (this._deferring) (this._queue ??= []).push(write);
+    else {
+      this.flushHost();
+      write();
+    }
+  }
+  /**
+   * Forget the host writes a detached first render queued. They are stale by the time anything
+   * else happens (replaying one would fire an attribute change that overwrites a newer property),
+   * and the render that follows connecting recomputes every host write from the current state.
+   */
+  flushHost() {
+    this._queue = void 0;
+  }
+  setAttribute(name, value) {
+    this.hostWrite(() => super.setAttribute(name, value));
+  }
+  removeAttribute(name) {
+    this.hostWrite(() => super.removeAttribute(name));
+  }
+  toggleAttribute(name, force) {
+    if (!this._deferring) {
+      this.flushHost();
+      return super.toggleAttribute(name, force);
+    }
+    const on = force ?? !this.hasAttribute(name);
+    this.hostWrite(() => super.toggleAttribute(name, on));
+    return on;
+  }
+  /**
+   * Reflecting properties write their attribute as soon as they are set, even before the element
+   * connects (Lit alone reflects during an update). A `flag` property also stores a real
+   * boolean whatever it is given, so a framework writing `''` (the attribute idiom for
+   * "present") reads back `true`.
+   */
+  static createProperty(name, options = {}) {
+    if (!options.reflect || options.noAccessor || options.state)
+      return super.createProperty(name, options);
+    const quiet = { ...options, reflect: false };
+    super.createProperty(name, { ...quiet, noAccessor: true });
+    const store = Symbol(String(name));
+    const attribute = typeof options.attribute === "string" ? options.attribute : String(name).toLowerCase();
+    const isFlag = options.converter === flag.converter;
+    Object.defineProperty(this.prototype, name, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return this[store];
+      },
+      set(value) {
+        const old = this[store];
+        const next = isFlag ? present(value) : value;
+        this[store] = next;
+        const deferred = old === void 0;
+        if (!deferred) this.reflectAttribute(attribute, next, options);
+        this.requestUpdate(name, old, deferred ? options : quiet);
+      }
+    });
+  }
+  /**
+   * Attributes the element reads straight from the DOM, without a property of the same name: a
+   * product subclass reads them too, and a framework that assigns properties it finds (React 19)
+   * must write the attribute instead. Changing one redraws the element.
+   */
+  static watched = [];
+  static get observedAttributes() {
+    return [...super.observedAttributes, ...this.watched];
+  }
+  fromAttribute;
+  attributeChangedCallback(name, old, value) {
+    this.fromAttribute = name;
+    try {
+      super.attributeChangedCallback(name, old, value);
+    } finally {
+      this.fromAttribute = void 0;
+    }
+    if (this.constructor.watched.includes(name)) this.requestUpdate();
+  }
+  /** Write a property's value to its attribute now, unless the attribute is where it came from. */
+  reflectAttribute(attribute, value, options) {
+    if (this.fromAttribute === attribute) return;
+    const converter = options.converter;
+    const text = converter && typeof converter === "object" && converter.toAttribute ? converter.toAttribute(value, options.type) : options.type === Boolean ? value ? "" : null : value === null || value === void 0 ? null : String(value);
+    if (this.getAttribute(attribute) === text) return;
+    if (text === null || text === void 0) this.removeAttribute(attribute);
+    else this.setAttribute(attribute, String(text));
+  }
+  /** Dispatch a bubbling, composed event with `detail`. */
+  fire(type, detail, cancelable = false) {
+    return emit(this, type, detail, cancelable);
+  }
+  get immediate() {
+    return this.constructor.syncUpdates;
+  }
+  connectedCallback() {
+    this.flushHost();
+    super.connectedCallback();
+    if (this._detachedRender) {
+      this._detachedRender = false;
+      this.requestUpdate();
+    }
+    if (this.immediate && !this.hasUpdated && this.isUpdatePending) this.performUpdate();
+  }
+  performUpdate() {
+    if (!this._deferring) this.flushHost();
+    this._rendering = true;
+    try {
+      return super.performUpdate();
+    } finally {
+      this._rendering = false;
+    }
+  }
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
+    if (this._ready && this.immediate && this.hasUpdated && !this._rendering && this.isUpdatePending)
+      this.performUpdate();
+  }
+};
+function inheritedShadowRoot() {
+  for (let proto = Object.getPrototypeOf(OfficeElement.prototype); proto; proto = Object.getPrototypeOf(proto)) {
+    const getter = Object.getOwnPropertyDescriptor(proto, "shadowRoot")?.get;
+    if (getter) return getter;
+  }
+  return void 0;
+}
+Object.defineProperty(OfficeElement.prototype, "shadowRoot", {
+  configurable: true,
+  get() {
+    this.ensureRendered();
+    return inheritedShadowRoot()?.call(this) ?? null;
+  }
+});
+
+export { CONTRACT_REVISION, OfficeElement, controlStyles, definer, flag, present, readFlag, triState, valueOn, withTokens };

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 };