ooxml-ui 1.16.0 → 1.17.0

package/dist/xlsx.js

@@ -1,19 +1,19 @@
 import { statusLayout, watchStatusWidth } from './chunk-UBBC5FH7.js';
 import { trackPointerGesture } from './chunk-GSXOZCAN.js';
-import './chunk-QUG6IRQQ.js';
-import { syncRibbonAddIns } from './chunk-UIVYZERK.js';
-export { RIBBON_ADD_IN_EVENT } from './chunk-UIVYZERK.js';
+import './chunk-CQ5BMX2Z.js';
+import { syncRibbonAddIns } from './chunk-VUSDTDZS.js';
+export { RIBBON_ADD_IN_EVENT } from './chunk-VUSDTDZS.js';
 import { defineSmartArt } from './chunk-ANPFMQ6E.js';
-import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-JVNIZBG7.js';
-export { XLSX_EDITOR_EVENTS } from './chunk-JVNIZBG7.js';
+import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-VCXKKGQZ.js';
+export { XLSX_EDITOR_EVENTS } from './chunk-VCXKKGQZ.js';
 import './chunk-GSWCAZQ3.js';
 import { shadcnBridge } from './chunk-7E3HU7RL.js';
-import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, defineOptionsDialog, rangeControl, defineDialog, optionsLabels, runKeyTips, assignKeyTips, userInterfaceSection, personalizeSection, optionText, unavailableControl, unavailableCategory, defineGallery, defineColorGrid, defineContextMenu, defineCommentsPane, parseSvgPreview } from './chunk-CHFMXUPK.js';
+import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, defineOptionsDialog, rangeControl, defineDialog, optionsLabels, runKeyTips, assignKeyTips, userInterfaceSection, personalizeSection, optionText, unavailableControl, unavailableCategory, defineGallery, defineColorGrid, defineContextMenu, defineCommentsPane, defineChartPicker } from './chunk-KRQ5T2GX.js';
 import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
 import { definePresence } from './chunk-KNC2UEUR.js';
 import { withTokens } from './chunk-CWBSXK7P.js';
 import './chunk-LD3K2RDN.js';
-import { SPECIAL_CODES, FRACTION_CODES, translate, AUTOSUM_FUNCTIONS, themeToCssVars, lightTheme, darkTheme, ICON_ACCENTS, ICON_PATHS, normalizeEditorLocale, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, DirtyState, createCommandRegistry, createDialogRegistry, activeRef, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, historyOf, onRibbonTabsChange, activeChart, editChart, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, TEMPLATES, createTemplateWorkbook, isMenuSeparator, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, fontCommands, alignmentCommands, numberCommands, cellCommands, editingCommands, pageLayoutCommands, pageBreakCommands, formulaCommands, dataCommands, whatIfCommands, contextualCommands, reviewTab, viewTab, helpTab, editBridge, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, target, tableAt, timelineSourceAt, slicerSourceAt, viewing, activeTable, numberFormatOptions, FONT_NAMES, FONT_SIZES, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, activeSlicer, activeTimeline, isSingleCell, spanRange, selectionCellCount, addRange, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, recentFunctions, evaluateRef, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
+import { SPECIAL_CODES, FRACTION_CODES, translate, INSERT_CHART_TYPES, AUTOSUM_FUNCTIONS, themeToCssVars, lightTheme, darkTheme, ICON_ACCENTS, ICON_PATHS, normalizeEditorLocale, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, DirtyState, createCommandRegistry, createDialogRegistry, activeRef, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, historyOf, onRibbonTabsChange, activeChart, editChart, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, TEMPLATES, createTemplateWorkbook, isMenuSeparator, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, fontCommands, alignmentCommands, numberCommands, cellCommands, editingCommands, pageLayoutCommands, pageBreakCommands, formulaCommands, dataCommands, whatIfCommands, contextualCommands, reviewTab, viewTab, helpTab, editBridge, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, target, tableAt, timelineSourceAt, slicerSourceAt, viewing, activeTable, numberFormatOptions, FONT_NAMES, FONT_SIZES, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, activeSlicer, activeTimeline, isSingleCell, spanRange, selectionCellCount, addRange, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, evaluateRef, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, recentFunctions, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
 export { EDITOR_LOCALES, THEME_KEYS, normalizeEditorLocale, registerRibbonTabs, themeToCssVars, darkTheme as xlsxDarkTheme, lightTheme as xlsxLightTheme } from 'ooxml-core/xlsx/ui';
 import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, CHART_FILL_PARTS, selectionStats, formatSelectionStat, printRange, formatRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, chartGradientStopTransparency, paginateWorksheet, resolveColor, DEFAULT_THEME, pageHeaderFooter, createGridMetrics, createPrintMergeIndex, formatAddress, cellView, renderHeaderFooterRuns, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, navigate, anchorToPixelBox, renderChartSvg, selectionOfPeriods, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, pivotGroupableFields, pivotGroupableDateFields, pivotSubtotalFields, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, slicerStyleColors, slicerGeometry, timelineGeometry, TIMELINE_PERIOD_WIDTH, TIMELINE_METRICS, timelineView, slicerItems, selectionAfterClick, isCellError, layoutRemoteSelections, parseHtmlTable, toggleAbsolute, rangeContains, pageViewLayout, formatValue, isDateFormat, pictureAnchorAt, selectedSparklineGroups, pivotTableAt, validateDefinedName, usedRange, pivotAxisChoices, parseAddress, PIVOT_DATE_UNITS, PIVOT_SUBTOTAL_ORDER, parseRange, parseInputCell, displayText, styleAt, rangesIntersect, chartColorScheme, SLICER_STYLE_NAMES, slicerStyleLabel, slicerStylePreview, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, pageBreakPreview, normalizeRange, currentRegion, autoFitColumnWidth, pageViewCellRect, pageOfCell, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, pivotRowFields, pivotValuesIndex, pivotSourceData, defaultFieldGroup, defaultDateGroup, dateGroupDays, pivotIsoToSerial, fieldSubtotalFunctions, printTitles, formatPrintTitleSpan, parsePrintTitleSpan, scenariosOf, PAGE_VIEW_GAP, pivotPageItems, pivotPageItemLabel, pivotSerialToIso, previewScenario, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, planBreakDrag, resizePrintArea, validateTableName, pixelsToEmu, pageViewHit, resizedFrameAnchor, headerFooterKey, splitHeaderFooter, composeHeaderFooter } from 'ooxml-core/xlsx';
 import { hyperlinkPolicy } from 'ooxml-core/opc';
@@ -6748,16 +6748,17 @@ function openFillSeries(ctx) {
 var PICTURE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/bmp", "image/webp"].filter(
   (type) => type in IMAGE_EXTENSIONS
 );
-var CHART_TYPES = [
-  ["column", "Column", "chartColumn"],
-  ["line", "Line", "chartLine"],
-  ["pie", "Pie", "chartPie"],
-  ["bar", "Bar", "chartBar"],
-  ["area", "Area", "chartArea"],
-  ["scatter", "Scatter", "chartScatter"],
-  ["doughnut", "Doughnut", "chartPie"],
-  ["radar", "Radar", "chartLine"]
-];
+var CHART_GLYPHS = {
+  column: "chartColumn",
+  line: "chartLine",
+  pie: "chartPie",
+  bar: "chartBar",
+  area: "chartArea",
+  scatter: "chartScatter",
+  doughnut: "chartPie",
+  radar: "chartLine"
+};
+var CHART_TYPES = INSERT_CHART_TYPES.map(([type, label]) => [type, label, CHART_GLYPHS[type] ?? "chartColumn"]);
 function pickImage(ctx) {
   return new Promise((resolve) => {
     const input = ctx.host.ownerDocument.createElement("input");
@@ -6876,92 +6877,58 @@ function openInsertChart(ctx, props2 = {}) {
   const t = target(ctx);
   if (!t) return Promise.resolve(void 0);
   const change = props2.change === true ? activeChart(ctx) : void 0;
-  let type = props2.type ?? change?.chart.chartType ?? "column";
   const range2 = regionOf(t);
-  defineGallery(ctx.host.ownerDocument.defaultView?.customElements);
-  const tiles = ctx.host.ownerDocument.createElement("office-ui-gallery");
-  tiles.setAttribute("mode", "panel");
-  const grouping = select(ctx, GROUPINGS, change?.chart.grouping ?? "clustered");
-  const groupingField = field(ctx, "Grouping", grouping);
-  const title = textInput(ctx, change?.chart.title ?? "");
-  const preview = el(ctx, "div", "xve-preview");
-  preview.setAttribute("aria-label", ctx.t("Preview"));
-  preview.setAttribute("role", "img");
-  const current = () => {
+  const doc = ctx.host.ownerDocument;
+  defineChartPicker(doc.defaultView?.customElements);
+  const picker = doc.createElement("office-ui-chart-picker");
+  picker.types = CHART_TYPES.map(([id, label]) => ({ id, label: ctx.t(label) }));
+  picker.groupings = GROUPINGS.map(([id, label]) => ({ id, label: ctx.t(label) }));
+  picker.groupedTypes = ["column", "bar"];
+  picker.labels = {
+    chartType: ctx.t("Chart type"),
+    grouping: ctx.t("Grouping"),
+    title: ctx.t("Chart title"),
+    preview: ctx.t("Preview")
+  };
+  picker.changeOnly = change !== void 0;
+  picker.value = {
+    type: props2.type ?? change?.chart.chartType ?? "column",
+    grouping: change?.chart.grouping ?? "clustered",
+    title: change?.chart.title ?? ""
+  };
+  const current = (value) => {
+    const grouping = value.grouping;
     if (change)
-      return {
-        ...structuredClone(change.chart),
-        chartType: type,
-        grouping: grouping.value
-      };
-    return buildChart(t.workbook, t.sheet, range2, type, {
-      grouping: grouping.value,
-      ...title.value.trim() ? { title: title.value.trim() } : {}
+      return { ...structuredClone(change.chart), chartType: value.type, grouping };
+    return buildChart(t.workbook, t.sheet, range2, value.type, {
+      grouping,
+      ...value.title.trim() ? { title: value.title.trim() } : {}
     });
   };
-  const refresh = () => {
-    tiles.state = {
-      id: "chart-type",
-      label: ctx.t("Chart type"),
-      sections: [
-        {
-          columns: 4,
-          tileWidth: 96,
-          tileHeight: 60,
-          items: CHART_TYPES.map(([key, label]) => ({
-            id: key,
-            label: ctx.t(label),
-            applied: key === type,
-            preview: renderChartSvg(
-              chartView(
-                t.workbook,
-                t.sheet,
-                { ...current(), chartType: key, title: "", showLegend: false },
-                (ref) => evaluateRef(t.workbook, t.sheet, ref)
-              ),
-              360,
-              220
-            )
-          }))
-        }
-      ]
-    };
-    groupingField.hidden = !(type === "column" || type === "bar");
-    const model = chartView(
-      t.workbook,
-      t.sheet,
-      current(),
-      (ref) => evaluateRef(t.workbook, t.sheet, ref)
+  picker.drawPreview = (value, size, tile2) => {
+    const chart = { ...current(value), ...tile2 ? { title: "", showLegend: false } : {} };
+    return renderChartSvg(
+      chartView(t.workbook, t.sheet, chart, (ref) => evaluateRef(t.workbook, t.sheet, ref)),
+      size.width,
+      size.height
     );
-    const node = parseSvgPreview(ctx.host.ownerDocument, renderChartSvg(model, 360, 220));
-    preview.replaceChildren(...node ? [node] : []);
   };
-  tiles.addEventListener("office-gallery-pick", (event) => {
-    const key = event.detail.itemId;
-    if (!CHART_TYPES.some(([id]) => id === key)) return;
-    type = key;
-    refresh();
-  });
-  grouping.addEventListener("change", refresh);
-  title.addEventListener("input", refresh);
-  const body = [tiles, groupingField];
-  if (!change) body.push(field(ctx, "Chart title", title));
-  body.push(preview);
+  const body = [picker];
   if (!change && t.ws.rows.size === 0)
     body.push(text(ctx, "Select the data for the chart first, then insert it."));
-  refresh();
   return showDialog(ctx, {
     name: "insert-chart",
     heading: change ? "Change Chart Type" : "Insert Chart",
     wide: true,
     body,
-    opened: () => tiles.querySelector(`[data-gallery-item="${type}"]`)?.focus(),
+    opened: () => picker.shadowRoot?.querySelector(`[data-gallery-item="${picker.value.type}"]`)?.focus(),
     submit: () => {
-      const chart = current();
+      const value = picker.value;
+      const chart = current(value);
       if (change)
         editChart(ctx, () => ({
-          chartType: type,
-          ...type === "column" || type === "bar" ? { grouping: grouping.value } : {}
+          chartType: value.type,
+          ...value.type === "column" || value.type === "bar" ? { grouping: value.grouping } : {}
         }));
       else {
         const { kind: _kind, ...model } = chart;

package/package.json

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