ooxml-ui 1.29.0 → 1.30.0

package/dist/chunk-E4H3Y7M4.js

@@ -0,0 +1,462 @@
+import { chartSpaceFormatSource } from './chunk-HNREZW5U.js';
+import { OfficeElement, controlStyles, flag, emit, definer } from './chunk-QLHCGV4C.js';
+import { html, nothing } from 'lit';
+import { live } from 'lit/directives/live.js';
+import { chartExSpaceDataSheet, CHART_EX_LAYOUTS, chartExStyleSpace } from 'ooxml-core/chart';
+import { normalizeLocale } from 'ooxml-core/i18n';
+
+var en = [
+  "Chart title",
+  "Chart type",
+  "Series",
+  "Add series",
+  "Remove series",
+  "Connector lines",
+  "Subtotal points",
+  "Bin size",
+  "Bin count",
+  "Parent labels",
+  "None",
+  "Banner",
+  "Overlapping",
+  "Mean line",
+  "Mean marker",
+  "Outliers",
+  "Inner points",
+  "Quartile method",
+  "Inclusive",
+  "Exclusive",
+  "Axis",
+  "Minimum",
+  "Maximum",
+  "Major unit",
+  "Minor unit",
+  "Show tick labels",
+  "Point label",
+  "Show value",
+  "Waterfall",
+  "Histogram",
+  "Box and Whisker",
+  "Treemap",
+  "Sunburst",
+  "Funnel",
+  "Map"
+];
+var dictionaries = {
+  en,
+  de: [
+    "Diagrammtitel",
+    "Diagrammtyp",
+    "Datenreihe",
+    "Datenreihe hinzuf\xFCgen",
+    "Datenreihe entfernen",
+    "Verbindungslinien",
+    "Zwischensummenpunkte",
+    "Klassenbreite",
+    "Klassenanzahl",
+    "\xDCbergeordnete Beschriftungen",
+    "Keine",
+    "Banner",
+    "\xDCberlappend",
+    "Mittelwertlinie",
+    "Mittelwertmarkierung",
+    "Ausrei\xDFer",
+    "Innere Punkte",
+    "Quartilmethode",
+    "Inklusiv",
+    "Exklusiv",
+    "Achse",
+    "Minimum",
+    "Maximum",
+    "Haupteinheit",
+    "Hilfseinheit",
+    "Teilstrichbeschriftungen anzeigen",
+    "Datenpunktbeschriftung",
+    "Wert anzeigen",
+    "Wasserfall",
+    "Histogramm",
+    "Kastengrafik",
+    "Treemap",
+    "Sunburst",
+    "Trichter",
+    "Karte"
+  ],
+  fr: [
+    "Titre du graphique",
+    "Type de graphique",
+    "S\xE9rie",
+    "Ajouter une s\xE9rie",
+    "Supprimer la s\xE9rie",
+    "Lignes de connexion",
+    "Points de sous-total",
+    "Largeur de classe",
+    "Nombre de classes",
+    "\xC9tiquettes parentes",
+    "Aucune",
+    "Banni\xE8re",
+    "Superpos\xE9es",
+    "Ligne de moyenne",
+    "Marqueur de moyenne",
+    "Valeurs aberrantes",
+    "Points internes",
+    "M\xE9thode des quartiles",
+    "Inclusive",
+    "Exclusive",
+    "Axe",
+    "Minimum",
+    "Maximum",
+    "Unit\xE9 principale",
+    "Unit\xE9 secondaire",
+    "Afficher les \xE9tiquettes de graduation",
+    "\xC9tiquette de point",
+    "Afficher la valeur",
+    "Cascade",
+    "Histogramme",
+    "Bo\xEEte \xE0 moustaches",
+    "Compartimentage",
+    "Rayons de soleil",
+    "Entonnoir",
+    "Carte"
+  ],
+  es: [
+    "T\xEDtulo del gr\xE1fico",
+    "Tipo de gr\xE1fico",
+    "Serie",
+    "Agregar serie",
+    "Quitar serie",
+    "L\xEDneas de conexi\xF3n",
+    "Puntos de subtotal",
+    "Ancho del intervalo",
+    "N\xFAmero de intervalos",
+    "Etiquetas principales",
+    "Ninguna",
+    "Banda",
+    "Superpuestas",
+    "L\xEDnea de media",
+    "Marcador de media",
+    "Valores at\xEDpicos",
+    "Puntos internos",
+    "M\xE9todo de cuartiles",
+    "Inclusivo",
+    "Exclusivo",
+    "Eje",
+    "M\xEDnimo",
+    "M\xE1ximo",
+    "Unidad principal",
+    "Unidad secundaria",
+    "Mostrar etiquetas de graduaci\xF3n",
+    "Etiqueta de punto",
+    "Mostrar valor",
+    "Cascada",
+    "Histograma",
+    "Cajas y bigotes",
+    "Rect\xE1ngulos",
+    "Proyecci\xF3n solar",
+    "Embudo",
+    "Mapa"
+  ],
+  "zh-CN": [
+    "\u56FE\u8868\u6807\u9898",
+    "\u56FE\u8868\u7C7B\u578B",
+    "\u7CFB\u5217",
+    "\u6DFB\u52A0\u7CFB\u5217",
+    "\u5220\u9664\u7CFB\u5217",
+    "\u8FDE\u63A5\u7EBF",
+    "\u5C0F\u8BA1\u6570\u636E\u70B9",
+    "\u7BB1\u5BBD\u5EA6",
+    "\u7BB1\u6570\u91CF",
+    "\u7236\u7EA7\u6807\u7B7E",
+    "\u65E0",
+    "\u6A2A\u5E45",
+    "\u91CD\u53E0",
+    "\u5E73\u5747\u503C\u7EBF",
+    "\u5E73\u5747\u503C\u6807\u8BB0",
+    "\u5F02\u5E38\u503C",
+    "\u5185\u90E8\u6570\u636E\u70B9",
+    "\u56DB\u5206\u4F4D\u6570\u65B9\u6CD5",
+    "\u5305\u542B",
+    "\u4E0D\u5305\u542B",
+    "\u5750\u6807\u8F74",
+    "\u6700\u5C0F\u503C",
+    "\u6700\u5927\u503C",
+    "\u4E3B\u8981\u5355\u4F4D",
+    "\u6B21\u8981\u5355\u4F4D",
+    "\u663E\u793A\u523B\u5EA6\u6807\u7B7E",
+    "\u6570\u636E\u70B9\u6807\u7B7E",
+    "\u663E\u793A\u6570\u503C",
+    "\u7011\u5E03\u56FE",
+    "\u76F4\u65B9\u56FE",
+    "\u7BB1\u5F62\u56FE",
+    "\u6811\u72B6\u56FE",
+    "\u65ED\u65E5\u56FE",
+    "\u6F0F\u6597\u56FE",
+    "\u5730\u56FE"
+  ]
+};
+function chartExOptionsText(locale, key) {
+  const normalized = normalizeLocale(locale, ["en", "de", "fr", "es", "zh-CN"], "en");
+  return dictionaries[normalized][en.indexOf(key)] ?? key;
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chart/chartex-options.css?raw
+var chartex_options_default = ":host {\n	display: block;\n	color: var(--office-foreground);\n	font: inherit;\n}\nfieldset {\n	margin: 8px 0;\n	border: 1px solid var(--office-border);\n	padding: 8px;\n}\nlabel {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: 8px;\n	margin: 6px 0;\n}\ninput,\nselect {\n	color: var(--office-foreground);\n	background: var(--office-surface);\n	border: 1px solid var(--office-border);\n	max-width: 180px;\n	padding: 4px;\n}\nbutton {\n	margin: 4px;\n	color: var(--office-foreground);\n	background: var(--office-surface);\n	border: 1px solid var(--office-border);\n	padding: 4px 8px;\n}\n";
+
+// src/chart/chartex-options.ts
+var OfficeUiChartExOptions = class extends OfficeElement {
+  static styles = controlStyles(chartex_options_default);
+  static properties = {
+    space: { attribute: false },
+    locale: { type: String },
+    disabled: flag
+  };
+  seriesIndex = 0;
+  axisIndex = 0;
+  pointIndex = 0;
+  send(action) {
+    if (!this.disabled) emit(this, "office-chart-ex-edit", { action });
+  }
+  t(key) {
+    return chartExOptionsText(this.locale ?? "en", key);
+  }
+  check(key, value, change) {
+    return html`<label
+			>${this.t(key)}<input
+				type="checkbox"
+				aria-label=${this.t(key)}
+				.checked=${live(value ?? false)}
+				?disabled=${this.disabled}
+				@change=${(e) => change(e.target.checked)}
+		/></label>`;
+  }
+  number(key, value, change) {
+    return html`<label
+			>${this.t(key)}<input
+				type="number"
+				aria-label=${this.t(key)}
+				.value=${live(value === void 0 ? "" : String(value))}
+				?disabled=${this.disabled}
+				@change=${(e) => {
+      const input = e.target;
+      const n = input.value === "" ? void 0 : Number(input.value);
+      if (n === void 0 || Number.isFinite(n)) change(n);
+    }}
+		/></label>`;
+  }
+  render() {
+    const space = this.space;
+    if (!space) return nothing;
+    const index = Math.min(this.seriesIndex, space.plotArea.series.length - 1);
+    const series = space.plotArea.series[index];
+    if (!series) return nothing;
+    const options = series.layoutProperties;
+    const axisIndex = Math.min(this.axisIndex, Math.max(0, space.plotArea.axes.length - 1));
+    const numeric = space.plotArea.axes[axisIndex];
+    const layoutNames = {
+      waterfall: "Waterfall",
+      clusteredColumn: "Histogram",
+      boxWhisker: "Box and Whisker",
+      treemap: "Treemap",
+      sunburst: "Sunburst",
+      funnel: "Funnel",
+      regionMap: "Map"
+    };
+    const value = (key) => numeric?.scaling?.kind === "val" && typeof numeric.scaling[key] === "number" ? numeric.scaling[key] : void 0;
+    const scale = (key, number) => this.send({
+      op: "axis",
+      axisIndex,
+      edit: {
+        scaling: {
+          ...numeric?.scaling?.kind === "val" ? numeric.scaling : { kind: "val" },
+          [key]: number ?? "auto"
+        }
+      }
+    });
+    const points = chartExSpaceDataSheet(space).categories.length;
+    const label = series.dataLabels?.labels.find((label2) => label2.index === this.pointIndex);
+    return html` <label
+				>${this.t("Chart title")}<input
+					type="text"
+					aria-label=${this.t("Chart title")}
+					.value=${live(space.title?.tx?.value ?? space.title?.tx?.rich?.text ?? "")}
+					?disabled=${this.disabled}
+					@change=${(e) => this.send({ op: "title", text: e.target.value || void 0 })}
+			/></label>
+			<label
+				>${this.t("Chart type")}<select
+					aria-label=${this.t("Chart type")}
+					.value=${live(series.layoutId)}
+					?disabled=${this.disabled}
+					@change=${(e) => this.send({ op: "layout", layout: e.target.value })}
+					>${CHART_EX_LAYOUTS.filter((layout) => layout !== "regionMap" || series.layoutId === "regionMap").map((layout) => html`<option value=${layout}>${this.t(layoutNames[layout])}</option>`)}</select
+				></label
+			>
+			<label
+				>${this.t("Series")}<select
+					aria-label=${this.t("Series")}
+					.value=${live(String(index))}
+					@change=${(e) => {
+      this.seriesIndex = Number(e.target.value);
+      this.requestUpdate();
+    }}
+					>${space.plotArea.series.map((series2, i) => html`<option value=${i}>${series2.tx?.value ?? series2.tx?.rich?.text ?? i + 1}</option>`)}</select
+				></label
+			>
+			<button
+				?disabled=${this.disabled || !["boxWhisker", "clusteredColumn"].includes(series.layoutId)}
+				@click=${() => this.send({ op: "addSeries", name: `${this.t("Series")} ${space.plotArea.series.length + 1}`, templateIndex: index })}
+				>${this.t("Add series")}</button
+			>
+			<button
+				?disabled=${this.disabled || space.plotArea.series.filter((s) => s.ownerIndex === void 0).length < 2}
+				@click=${() => this.send({ op: "removeSeries", seriesIndex: index })}
+				>${this.t("Remove series")}</button
+			>
+			${series.layoutId === "waterfall" ? html`<fieldset
+							><legend>${this.t("Waterfall")}</legend>
+							${this.check("Connector lines", options?.visibility?.connectorLines ?? true, (value2) => this.send({ op: "waterfall", seriesIndex: index, options: { connectorLines: value2 } }))}
+							<label
+								>${this.t("Subtotal points")}<input
+									aria-label=${this.t("Subtotal points")}
+									.value=${live((options?.subtotals ?? []).join(", "))}
+									?disabled=${this.disabled}
+									@change=${(e) => {
+      const text = e.target.value;
+      const subtotals = text.trim() ? text.split(",").map((v) => Number(v.trim())) : [];
+      if (subtotals.every((n) => Number.isSafeInteger(n) && n >= 0 && n < points))
+        this.send({ op: "waterfall", seriesIndex: index, options: { subtotals } });
+    }} /></label
+						></fieldset>` : nothing}
+			${series.layoutId === "clusteredColumn" ? html`<fieldset
+							><legend>${this.t("Histogram")}</legend>${this.number(
+      "Bin size",
+      options?.binning?.binSize,
+      (value2) => {
+        if (value2 !== void 0 && value2 > 0)
+          this.send({
+            op: "binning",
+            seriesIndex: index,
+            binning: { ...options?.binning, binSize: value2 }
+          });
+      }
+    )}${this.number("Bin count", options?.binning?.binCount, (value2) => {
+      if (value2 !== void 0 && Number.isSafeInteger(value2) && value2 > 0) {
+        const { binSize: _size, ...rest } = options?.binning ?? {};
+        this.send({
+          op: "binning",
+          seriesIndex: index,
+          binning: { ...rest, binCount: value2 }
+        });
+      }
+    })}</fieldset
+						>` : nothing}
+			${series.layoutId === "treemap" ? html`<label
+							>${this.t("Parent labels")}<select
+								aria-label=${this.t("Parent labels")}
+								.value=${live(options?.parentLabelLayout ?? "banner")}
+								?disabled=${this.disabled}
+								@change=${(e) => this.send({ op: "parentLabels", seriesIndex: index, layout: e.target.value })}
+								>${["none", "banner", "overlapping"].map((v, i) => html`<option value=${v}>${this.t(["None", "Banner", "Overlapping"][i])}</option>`)}</select
+							></label
+						>` : nothing}
+			${series.layoutId === "boxWhisker" ? html`<fieldset
+							><legend>${this.t("Box and Whisker")}</legend
+							>${["meanLine", "meanMarker", "outliers", "nonoutliers"].map((key, i) => this.check(["Mean line", "Mean marker", "Outliers", "Inner points"][i], options?.visibility?.[key], (value2) => this.send({ op: "boxWhisker", seriesIndex: index, options: { [key]: value2 } })))}<label
+								>${this.t("Quartile method")}<select
+									aria-label=${this.t("Quartile method")}
+									.value=${live(options?.statistics?.quartileMethod ?? "inclusive")}
+									?disabled=${this.disabled}
+									@change=${(e) => this.send({ op: "boxWhisker", seriesIndex: index, options: { quartileMethod: e.target.value } })}
+									><option value="inclusive">${this.t("Inclusive")}</option
+									><option value="exclusive">${this.t("Exclusive")}</option></select
+								></label
+							></fieldset
+						>` : nothing}
+			${space.plotArea.axes.length ? html`<fieldset
+							><legend>${this.t("Axis")}</legend
+							><select
+								aria-label=${this.t("Axis")}
+								.value=${live(String(axisIndex))}
+								@change=${(e) => {
+      this.axisIndex = Number(e.target.value);
+      this.requestUpdate();
+    }}
+								>${space.plotArea.axes.map((axis, i) => html`<option value=${i}>${axis.id ?? i + 1}</option>`)}</select
+							>${numeric?.scaling?.kind === "val" ? html`${this.number("Minimum", value("min"), (n) => scale("min", n))}${this.number("Maximum", value("max"), (n) => scale("max", n))}${this.number(
+      "Major unit",
+      value("majorUnit"),
+      (n) => {
+        if (n === void 0 || n > 0) scale("majorUnit", n);
+      }
+    )}${this.number("Minor unit", value("minorUnit"), (n) => {
+      if (n === void 0 || n > 0) scale("minorUnit", n);
+    })}` : nothing}${this.check("Show tick labels", !!numeric?.tickLabels, (show) => this.send({ op: "tickLabels", axisIndex, visible: show }))}</fieldset
+						>` : nothing}
+			<fieldset
+				><legend>${this.t("Point label")}</legend
+				><input
+					type="number"
+					min="0"
+					max=${Math.max(0, points - 1)}
+					aria-label=${this.t("Point label")}
+					.value=${live(String(this.pointIndex))}
+					@change=${(e) => {
+      const n = Number(e.target.value);
+      if (Number.isSafeInteger(n) && n >= 0 && n < points) {
+        this.pointIndex = n;
+        this.requestUpdate();
+      }
+    }}
+				/>${this.check("Show value", label?.visibility?.value ?? series.dataLabels?.visibility?.value, (show) => this.send({ op: "pointLabel", seriesIndex: index, pointIndex: this.pointIndex, label: { ...label, visibility: { ...label?.visibility, value: show } } }))}</fieldset
+			>`;
+  }
+};
+var defineChartExOptions = definer(
+  "office-ui-chart-ex-options",
+  () => OfficeUiChartExOptions
+);
+
+// src/chrome/status-layout.ts
+function statusLayout(width) {
+  if (!(width > 0))
+    return { words: true, language: true, views: true, compactPage: false, stats: Infinity };
+  return {
+    words: width >= 440,
+    language: width >= 640,
+    views: width >= 480,
+    compactPage: width < 520,
+    stats: width >= 760 ? Infinity : width >= 560 ? 2 : width >= 440 ? 1 : 0
+  };
+}
+function watchStatusWidth(element, onChange) {
+  if (typeof ResizeObserver === "undefined") return () => {
+  };
+  let last = -1;
+  const observer = new ResizeObserver(() => {
+    const width = element.clientWidth;
+    if (width === last) return;
+    last = width;
+    onChange(width);
+  });
+  observer.observe(element);
+  return () => observer.disconnect();
+}
+function compactPageText(text) {
+  const numbers = text.match(/\d+/g);
+  return numbers && numbers.length === 2 ? numbers.join("/") : text;
+}
+function chartExSpaceFormatSource(space, theme) {
+  const source = chartSpaceFormatSource(chartExStyleSpace(space), {
+    ...theme ? { theme } : {},
+    advanced: true
+  });
+  const { axisOptions: _axes, seriesOptions: _series, ...common } = source;
+  return {
+    ...common,
+    element(target) {
+      const view = source.element(target);
+      return { ...view, support: { ...view.support, secondaryAxis: false } };
+    }
+  };
+}
+
+export { chartExSpaceFormatSource, compactPageText, defineChartExOptions, statusLayout, watchStatusWidth };