@mwater/visualization 5.4.1 → 5.4.3

package/src/widgets/charts/layered/LayeredChartCompiler.ts

@@ -473,7 +473,7 @@ export default class LayeredChartCompiler {
   }
 
   // Compiles data for a polar chart (pie/donut) with no x axis
-  compileDataPolar(design: LayeredChartDesign, data: C3ChartData, locale: any): C3Data {
+  compileDataPolar(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data {
     let order: "asc" | "desc" | null
     const columns: any = []
     const types: { [key: string]: ChartTypes } = {}
@@ -670,7 +670,7 @@ export default class LayeredChartCompiler {
           const trendlineSeries = seriesY + ":trendline"
           columns.push([trendlineSeries].concat(calculateLinearRegression(yValues, xValues)))
           types[trendlineSeries] = line ? line() : "line"
-          names[trendlineSeries] = names[seriesY] + T` Trendline`
+          names[trendlineSeries] = names[seriesY] + " " + T`Trendline`
           xs[trendlineSeries] = seriesX
           colors[trendlineSeries] = layer.color || defaultColors[layerIndex]
           legendHide.push(trendlineSeries) // Hide in legend

package/src/widgets/charts/layered/LayeredChartDesignerComponent.tsx

@@ -270,7 +270,8 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
             "button",
             { className: "btn btn-link", type: "button", onClick: this.handleAddLayer },
             R("span", { className: "fas fa-plus" }),
-            T` Add Another Series`
+            " ",
+            T`Add Another Series`
           )
         : undefined
     )
@@ -481,7 +482,8 @@ class ThresholdsComponent extends React.Component<{
         "button",
         { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
         R("i", { className: "fa fa-plus" }),
-        T` Add Y Threshold`
+        " ",
+        T`Add Y Threshold`
       )
     )
   }

package/src/widgets/charts/layered/LayeredChartViewComponent.ts

@@ -105,7 +105,8 @@ export default class LayeredChartViewComponent extends React.Component<
         schema: this.props.schema,
         dataSource: this.props.dataSource,
         exprValues: this.props.data.header || {},
-        width: this.props.width
+        width: this.props.width,
+        locale: this.context
       })
     )
   }
@@ -125,7 +126,8 @@ export default class LayeredChartViewComponent extends React.Component<
         schema: this.props.schema,
         dataSource: this.props.dataSource,
         exprValues: this.props.data.footer || {},
-        width: this.props.width
+        width: this.props.width,
+        locale: this.context
       })
     )
   }
@@ -171,7 +173,7 @@ interface C3ChartComponentProps {
 class C3ChartComponent extends React.Component<C3ChartComponentProps> {
   throttledCreateChart: ((props: C3ChartComponentProps) => any) & _.Cancelable
   chart: any
-  chartDiv: any
+  chartDiv: HTMLDivElement | null
 
   constructor(props: C3ChartComponentProps) {
     super(props)
@@ -190,6 +192,10 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
       this.chart.destroy()
     }
 
+    if (!this.chartDiv) {
+      return
+    }
+
     const compiler = new LayeredChartCompiler({ schema: props.schema })
     const chartOptions: any = compiler.createChartOptions({
       design: this.props.design,
@@ -531,7 +537,7 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
 
     return R("div", {
       ref: c => {
-        return (this.chartDiv = c)
+        this.chartDiv = c
       }
     })
   }

package/src/widgets/charts/pivot/PivotChart.ts

@@ -14,6 +14,7 @@ import PivotChartLayoutBuilder from "./PivotChartLayoutBuilder"
 import { WidgetDataSource } from "../../WidgetDataSource"
 import { PivotChartDesign, PivotChartSegment } from "./PivotChartDesign"
 import { JsonQLFilter } from "../../../JsonQLFilter"
+import { translateHtmlItems } from "../../../richtext/ExprItemsTranslator"
 
 // Store true as a weakly cached value if a design is already clean
 const cleanDesignCache = new WeakCache()
@@ -422,4 +423,76 @@ export default class PivotChart extends Chart {
   getPlaceholderIcon() {
     return "fa-magic"
   }
+
+  translateDesign(design: PivotChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Helper function to translate a segment and its children
+      const translateSegment = (segment: PivotChartSegment) => {
+        // Translate segment label
+        if (segment.label) {
+          segment.label = translate(segment.label)
+        }
+
+        // Translate value axis labels
+        if (segment.valueAxis?.categoryLabels) {
+          for (const key in segment.valueAxis.categoryLabels) {
+            segment.valueAxis.categoryLabels[key] = translate(segment.valueAxis.categoryLabels[key])
+          }
+        }
+
+        // Translate null label
+        if (segment.valueAxis?.nullLabel) {
+          segment.valueAxis.nullLabel = translate(segment.valueAxis.nullLabel)
+        }
+
+        // Recursively translate children
+        if (segment.children) {
+          segment.children.forEach(translateSegment)
+        }
+      }
+
+      // Translate all row segments
+      draft.rows.forEach(translateSegment)
+
+      // Translate all column segments
+      draft.columns.forEach(translateSegment)
+
+      // Translate all intersections
+      for (const intersection of Object.values(draft.intersections)) {
+        // Translate value axis labels
+        if (intersection.valueAxis?.categoryLabels) {
+          for (const key in intersection.valueAxis.categoryLabels) {
+            intersection.valueAxis.categoryLabels[key] = translate(intersection.valueAxis.categoryLabels[key])
+          }
+        }
+
+        // Translate null label
+        if (intersection.valueAxis?.nullLabel) {
+          intersection.valueAxis.nullLabel = translate(intersection.valueAxis.nullLabel)
+        }
+
+        // Translate segment value axis override labels
+        if (intersection.segmentValueAxisOverrides) {
+          for (const axis of Object.values(intersection.segmentValueAxisOverrides)) {
+            if (axis?.categoryLabels) {
+              for (const key in axis.categoryLabels) {
+                axis.categoryLabels[key] = translate(axis.categoryLabels[key])
+              }
+            }
+            if (axis?.nullLabel) {
+              axis.nullLabel = translate(axis.nullLabel)
+            }
+          }
+        }
+      }
+
+      // Translate header and footer using ExprItemsTranslator
+      if (draft.header?.items) {
+        draft.header.items = translateHtmlItems(draft.header.items, translate)
+      }
+      if (draft.footer?.items) {
+        draft.footer.items = translateHtmlItems(draft.footer.items, translate)
+      }
+    })
+  }
 }

package/src/widgets/charts/pivot/PivotChartLayoutComponent.tsx

@@ -393,7 +393,7 @@ class LayoutCellComponent extends React.Component<LayoutCellComponentProps> {
       R("a", { className: "link-plain", onClick: this.props.onEditSection }, T`Edit`),
       cell.summarize
         ? [
-            R("span", { className: "text-muted" }, T` / `),
+            R("span", { className: "text-muted" }, ` / `),
             R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, T`Summarize`)
           ]
         : undefined

package/src/widgets/charts/pivot/SegmentDesignerComponent.tsx

@@ -95,13 +95,15 @@ export default class SegmentDesignerComponent extends React.Component<
       <ui.Radio key="single" value={this.state.mode} radioValue={"single"} onChange={this.handleMode}>
         {T`Single ${this.props.segmentType}`}
         <span className="text-muted">
-          {T` - used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
+          {` - `}
+          {T`used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
         </span>
       </ui.Radio>,
 
       <ui.Radio key="multiple" value={this.state.mode} radioValue={"multiple"} onChange={this.handleMode}>
         {T`Multiple ${this.props.segmentType}s`}
-        <span className="text-muted">{T` - disaggregate data by a field`}</span>
+        {" - "}
+        <span className="text-muted">{T`disaggregate data by a field`}</span>
       </ui.Radio>
     )
   }
@@ -170,7 +172,7 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: [R(ui.Icon, { id: "glyphicon-filter" }), T` Filters`],
+        label: [R(ui.Icon, { id: "glyphicon-filter" }), " ", T`Filters`],
         hint: T`Filters all data associated with this ${this.props.segmentType}`
       },
       R(FilterExprComponent, {
@@ -265,7 +267,7 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), T` Sort`],
+        label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), " ", T`Sort`],
         hint: T`Sorts the display of this ${this.props.segmentType}`
       },
       R(ExprComponent, {

package/src/widgets/charts/table/OrderingsComponent.tsx

@@ -56,7 +56,8 @@ export default class OrderingsComponent extends React.Component<OrderingsCompone
         "button",
         { type: "button", className: "btn btn-sm btn-secondary", onClick: this.handleAdd, key: "add" },
         R("span", { className: "fas fa-plus" }),
-        T` Add Ordering`
+        " ",
+        T`Add Ordering`
       )
     )
   }

package/src/widgets/charts/table/TableChart.ts

@@ -431,4 +431,21 @@ export default class TableChart extends Chart {
   getPlaceholderIcon() {
     return "fa-table"
   }
+
+  translateDesign(design: TableChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Translate title text
+      if (draft.titleText) {
+        draft.titleText = translate(draft.titleText)
+      }
+
+      // Translate column headers and axis labels
+      for (const column of draft.columns) {
+        // Translate header text
+        if (column.headerText) {
+          column.headerText = translate(column.headerText)
+        }
+      }
+    })
+  }
 }

package/src/widgets/text/TextComponent.tsx

@@ -3,18 +3,22 @@ import _ from "lodash"
 import RichTextComponent from "../../richtext/RichTextComponent"
 import ExprInsertModalComponent from "./ExprInsertModalComponent"
 import ExprUpdateModalComponent from "./ExprUpdateModalComponent"
-import ExprItemsHtmlConverter from "../../richtext/ExprItemsHtmlConverter"
+import ExprItemsHtmlConverter, { HtmlItemExpr, HtmlItemOrExpr } from "../../richtext/ExprItemsHtmlConverter"
 import { TextWidgetDesign } from "./TextWidgetDesign"
 import { DataSource, Schema } from "@mwater/expressions"
 import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface TextComponentProps {
   design: TextWidgetDesign
+
+  /** Called when design changes. If not set, will be in display mode, otherwise in edit mode */
   onDesignChange?: (design: TextWidgetDesign) => void
   schema: Schema
   dataSource: DataSource
+
   /** Expression values */
   exprValues: { [key: string]: any }
+
   width?: number
   height?: number
   
@@ -23,10 +27,15 @@ export interface TextComponentProps {
 
   /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
   namedStrings?: { [key: string]: string }
+
+  /** Locale to use for display */
+  locale: string
 }
 
-// Text component which is provided with the data it needs, rather than loading it.
-// Used by TextWidgetComponent and also by other components that embed text fields
+/**
+ * Text component which is provided with the data it needs, rather than loading it.
+ * Used by TextWidgetComponent and also by other components that embed text fields
+ */
 export default class TextComponent extends React.Component<TextComponentProps> {
   static contextType = LocaleContext
   exprInsertModal: ExprInsertModalComponent | null = null
@@ -38,7 +47,7 @@ export default class TextComponent extends React.Component<TextComponentProps> {
       this.props.schema,
       this.props.onDesignChange != null,
       this.props.exprValues,
-      // Display summaries if in design more and singleRowTable is set
+      // Display summaries if in design mode and singleRowTable is set
       this.props.onDesignChange != null && this.props.singleRowTable != null,
       // Only replace named strings if not editing
       this.props.onDesignChange == null ? this.props.namedStrings : undefined,
@@ -46,12 +55,12 @@ export default class TextComponent extends React.Component<TextComponentProps> {
     )
   }
 
-  handleItemsChange = (items: any) => {
+  handleItemsChange = (items: HtmlItemOrExpr[]) => {
     const design = { ...this.props.design, items }
     return this.props.onDesignChange!(design)
   }
 
-  handleInsertExpr = (item: any) => {
+  handleInsertExpr = (item: HtmlItemExpr) => {
     const html = '<div data-embed="' + _.escape(JSON.stringify(item)) + '"></div>'
 
     return this.editor!.pasteHTML(html)
@@ -70,26 +79,27 @@ export default class TextComponent extends React.Component<TextComponentProps> {
       })
 
     const items = replaceItemInItems(this.props.design.items || [], item)
-    return this.props.onDesignChange!({ ...this.props.design, items })
+    this.props.onDesignChange!({ ...this.props.design, items })
   }
 
-  handleItemClick = (item: any) => {
-    return this.exprUpdateModal!.open(item, (item: any) => {
+  handleItemClick = (item: HtmlItemExpr) => {
+    this.exprUpdateModal!.open(item, (item) => {
       // Replace in items
-      return this.replaceItem(item)
+      this.replaceItem(item)
     })
   }
 
   handleAddExpr = (ev: React.MouseEvent<HTMLDivElement>) => {
     ev.preventDefault()
-    return this.exprInsertModal!.open()
+    this.exprInsertModal!.open()
   }
 
   renderExtraPaletteButtons() {
     return (
       <div key="expr" className="mwater-visualization-text-palette-item" onMouseDown={this.handleAddExpr}>
         <i className="fa fa-plus" />
-        {T` Expression`}
+        {" "}
+        {T`Expression`}
       </div>
     )
   }

package/src/widgets/text/TextWidget.ts

@@ -12,6 +12,7 @@ import { JsonQLSelectQuery } from "@mwater/jsonql"
 import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
 import { TextWidgetDesign } from "./TextWidgetDesign"
+import { getHtmlItemsStrings } from "../../richtext/ExprItemsTranslator"
 
 export default class TextWidget extends Widget {
   // Creates a React element that is a view of the widget
@@ -44,7 +45,9 @@ export default class TextWidget extends Widget {
       singleRowTable: options.singleRowTable,
       namedStrings: options.namedStrings,
       ref: options.widgetRef,
-      refreshKey: options.refreshKey
+      refreshKey: options.refreshKey,
+      locale: options.locale,
+      translate: options.translate
     })
   }
 
@@ -191,7 +194,7 @@ export default class TextWidget extends Widget {
   }
 
   // Get expression items recursively
-  getExprItems(items: HtmlItem[]): HtmlItemExpr[] {
+  getExprItems(items?: HtmlItem[]): HtmlItemExpr[] {
     let exprItems: any[] = []
     for (let item of items || []) {
       if ((item as any).type === "expr") {
@@ -267,4 +270,8 @@ export default class TextWidget extends Widget {
 
     return entries
   }
+
+  getTranslatableStrings(design: TextWidgetDesign, schema: Schema): string[] {
+    return getHtmlItemsStrings(design.items || [])
+  }
 }

package/src/widgets/text/TextWidgetComponent.tsx

@@ -13,6 +13,7 @@ import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelMo
 import { FormGroup } from "@mwater/react-library/lib/bootstrap"
 import ColorComponent from "../../ColorComponent"
 import { Select } from "@mwater/react-library/lib/bootstrap"
+import { translateHtmlItems } from "../../richtext/ExprItemsTranslator"
 
 export interface TextWidgetComponentProps {
   design: TextWidgetDesign
@@ -28,8 +29,15 @@ export interface TextWidgetComponentProps {
   /** Table that is filtered to have one row */
   singleRowTable?: string
   namedStrings?: any
+
   /** A key that changes when the widget should be refreshed */
   refreshKey?: any
+
+  /** Locale to use for display */
+  locale: string
+
+  /** Translate function to use for display. Returns same string when editing. */
+  translate: (input: string) => string
 }
 
 // Widget which displays styled text with embedded expressions
@@ -200,9 +208,15 @@ export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetCo
 
     const padding = this.props.design.padding ?? 0
 
+    // Translate items if needed
+    const translatedDesign = this.props.onDesignChange ? this.props.design : {
+      ...this.props.design,
+      items: translateHtmlItems(this.props.design.items || [], this.props.translate)
+    }
+
     return (
       <TextComponent
-        design={this.props.design}
+        design={translatedDesign}
         onDesignChange={this.props.onDesignChange}
         schema={this.props.schema}
         dataSource={this.props.dataSource}
@@ -211,6 +225,7 @@ export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetCo
         height={this.props.height ? this.props.height - padding * 2 : undefined}
         singleRowTable={this.props.singleRowTable}
         namedStrings={this.props.namedStrings}
+        locale={this.props.locale}
       />
     )
   }

package/src/widgets/text/TextWidgetDesign.ts

@@ -1,11 +1,8 @@
-import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
-import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
-
-export type TextWidgetItem = HtmlItem | HtmlItemExpr
+import { HtmlItemOrExpr } from "../../richtext/ExprItemsHtmlConverter"
 
 export interface TextWidgetDesign {
   /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
-  items: TextWidgetItem[]
+  items?: HtmlItemOrExpr[]
 
   /** "title" for title block. default is "default" */
   style?: "title" | "default" | "header" | "footer"
@@ -29,5 +26,5 @@ export interface TextWidgetDesign {
 
 /** Returns true if the text widget design is empty. */
 export function isEmptyTextWidgetDesign(design: TextWidgetDesign | undefined): boolean {
-  return design == null || design.items.length === 0
-}
+  return design == null || (design.items != null && design.items.length === 0)
+}

package/test/IdSelectionTests.ts

@@ -0,0 +1,54 @@
+import { assert } from "chai"
+import IdSelection from "../src/IdSelection"
+
+describe("IdSelection", function () {
+  beforeEach(function(this: any) {
+    this.sel = new IdSelection()
+  })
+
+  it("adds id", function(this: any) {
+    const sel = this.sel.add("1")
+    assert.isTrue(sel.isSelected("1"))
+    assert.isFalse(sel.isSelected("2"))
+  })
+
+  it("removes id", function(this: any) {
+    let sel = this.sel.add("1")
+    sel = sel.remove("1")
+    assert.isFalse(sel.isSelected("1"))
+    assert.isFalse(sel.isSelected("2"))
+  })
+
+  it("toggles id", function(this: any) {
+    let sel = this.sel.toggle("1")
+    assert.isTrue(sel.isSelected("1"))
+    sel = sel.toggle("1")
+    assert.isFalse(sel.isSelected("1"))
+  })
+
+  it("inverts", function(this: any) {
+    let sel = this.sel.add("1")
+    sel = sel.invert()
+    assert.isTrue(sel.isSelected("2"))
+    assert.isFalse(sel.isSelected("1"))
+  })
+
+  it("adds in inverts", function(this: any) {
+    let sel = this.sel.add("1")
+    sel = sel.invert()
+    sel = sel.add("1")
+    assert.isTrue(sel.isSelected("1"))
+  })
+
+  it("none", function(this: any) {
+    let sel = this.sel.add("1")
+    sel = sel.none()
+    assert.isFalse(sel.isSelected("1"))
+  })
+
+  return it("all", function(this: any) {
+    const sel = this.sel.all("1")
+    assert.isTrue(sel.isSelected("1"))
+    assert.isTrue(sel.isSelected("2"))
+  })
+})

package/test/LayeredChartCompilerTests.ts

@@ -1,5 +1,3 @@
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
 import _ from "lodash"
 import { assert } from "chai"
 import * as fixtures from "./fixtures"

package/test/richtext/ExprItemsTranslatorTests.ts

@@ -0,0 +1,144 @@
+import { assert } from "chai"
+import { translateHtmlItems, getHtmlItemsStrings } from "../../src/richtext/ExprItemsTranslator"
+import { HtmlItemElement } from "../../src/richtext/ItemsHtmlConverter"
+import { HtmlItemExpr, HtmlItemOrExpr } from "../../src/richtext/ExprItemsHtmlConverter"
+
+describe("ExprItemsTranslator", function () {
+  describe("translateHtmlItems", function () {
+    it("should translate simple strings", function () {
+      const items: HtmlItemOrExpr[] = ["Hello ", "World"]
+      const translatedItems = translateHtmlItems(items, (input) => input.toUpperCase())
+      assert.deepEqual(translatedItems, ["HELLO WORLD"])
+    })
+
+    it("should translate nested items", function () {
+      const items: HtmlItemOrExpr[] = [
+        {
+          type: "element",
+          tag: "p",
+          items: ["Hello", { type: "element", tag: "b", items: ["World"] } as HtmlItemElement]
+        } as HtmlItemElement
+      ]
+      const translatedItems = translateHtmlItems(items, (input) => input.toUpperCase())
+      assert.deepEqual(translatedItems, [
+        {
+          type: "element",
+          tag: "p",
+          items: ["HELLO", { type: "element", tag: "b", items: ["WORLD"] } as HtmlItemElement]
+        } as HtmlItemElement
+      ])
+    })
+
+    it("should translate expression items", function () {
+      const items: HtmlItemOrExpr[] = [
+        {
+          type: "expr",
+          id: "1",
+          expr: { type: "literal", valueType: "text", value: "Hello" },
+          labelText: "Greeting"
+        } as HtmlItemExpr
+      ]
+      const translatedItems = translateHtmlItems(items, (input) => input.toUpperCase())
+      assert.deepEqual(translatedItems, [
+        {
+          type: "expr",
+          id: "1",
+          expr: { type: "literal", valueType: "text", value: "Hello" },
+          labelText: "GREETING"
+        } as HtmlItemExpr
+      ])
+    })
+
+    it("should translate expression items within a string", function () {
+      const items: HtmlItemOrExpr[] = [
+        "Hello, ",
+        {
+          type: "expr",
+          id: "1",
+          expr: { type: "literal", valueType: "text", value: "Hello" },
+          labelText: "Greeting"
+        } as HtmlItemExpr,
+        "!"
+      ]
+      const translatedItems = translateHtmlItems(items, (input) => input.toUpperCase())
+      assert.deepEqual(translatedItems, [
+        "HELLO, ",
+        {
+          type: "expr",
+          id: "1",
+          expr: { type: "literal", valueType: "text", value: "Hello" },
+          labelText: "GREETING"
+        } as HtmlItemExpr,
+        "!"
+      ])
+    })
+
+    it("should translate links while preserving the href", function () {
+      const items: HtmlItemOrExpr[] = [
+        "Hello, ",
+        {
+          type: "element",
+          tag: "a",
+          items: ["there"],
+          href: "https://example.com"
+        } as HtmlItemElement,
+        "!"
+      ]
+      const translatedItems = translateHtmlItems(items, (input) => input.toUpperCase())
+      assert.deepEqual(translatedItems, [
+        "HELLO, ",
+        {
+          type: "element",
+          tag: "a",
+          items: ["THERE"],
+          href: "HTTPS://EXAMPLE.COM"
+        } as HtmlItemElement,
+        "!"
+      ])
+    })
+
+    it("should collect all unique strings", function () {
+      const items: HtmlItemOrExpr[] = [
+        "Start ",
+        {
+          type: "element",
+          tag: "p",
+          items: ["Hello ", { type: "element", tag: "b", items: ["World"] }]
+        } as HtmlItemElement,
+        " This is a ",
+        {
+          type: "expr",
+          id: "1",
+          expr: { type: "literal", valueType: "text", value: "Hello" },
+          labelText: "Greeting"
+        } as HtmlItemExpr,
+        "!"
+      ]
+      const strings = getHtmlItemsStrings(items)
+      assert.deepEqual(strings, ["Start", "Hello <b>World</b>", "Greeting", "This is a {0}!"])
+    })
+  })
+
+  describe("getHtmlItemsStrings", function () {
+    it("should collect all unique strings", function () {
+      const items: HtmlItemOrExpr[] = [
+        "Start ",
+        {
+          type: "element",
+          tag: "p",
+          items: ["Hello ", { type: "element", tag: "b", items: ["World"] }]
+        } as HtmlItemElement,
+        " This is a ",
+        {
+          type: "expr",
+          id: "1",
+          expr: { type: "literal", valueType: "text", value: "Hello" },
+          labelText: "Greeting"
+        } as HtmlItemExpr,
+        "!"
+      ]
+      const strings = getHtmlItemsStrings(items)
+      assert.deepEqual(strings, ["Start", "Hello <b>World</b>", "Greeting", "This is a {0}!"])
+    })
+  })
+})