ooxml-ui 1.30.0 → 1.32.0

package/dist/xlsx.js

@@ -1,17 +1,18 @@
-import { statusLayout, watchStatusWidth, defineChartExOptions, chartExSpaceFormatSource } from './chunk-E4H3Y7M4.js';
+import { statusLayout, watchStatusWidth, defineChartExOptions, chartExSpaceFormatSource } from './chunk-6TS7ASDJ.js';
 import { trackPointerGesture } from './chunk-GSXOZCAN.js';
-import './chunk-SBBFNAKM.js';
-import { createHostBackstagePages, syncRibbonAddIns, withHostMenuItems } from './chunk-SXVOXSTE.js';
-export { RIBBON_ADD_IN_EVENT } from './chunk-SXVOXSTE.js';
-import { SmartArtTextPaneController, defineSmartArt, defineSmartArtPicker, smartArtStylesGalleryState, smartArtColorsGalleryState, safeColor, svgTile } from './chunk-BKHWBIXP.js';
-import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-IE6HKH4X.js';
-export { XLSX_EDITOR_EVENTS } from './chunk-IE6HKH4X.js';
+import './chunk-32P252JS.js';
+import './chunk-DA57FPSN.js';
+import { createHostBackstagePages, syncRibbonAddIns, withHostMenuItems } from './chunk-CDC5MAZS.js';
+export { RIBBON_ADD_IN_EVENT } from './chunk-CDC5MAZS.js';
+import { pictureEffectFilter, SmartArtTextPaneController, defineSmartArt, defineSmartArtPicker, smartArtStylesGalleryState, smartArtColorsGalleryState, safeColor, svgTile } from './chunk-CALEXPBD.js';
+import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-OKEFAQJT.js';
+export { XLSX_EDITOR_EVENTS } from './chunk-OKEFAQJT.js';
 import './chunk-WYKMVMX4.js';
 import './chunk-CDAXY5KC.js';
 import './chunk-NDUD5JJB.js';
 import './chunk-KJMAVPQB.js';
 import { legacyThemeAliases, legacyThemeBridge, installOfficeUiThemeFor } from './chunk-T5ARELU2.js';
-import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, defineChartFormatPane, defineChartDataSheet, defineOptionsDialog, defineDialog, optionsLabels, runKeyTips, assignKeyTips, chartFormatTranslator, chartSpaceFormatSource, CHART_DATA_SHEET_ENGLISH, userInterfaceSection, personalizeSection, optionText, unavailableControl, unavailableCategory, defineGallery, defineContextMenu, rangeControl, defineColorGrid, defineCommentsPane, defineChartPicker } from './chunk-HNREZW5U.js';
+import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, defineChartFormatPane, defineChartDataSheet, defineOptionsDialog, defineDialog, createDialogSession, optionsLabels, runKeyTips, assignKeyTips, chartFormatTranslator, chartSpaceFormatSource, CHART_DATA_SHEET_ENGLISH, userInterfaceSection, personalizeSection, optionText, unavailableControl, unavailableCategory, defineGallery, defineContextMenu, rangeControl, defineColorGrid, defineCommentsPane, defineChartPicker, createLiveColorInput, handleLiveColorEvent } from './chunk-KYXSQFDB.js';
 import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
 import './chunk-4OBMFPGF.js';
 import { definePresence } from './chunk-YZH2QS7J.js';
@@ -27,7 +28,8 @@ import { previewDiagramLayout, resolveDiagramDrawingStyles, DIAGRAM_INSERT_CATEG
 import { parseChartFormatTargetKey, resolveChartGradient, sortGradientStops, withChartGradientDirection, buildChartGradientDef, chartGradientMarkup, applyChartExEditAction, applyChartExSpaceDataSheetEdits, applyChartExEditIntent, CHART_STYLE_PRESETS, CHART_COLOR_PALETTES, CHART_QUICK_LAYOUTS, chartPaletteColors } from 'ooxml-core/chart';
 import { render } from 'lit';
 import { normalizeLocale } from 'ooxml-core/i18n';
-import { applyResize, applyDragDelta } from 'ooxml-core/geometry';
+import { imageContentType } from 'ooxml-core/drawingml';
+import { imageRectFromCrop, applyResize, applyDragDelta } from 'ooxml-core/geometry';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/shell.css?raw
 var shell_default = "/* Frame, title bar and status bar. Mirrors docx-viewer's chrome (styles/base.css,\n   chrome-titlebar.css, status-dialogs.css) with --xve-* tokens. */\n:host {\n	--xl: var(--xve-primary, var(--office-accent));\n	--xl-strong: color-mix(in srgb, var(--xve-primary, var(--office-accent)) 70%, #000);\n	--xl-soft: color-mix(in srgb, var(--xve-primary, var(--office-accent)) 12%, transparent);\n	--accent-soft: var(--xl-soft);\n	--ink: var(--xve-foreground, var(--office-foreground));\n	--muted: var(--xve-muted-foreground, var(--office-muted-foreground));\n	--line: var(--xve-border, var(--office-border));\n	--surface: var(--xve-card, var(--office-surface));\n	--chrome: var(--xve-background, var(--office-background));\n	display: block;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	color: var(--ink);\n	font: var(--office-font-size, 13px)/var(--office-line-height, 1.4)\n		var(--xve-font, var(--office-font, system-ui, sans-serif));\n}\n.xve-frame {\n	position: relative;\n	display: flex;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	overflow: hidden;\n	background: var(--surface);\n}\n:focus-visible {\n	outline: 2px solid var(--xve-ring, var(--office-ring));\n	outline-offset: 1px;\n}\n[hidden],\n[data-xve-hidden] {\n	display: none !important;\n}\n.xve-icon {\n	flex: none;\n}\n.xve-icon-button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: 28px;\n	height: 28px;\n	padding: 0 6px;\n	border: 0;\n	border-radius: 4px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.xve-icon-button:hover:not(:disabled),\n.xve-icon-button[aria-pressed='true'] {\n	background: var(--xl-soft);\n}\n.xve-icon-button:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n\n/* Workspace: formula bar, grid and sheet tabs between the ribbon and the status bar. */\n.xve-workspace {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--xve-sheet-bg, var(--office-paper));\n}\n.xve-formula-row {\n	flex: none;\n	min-width: 0;\n	border-bottom: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-grid-host {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	overflow: hidden;\n	background: var(--xve-sheet-bg, var(--office-paper));\n	color-scheme: light;\n}\n.xve-grid-host > * {\n	flex: 1;\n	min-width: 0;\n}\n.xve-tabs-row {\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n	background: var(--chrome);\n}\n.xve-empty {\n	position: absolute;\n	z-index: 5;\n	inset: 0;\n	display: grid;\n	place-items: center;\n	color: var(--muted);\n	background: var(--chrome);\n}\n:host([show-formula-bar='false']) .xve-formula-row,\n:host([show-toolbar='false']) .xve-ribbon {\n	display: none;\n}\n\n/* Title bar: drawn by the shared office-ui-title-bar; the mark, background and borders come from its tokens. */\n.xve-titlebar {\n	display: block;\n	flex: none;\n	--office-title-bar-background: var(--chrome);\n	--office-title-bar-foreground: var(--ink);\n	--office-title-bar-border: var(--line);\n	--office-title-bar-mark-background: var(--xl);\n	--office-title-bar-mark-foreground: var(\n		--xve-primary-foreground,\n		var(--office-accent-foreground)\n	);\n}\n\n/* Status bar: drawn by the shared office-ui-status-bar; this places it and styles the slotted stats. */\n.xve-status {\n	display: block;\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n}\n.xve-status-stats {\n	margin-inline-end: 10px;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--ink);\n	font-size: 11px;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n";
@@ -1584,62 +1586,25 @@ function showDialog(ctx, spec, handle) {
   const cancel = button(ctx, spec.cancelLabel ?? (ok ? "Cancel" : "Close"));
   footer.append(...spec.buttons ?? [], cancel, ...ok ? [ok] : []);
   dialog.append(body, footer);
-  return new Promise((resolve) => {
-    let done = false;
-    const finish = (result) => {
-      if (done) return;
-      done = true;
+  const session = createDialogSession({
+    element: dialog,
+    confirm: ok,
+    cancel,
+    ...spec.submit ? { submit: spec.submit } : {},
+    finish: () => {
       dialog.removeAttribute("open");
       dialog.remove();
       if (ctx.grid()) ctx.grid()?.focus();
       else if (opener instanceof doc.defaultView.HTMLElement && opener.isConnected)
         opener.focus({ preventScroll: true });
-      resolve(result);
-    };
-    let submitting = false;
-    const failed = (error) => ctx.toast(ctx.t(error instanceof Error ? error.message : String(error)), "error");
-    const settle = (result) => {
-      if (result !== void 0) finish(result);
-    };
-    const confirm2 = async () => {
-      if (done || submitting) return;
-      if (!spec.submit) return finish(void 0);
-      let outcome;
-      try {
-        outcome = spec.submit();
-      } catch (error) {
-        return failed(error);
-      }
-      if (!(outcome instanceof Promise)) return settle(outcome);
-      submitting = true;
-      if (ok) ok.disabled = true;
-      try {
-        settle(await outcome);
-      } catch (error) {
-        failed(error);
-      } finally {
-        submitting = false;
-        if (ok && !done) ok.disabled = false;
-      }
-    };
-    dialog.addEventListener("office-dialog-close", () => finish(void 0));
-    cancel.addEventListener("click", () => finish(void 0));
-    ok?.addEventListener("click", () => void confirm2());
-    dialog.addEventListener("keydown", (event) => {
-      const el4 = event.target;
-      if (event.key === "Escape" && !event.defaultPrevented) {
-        event.preventDefault();
-        finish(void 0);
-      } else if (event.key === "Enter" && ok && el4 instanceof doc.defaultView.HTMLInputElement && el4.type !== "checkbox" && el4.type !== "radio" && el4.type !== "file") {
-        event.preventDefault();
-        void confirm2();
-      }
-    });
-    dialogHost(ctx).append(dialog);
-    dialog.setAttribute("open", "");
-    handle?.({ element: dialog, close: () => finish(void 0) });
-    spec.opened?.();
+    },
+    error: (error) => ctx.toast(ctx.t(error instanceof Error ? error.message : String(error)), "error")
   });
+  dialogHost(ctx).append(dialog);
+  dialog.setAttribute("open", "");
+  handle?.({ element: dialog, close: () => session.close() });
+  spec.opened?.();
+  return session.result;
 }
 
 // src/xlsx/dialogs/package-password.ts
@@ -2406,16 +2371,46 @@ function swatchGrid(ctx, label, noneLabel, initial, onChange) {
   const theme = ctx.workbook()?.theme ?? { colors: [], majorFont: "", minorFont: "" };
   const grid = excelColorGrid(ctx.host.ownerDocument, theme, ctx.t, {
     noneLabel,
-    label: ctx.t(label)
+    label: ctx.t(label),
+    moreLabel: "More Colors..."
   });
   grid.classList.add("xve-swatch-picker");
   let current = initial;
   const paint = () => {
     grid.value = excelGridValue(current, theme);
   };
+  let draft = { color: current };
+  const write = (patch) => {
+    draft = { ...draft, ...patch };
+    current = draft.color;
+    paint();
+    onChange?.(current);
+  };
+  const control = createLiveColorInput({
+    read: () => ({ key: label, color: excelGridValue(current, theme), value: draft }),
+    lookup: () => draft,
+    patch: (_value, hex3) => ({ color: { rgb: `FF${hex3.slice(1).toUpperCase()}` } }),
+    preview: write,
+    commit: write,
+    remember: () => {
+    }
+  });
+  const input = ctx.host.ownerDocument.createElement("input");
+  input.type = "color";
+  input.hidden = true;
+  input.setAttribute("aria-label", ctx.t(label));
+  for (const name of ["input", "change", "blur"])
+    input.addEventListener(name, (event) => handleLiveColorEvent(control, event));
+  grid.append(input);
+  grid.addEventListener("office-color-more", () => {
+    const color = excelGridValue(current, theme);
+    input.value = /^#[\da-f]{6}$/i.test(color) ? color : "#000000";
+    input.click();
+  });
   grid.addEventListener("office-color-pick", (event) => {
     event.stopPropagation();
     current = pickedExcelColor(event.detail, true);
+    draft = { color: current };
     paint();
     onChange?.(current);
   });
@@ -2425,6 +2420,7 @@ function swatchGrid(ctx, label, noneLabel, initial, onChange) {
     value: () => current,
     set(color) {
       current = color;
+      draft = { color };
       paint();
     },
     focus: () => grid.focus()
@@ -2717,6 +2713,7 @@ function fillTab(init) {
   pattern.addEventListener("change", mark);
   const sample = el(ctx, "div", "xve-sample");
   sample.dataset.sample = "";
+  sample.dataset.fillPreview = "";
   const paint = () => {
     const bg = resolveColor(background.value(), theme) ?? "#ffffff";
     const fg = resolveColor(patternColor.value(), theme) ?? "#000000";
@@ -9943,7 +9940,7 @@ var objectCacheStatus = (object) => object.cacheGenerated ? "generated-drawing"
 function paintSmartArt(ctx, node, obj2, theme, size = {
   w: (obj2.anchor.ext?.cx ?? 4572e3) / 9525,
   h: (obj2.anchor.ext?.cy ?? 2667e3) / 9525
-}) {
+}, pictureResolver) {
   const doc = node.ownerDocument;
   node.classList.add("xg-smartart");
   const label = obj2.name || ctx.t("SmartArt graphic");
@@ -9983,6 +9980,7 @@ function paintSmartArt(ctx, node, obj2, theme, size = {
     art.style.height = "100%";
     art.schemeColors = smartArtSchemeColors(theme);
     art.schemeFonts = theme ? { major: theme.majorFont, minor: theme.minorFont } : {};
+    if (pictureResolver) art.pictureResolver = pictureResolver;
     art.drawing = diagram;
     node.append(art);
   } else {
@@ -14154,6 +14152,30 @@ var DrawingLayer = class {
       });
       const url = this.#url(drawing.partName, drawing.contentType);
       if (url) img.src = url;
+      const rect = imageRectFromCrop(
+        { x: 0, y: 0, width: box.w, height: box.h },
+        { cropLeft: 0, cropTop: 0, cropRight: 0, cropBottom: 0, ...drawing.crop }
+      );
+      node.style.overflow = "hidden";
+      Object.assign(img.style, {
+        position: "absolute",
+        left: `${rect.x}px`,
+        top: `${rect.y}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        maxWidth: "none"
+      });
+      if (drawing.effects?.length) {
+        const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("width", "0");
+        svg.setAttribute("height", "0");
+        const defs = doc.createElementNS(svg.namespaceURI, "defs");
+        svg.append(defs);
+        const effects = pictureEffectFilter(doc, defs, drawing.effects);
+        if (effects.filter) img.style.filter = effects.filter;
+        node.dataset.unappliedPictureEffects = effects.unapplied.join(", ");
+        node.append(svg);
+      }
       node.append(img);
       node.setAttribute("role", "img");
     } else if (drawing.kind === "chart") {
@@ -14167,7 +14189,14 @@ var DrawingLayer = class {
     } else if (drawing.kind === "timeline") {
       paintTimeline(node, drawing, box.w, box.h, view.ctx, view.workbook());
     } else if (drawing.kind === "smartArt") {
-      paintSmartArt(view.ctx, node, drawing, view.workbook()?.theme, box);
+      paintSmartArt(
+        view.ctx,
+        node,
+        drawing,
+        view.workbook()?.theme,
+        box,
+        (part) => this.#url(part, imageContentType(part))
+      );
     } else if (drawing.chartEx) {
       this.#paintChart(node, drawing.chartEx, box);
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "1.30.0",
+	"version": "1.32.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -171,7 +171,7 @@
 		"dompurify": "^3.4.17",
 		"emf-converter": "4.23.1",
 		"lit": "^3.3.3",
-		"ooxml-core": "^1.29.0",
+		"ooxml-core": "^1.30.1",
 		"opentype.js": "^2.0.0",
 		"prosemirror-collab": "^1.3.1",
 		"prosemirror-commands": "^1.7.2",

package/dist/pptx/chunk-WM5SW737.mjs

@@ -1,27 +0,0 @@
-// src/pptx/render/controller/controller.ts
-function createControllerStore(initial) {
-  let snapshot = initial;
-  const listeners = /* @__PURE__ */ new Set();
-  const set = (next) => {
-    if (Object.is(next, snapshot)) {
-      return;
-    }
-    snapshot = next;
-    for (const listener of [...listeners]) {
-      listener();
-    }
-  };
-  return {
-    getSnapshot: () => snapshot,
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    set,
-    update: (recipe) => set(recipe(snapshot))
-  };
-}
-
-export { createControllerStore };

package/dist/pptx/chunk-Y6DO6SVT.cjs

@@ -1,29 +0,0 @@
-'use strict';
-
-// src/pptx/render/controller/controller.ts
-function createControllerStore(initial) {
-  let snapshot = initial;
-  const listeners = /* @__PURE__ */ new Set();
-  const set = (next) => {
-    if (Object.is(next, snapshot)) {
-      return;
-    }
-    snapshot = next;
-    for (const listener of [...listeners]) {
-      listener();
-    }
-  };
-  return {
-    getSnapshot: () => snapshot,
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    set,
-    update: (recipe) => set(recipe(snapshot))
-  };
-}
-
-exports.createControllerStore = createControllerStore;