@mwater/visualization 5.3.2 → 5.4.1

package/lib/maps/vectorMaps.js

@@ -3,7 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePersistedMapBounds = exports.VectorMapLogo = exports.AttributionControl = exports.mergeBaseAndUserStyle = exports.useBaseStyle = exports.useStyleMap = exports.useHoverCursor = exports.useVectorMap = exports.areVectorMapsEnabled = exports.getMapTilerApiKey = exports.setMapTilerApiKey = exports.setPrintingModeEnabled = void 0;
+exports.setPrintingModeEnabled = setPrintingModeEnabled;
+exports.setMapTilerApiKey = setMapTilerApiKey;
+exports.getMapTilerApiKey = getMapTilerApiKey;
+exports.areVectorMapsEnabled = areVectorMapsEnabled;
+exports.useVectorMap = useVectorMap;
+exports.useHoverCursor = useHoverCursor;
+exports.useStyleMap = useStyleMap;
+exports.useBaseStyle = useBaseStyle;
+exports.mergeBaseAndUserStyle = mergeBaseAndUserStyle;
+exports.AttributionControl = AttributionControl;
+exports.VectorMapLogo = VectorMapLogo;
+exports.usePersistedMapBounds = usePersistedMapBounds;
 const maplibre_gl_1 = __importDefault(require("maplibre-gl"));
 const react_1 = require("react");
 const mapSymbols_1 = require("./mapSymbols");
@@ -15,7 +26,6 @@ let printingModeEnabled = false;
 function setPrintingModeEnabled(val) {
     printingModeEnabled = val;
 }
-exports.setPrintingModeEnabled = setPrintingModeEnabled;
 /* Hooks and functions related to displaying a vector map */
 let mapTilerApiKey = "";
 /** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
@@ -24,16 +34,13 @@ let mapTilerApiKey = "";
 function setMapTilerApiKey(key) {
     mapTilerApiKey = key;
 }
-exports.setMapTilerApiKey = setMapTilerApiKey;
 function getMapTilerApiKey() {
     return mapTilerApiKey;
 }
-exports.getMapTilerApiKey = getMapTilerApiKey;
 /** Check if vector maps are enabled by setting API key */
 function areVectorMapsEnabled() {
     return mapTilerApiKey !== "";
 }
-exports.areVectorMapsEnabled = areVectorMapsEnabled;
 /** Loads a vector map, refreshing the WebGL context as needed */
 function useVectorMap(options) {
     const { divRef, bounds, scrollZoom, dragPan, touchZoomRotate } = options;
@@ -87,7 +94,7 @@ function useVectorMap(options) {
                 },
                 // Prevent scrolling outside of world bounds
                 maxBounds: [
-                    [-179.9, -85],
+                    [-179.9, -85], // Southwest coordinates
                     [179.9, 85] // Northeast coordinates
                 ],
                 preserveDrawingBuffer: printingModeEnabled
@@ -110,7 +117,7 @@ function useVectorMap(options) {
             // Dynamically load symbols
             m.on("styleimagemissing", function (ev) {
                 // Check if known
-                const mapSymbol = mapSymbols_1.mapSymbols.find((s) => s.value == ev.id);
+                const mapSymbol = (0, mapSymbols_1.getMapSymbols)().find((s) => s.value == ev.id);
                 if (mapSymbol) {
                     m.loadImage(mapSymbol.url, (err, image) => {
                         if (image && !m.hasImage(mapSymbol.value)) {
@@ -132,7 +139,6 @@ function useVectorMap(options) {
     }, [mapReloadCount]);
     return map;
 }
-exports.useVectorMap = useVectorMap;
 /** Sets cursor as pointer when over any layers with the specified ids */
 function useHoverCursor(map, layerIds) {
     // Setup hover effect
@@ -162,7 +168,6 @@ function useHoverCursor(map, layerIds) {
         };
     }, [map, layerIds]);
 }
-exports.useHoverCursor = useHoverCursor;
 /** Apply user style to a map with base style */
 function useStyleMap(options) {
     const { map, baseLayer, baseLayerOpacity, userStyle } = options;
@@ -181,7 +186,6 @@ function useStyleMap(options) {
         map.setStyle(style);
     }, [map, style]);
 }
-exports.useStyleMap = useStyleMap;
 /** Loads a base style for the map */
 function useBaseStyle(baseLayer) {
     // Load base layer
@@ -220,7 +224,6 @@ function useBaseStyle(baseLayer) {
     }, [baseLayer]);
     return baseStyle;
 }
-exports.useBaseStyle = useBaseStyle;
 /** Combines a base style and a user style */
 function mergeBaseAndUserStyle(baseStyle, userStyle, baseLayerOpacity) {
     // Merge until baseStyle and userStyle are present
@@ -254,7 +257,6 @@ function mergeBaseAndUserStyle(baseStyle, userStyle, baseLayerOpacity) {
     };
     return style;
 }
-exports.mergeBaseAndUserStyle = mergeBaseAndUserStyle;
 function AttributionControl(props) {
     if (props.baseLayer == "blank") {
         return react_2.default.createElement("div", { className: "newmap-attribution-control" }, props.extraText ? " " + props.extraText : null);
@@ -270,7 +272,6 @@ function AttributionControl(props) {
         react_2.default.createElement("a", { href: "https://www.openstreetmap.org/about/", target: "_blank" }, "\u00A9 OpenStreetMap"),
         props.extraText ? " " + props.extraText : null));
 }
-exports.AttributionControl = AttributionControl;
 function VectorMapLogo(props) {
     if (props.baseLayer == "blank") {
         return null;
@@ -280,7 +281,6 @@ function VectorMapLogo(props) {
     }
     return react_2.default.createElement("img", { src: require("./Maptiler-logo.png").default, style: { position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" } });
 }
-exports.VectorMapLogo = VectorMapLogo;
 async function loadBingBasemap(basemapType, opacity) {
     // Load metadata
     const bingApiKey = "Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU";
@@ -342,4 +342,3 @@ function usePersistedMapBounds(map, localStorageKey) {
         };
     }, [map]);
 }
-exports.usePersistedMapBounds = usePersistedMapBounds;

package/lib/memoizedDebounce.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.memoizedDebounce = void 0;
+exports.memoizedDebounce = memoizedDebounce;
 const lodash_1 = __importDefault(require("lodash"));
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function memoizedDebounce(func, wait = 0, options = {}, resolver) {
@@ -18,4 +18,3 @@ function memoizedDebounce(func, wait = 0, options = {}, resolver) {
     };
     return wrappedFunction;
 }
-exports.memoizedDebounce = memoizedDebounce;

package/lib/quickfilter/DateExprComponent.d.ts

@@ -24,6 +24,10 @@ export default class DateExprComponent extends React.Component<DateExprComponent
     handleStartChange: (value: any) => any;
     handleEndChange: (value: any) => void;
     handlePreset: (preset: any) => void;
+    getPresets(): {
+        id: string;
+        name: string;
+    }[];
     renderClear: () => React.DetailedReactHTMLElement<{
         style: {
             position: "absolute";

package/lib/quickfilter/DateExprComponent.js

@@ -87,6 +87,19 @@ class DateExprComponent extends react_1.default.Component {
         this.props.onChange({ type: "op", op: preset.id, exprs: [] });
         return this.setState({ dropdownOpen: false });
     };
+    getPresets() {
+        return [
+            { id: "thisyear", name: T `This Year` },
+            { id: "lastyear", name: T `Last Year` },
+            { id: "thismonth", name: T `This Month` },
+            { id: "lastmonth", name: T `Last Month` },
+            { id: "today", name: T `Today` },
+            { id: "yesterday", name: T `Yesterday` },
+            { id: "last24hours", name: T `In Last 24 Hours` },
+            { id: "last7days", name: T `In Last 7 Days` },
+            { id: "last30days", name: T `In Last 30 Days` },
+        ];
+    }
     renderClear = () => {
         return R("div", {
             style: { position: "absolute", right: 10, top: 7, color: "#AAA" },
@@ -95,9 +108,9 @@ class DateExprComponent extends react_1.default.Component {
     };
     renderSummary() {
         if (!this.props.value) {
-            return R("span", { className: "text-muted" }, "All");
+            return R("span", { className: "text-muted" }, T `All`);
         }
-        const preset = lodash_1.default.findWhere(presets, { id: this.props.value.op });
+        const preset = lodash_1.default.findWhere(this.getPresets(), { id: this.props.value.op });
         if (preset) {
             return preset.name;
         }
@@ -128,9 +141,9 @@ class DateExprComponent extends react_1.default.Component {
                 backgroundColor: "white",
                 borderRadius: 4
             }
-        }, R("ul", { className: "nav nav-pills flex-column" }, lodash_1.default.map(presets, (preset) => {
+        }, R("ul", { className: "nav nav-pills flex-column" }, lodash_1.default.map(this.getPresets(), (preset) => {
             return R("li", { className: "nav-item" }, R("a", { className: "nav-link", style: { padding: 5 }, onClick: this.handlePreset.bind(null, preset) }, preset.name));
-        }), R("li", { className: "nav-item" }, R("a", { className: "nav-link", style: { padding: 5 }, onClick: () => this.setState({ custom: true }) }, "Custom Date Range..."))));
+        }), R("li", { className: "nav-item" }, R("a", { className: "nav-link", style: { padding: 5 }, onClick: () => this.setState({ custom: true }) }, T `Custom Date Range...`))));
     }
     renderDropdown() {
         if (this.state.custom) {
@@ -183,15 +196,3 @@ class DateExprComponent extends react_1.default.Component {
     }
 }
 exports.default = DateExprComponent;
-var presets = [
-    { id: "thisyear", name: "This Year" },
-    { id: "lastyear", name: "Last Year" },
-    { id: "thismonth", name: "This Month" },
-    { id: "lastmonth", name: "Last Month" },
-    { id: "today", name: "Today" },
-    { id: "yesterday", name: "Yesterday" },
-    { id: "last24hours", name: "In Last 24 Hours" },
-    { id: "last7days", name: "In Last 7 Days" },
-    { id: "last30days", name: "In Last 30 Days" },
-    { id: "last365days", name: "In Last 365 Days" }
-];

package/lib/quickfilter/IdArrayQuickfilterComponent.js

@@ -21,7 +21,7 @@ class IdArrayQuickfilterComponent extends react_1.default.Component {
             idTable,
             schema: this.props.schema,
             dataSource: this.props.dataSource,
-            placeholder: "All",
+            placeholder: T `All`,
             multi: this.props.multi
             // TODO Does not use filters that are passed in
         })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);

package/lib/quickfilter/QuickfilterUtils.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findExprValues = void 0;
+exports.findExprValues = findExprValues;
 const lodash_1 = __importDefault(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
 /** Perform query to find quickfilter values for text and text[] expressions
@@ -103,4 +103,3 @@ function findExprValues(expr, schema, dataSource, filters, offset, limit, callba
         callback(null, lodash_1.default.pluck(rows, "value"));
     });
 }
-exports.findExprValues = findExprValues;

package/lib/quickfilter/QuickfiltersComponent.d.ts

@@ -54,8 +54,29 @@ declare class EnumQuickfilterComponent extends React.Component<EnumQuickfilterCo
     static contextType: React.Context<string>;
     handleSingleChange: (val: any) => any;
     handleMultiChange: (val: any) => any;
-    renderSingleSelect(options: any[]): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
-    renderMultiSelect(options: any[]): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
+    renderSingleSelect(options: any[]): React.FunctionComponentElement<{
+        placeholder: string;
+        value: any;
+        options: any[];
+        isClearable: boolean;
+        onChange: (value: any) => any;
+        isDisabled: boolean;
+        styles: {
+            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
+        };
+    }>;
+    renderMultiSelect(options: any[]): React.FunctionComponentElement<{
+        placeholder: string;
+        value: any[];
+        isClearable: boolean;
+        isMulti: boolean;
+        options: any[];
+        onChange: ((val: any) => any) | undefined;
+        isDisabled: boolean;
+        styles: {
+            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
+        };
+    }>;
     render(): React.DetailedReactHTMLElement<{
         style: {
             display: "inline-block";

package/lib/quickfilter/QuickfiltersComponent.js

@@ -13,7 +13,7 @@ const TextLiteralComponent_1 = __importDefault(require("./TextLiteralComponent")
 const DateExprComponent_1 = __importDefault(require("./DateExprComponent"));
 const QuickfilterCompiler_1 = __importDefault(require("./QuickfilterCompiler"));
 const IdArrayQuickfilterComponent_1 = __importDefault(require("./IdArrayQuickfilterComponent"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Displays quick filters and allows their value to be modified */
 class QuickfiltersComponent extends react_1.default.Component {
     renderQuickfilter(item, index) {
@@ -153,7 +153,7 @@ class QuickfiltersComponent extends react_1.default.Component {
 exports.default = QuickfiltersComponent;
 /** Quickfilter for an enum */
 class EnumQuickfilterComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     handleSingleChange = (val) => {
         if (val) {
             return this.props.onValueChange(val);

package/lib/quickfilter/QuickfiltersDesignComponent.js

@@ -102,7 +102,7 @@ class QuickfiltersDesignComponent extends react_1.default.Component {
     };
     render() {
         return R("div", null, react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.design, onItemsChange: this.handleDesignChange, renderItem: this.renderQuickfilter, getReorderableKey: (item, index) => index }), this.props.tables.length > 0
-            ? R("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd }, R("span", { className: "fas fa-plus" }), " Add Quick Filter")
+            ? R("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd }, R("span", { className: "fas fa-plus" }), T `Add Quick Filter`)
             : undefined);
     }
 }
@@ -138,15 +138,15 @@ class QuickfilterDesignComponent extends react_1.default.Component {
     render() {
         // Determine type of expression
         const exprType = new expressions_1.ExprUtils(this.props.schema).getExprType(this.props.design.expr);
-        return R("div", {}, R("div", { className: "mb-3 mt-1", key: "table" }, R("label", { className: "text-muted" }, "Data Source"), R(ui.Select, {
+        return R("div", {}, R("div", { className: "mb-3 mt-1", key: "table" }, R("label", { className: "text-muted" }, T `Data Source`), R(ui.Select, {
             value: this.state.table,
             options: lodash_1.default.map(this.props.tables, (table) => ({
                 value: table,
                 label: expressions_1.ExprUtils.localizeString(this.props.schema.getTable(table).name)
             })),
             onChange: this.handleTableChange,
-            nullLabel: "Select..."
-        })), R("div", { className: "mb-3", key: "expr" }, R("label", { className: "text-muted" }, "Filter By"), R("div", null, R(expressions_ui_1.ExprComponent, {
+            nullLabel: T `Select...`
+        })), R("div", { className: "mb-3", key: "expr" }, R("label", { className: "text-muted" }, T `Filter By`), R("div", null, R(expressions_ui_1.ExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             table: this.state.table,
@@ -154,23 +154,23 @@ class QuickfilterDesignComponent extends react_1.default.Component {
             onChange: this.handleExprChange,
             types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"],
         }))), this.props.design.expr
-            ? R("div", { className: "mb-3", key: "label" }, R("label", { className: "text-muted" }, "Label"), R("input", {
+            ? R("div", { className: "mb-3", key: "label" }, R("label", { className: "text-muted" }, T `Label`), R("input", {
                 type: "text",
                 className: "form-control form-control-sm",
                 value: this.props.design.label || "",
                 onChange: this.handleLabelChange,
-                placeholder: "Optional Label"
+                placeholder: T `Optional Label`
             }))
             : undefined, this.props.mergeable
             ? R(ui.Checkbox, {
                 value: this.props.design.merged,
                 onChange: this.handleMergedChange
-            }, "Merge with previous quickfilter ", R("span", { className: "text-muted" }, "- displays as one single control that filters both"))
+            }, T `Merge with previous quickfilter `, R("span", { className: "text-muted" }, T `- displays as one single control that filters both`))
             : undefined, ["enum", "text", "enumset", "id[]", "text[]"].includes(exprType)
             ? R(ui.Checkbox, {
                 value: this.props.design.multi,
                 onChange: this.handleMultiChange
-            }, "Allow multiple selections")
+            }, T `Allow multiple selections`)
             : undefined);
     }
 }

package/lib/quickfilter/TextLiteralComponent.d.ts

@@ -22,8 +22,41 @@ export default class TextLiteralComponent extends React.Component<TextLiteralCom
     handleSingleChange: (val: any) => any;
     handleMultipleChange: (val: any) => any;
     getOptions: (input: any, cb: any) => void;
-    renderSingle(): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<unknown, import("react-select").GroupBase<unknown>> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
-    renderMultiple(): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<unknown, import("react-select").GroupBase<unknown>> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
+    renderSingle(): React.FunctionComponentElement<{
+        key: string;
+        placeholder: string;
+        value: {
+            value: any;
+            label: any;
+        } | null;
+        loadOptions: (input: any, cb: any) => void;
+        onChange: ((val: any) => any) | undefined;
+        isClearable: boolean;
+        defaultOptions: boolean;
+        isDisabled: boolean;
+        noOptionsMessage: () => string;
+        styles: {
+            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
+        };
+    }>;
+    renderMultiple(): React.FunctionComponentElement<{
+        placeholder: string;
+        value: {
+            value: unknown;
+            label: unknown;
+        }[] | null;
+        key: string;
+        isMulti: boolean;
+        loadOptions: (input: any, cb: any) => void;
+        defaultOptions: boolean;
+        onChange: ((val: any) => any) | undefined;
+        isClearable: boolean;
+        isDisabled: boolean;
+        noOptionsMessage: () => string;
+        styles: {
+            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
+        };
+    }>;
     render(): React.DetailedReactHTMLElement<{
         style: {
             width: string;

package/lib/quickfilter/TextLiteralComponent.js

@@ -87,15 +87,15 @@ class TextLiteralComponent extends react_1.default.Component {
     renderSingle() {
         const currentValue = this.props.value ? { value: this.props.value, label: this.props.value } : null;
         return R(async_1.default, {
-            key: JSON.stringify(this.props.filters),
-            placeholder: "All",
+            key: JSON.stringify(this.props.filters), // Include to force a change when filters change
+            placeholder: T `All`,
             value: currentValue,
             loadOptions: this.getOptions,
             onChange: this.props.onChange ? this.handleSingleChange : undefined,
             isClearable: true,
             defaultOptions: true,
             isDisabled: this.props.onChange == null,
-            noOptionsMessage: () => "Type to search",
+            noOptionsMessage: () => T `Type to search`,
             styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
@@ -105,16 +105,16 @@ class TextLiteralComponent extends react_1.default.Component {
     renderMultiple() {
         const currentValue = this.props.value ? lodash_1.default.map(this.props.value, (v) => ({ value: v, label: v })) : null;
         return R(async_1.default, {
-            placeholder: "All",
+            placeholder: T `All`,
             value: currentValue,
-            key: JSON.stringify(this.props.filters),
+            key: JSON.stringify(this.props.filters), // Include to force a change when filters change
             isMulti: true,
             loadOptions: this.getOptions,
             defaultOptions: true,
             onChange: this.props.onChange ? this.handleMultipleChange : undefined,
             isClearable: true,
             isDisabled: this.props.onChange == null,
-            noOptionsMessage: () => "Type to search",
+            noOptionsMessage: () => T `Type to search`,
             styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })

package/lib/richtext/DropdownPaletteItem.js

@@ -44,7 +44,7 @@ class DropdownPaletteItem extends react_1.default.Component {
             react_1.default.createElement("div", { style: { display: 'flex' } },
                 react_1.default.createElement("div", { style: { flex: 1 } }, leftColumn.map(item => this.renderItem(item))),
                 react_1.default.createElement("div", { style: { flex: 1 } }, rightColumn.map(item => this.renderItem(item)))),
-            this.props.items.some(item => item.more) && !this.state.moreOpen && (react_1.default.createElement("div", { className: "dropdown-palette-menu-item", onMouseDown: this.handleMoreClick }, "More..."))));
+            this.props.items.some(item => item.more) && !this.state.moreOpen && (react_1.default.createElement("div", { className: "dropdown-palette-menu-item", onMouseDown: this.handleMoreClick }, T `More...`))));
     }
     render() {
         const popupPosition = {

package/lib/richtext/ExprItemsHtmlConverter.js

@@ -46,7 +46,7 @@ class ExprItemsHtmlConverter extends ItemsHtmlConverter_1.default {
             if (this.summarizeExprs) {
                 text = new expressions_1.ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale);
                 if (text.length > 30) {
-                    text = text.substr(0, 30) + "...";
+                    text = text.substr(0, 30) + T `...`;
                 }
                 exprHtml = lodash_1.default.escape(text);
             }
@@ -67,25 +67,23 @@ class ExprItemsHtmlConverter extends ItemsHtmlConverter_1.default {
                     exprHtml = lodash_1.default.escape(text);
                 }
                 else {
-                    exprHtml = '<span style="color: #DDD">---</span>';
+                    exprHtml = `<span style="color: #DDD">${T `---`}</span>`;
                 }
             }
             else {
                 // Placeholder
-                exprHtml = '<span class="text-muted">\u25a0\u25a0\u25a0</span>';
+                exprHtml = `<span class="text-muted">\u25a0\u25a0\u25a0</span>`;
             }
             // Add label
             if (exprItem.includeLabel) {
-                const label = exprItem.labelText || new expressions_1.ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + ":\u00A0";
-                exprHtml = '<span class="text-muted">' + lodash_1.default.escape(label) + "</span>" + exprHtml;
+                const label = exprItem.labelText || new expressions_1.ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + T `:\u00A0`;
+                exprHtml = `<span class="text-muted">${lodash_1.default.escape(label)}</span>` + exprHtml;
             }
             if (this.designMode) {
                 html +=
-                    '\u2060<span data-embed="' +
-                        lodash_1.default.escape(JSON.stringify(item)) +
-                        '" class="mwater-visualization-text-widget-expr">' +
-                        (exprHtml || "\u00A0") +
-                        "</span>\u2060";
+                    `\u2060<span data-embed="${lodash_1.default.escape(JSON.stringify(item))}" class="mwater-visualization-text-widget-expr">` +
+                        (exprHtml || T `\u00A0`) +
+                        `</span>\u2060`;
             }
             else {
                 // View mode

package/lib/richtext/FontColorPaletteItem.js

@@ -59,13 +59,13 @@ class ColorPaletteComponent extends react_1.default.Component {
     }
     render() {
         const baseColors = [
-            "#FF0000",
-            "#FFAA00",
-            "#FFFF00",
-            "#00FF00",
-            "#00FFFF",
-            "#0000FF",
-            "#9900FF",
+            "#FF0000", // red
+            "#FFAA00", // orange
+            "#FFFF00", // yellow
+            "#00FF00", // green
+            "#00FFFF", // cyan
+            "#0000FF", // blue
+            "#9900FF", // purple
             "#FF00FF" // magenta
         ];
         const customColors = this.context?.customColors || [];

package/lib/richtext/ItemsHtmlConverter.js

@@ -118,7 +118,6 @@ class ItemsHtmlConverter {
             if (node.nodeType === 1) {
                 // Element
                 // Handle embeds
-                var style;
                 if (node.dataset?.embed) {
                     items.push(JSON.parse(node.dataset.embed));
                     continue;

package/lib/richtext/RichTextComponent.d.ts

@@ -4,6 +4,7 @@ import ItemsHtmlConverter, { HtmlItem } from "./ItemsHtmlConverter";
 export interface RichTextComponentProps {
     items?: HtmlItem[];
     onItemsChange?: (items: HtmlItem[]) => void;
+    /** Called when an embed item is clicked */
     onItemClick?: (item: HtmlItem) => void;
     /** Optional className of editor wrapper */
     className?: string;

package/lib/richtext/RichTextComponent.js

@@ -59,7 +59,7 @@ class RichTextComponent extends react_1.default.Component {
         // Requires a selection
         const html = this.contentEditable.getSelectedHTML();
         if (!html) {
-            return alert("Please select text first to set color");
+            return alert(T `Please select text first to set color`);
         }
         this.handleCommand("foreColor", color);
     };
@@ -151,7 +151,7 @@ class RichTextComponent extends react_1.default.Component {
         // Don't lose focus
         ev.preventDefault();
         // Ask for url
-        const url = window.prompt("Enter URL to link to");
+        const url = window.prompt(T `Enter URL to link to`);
         if (url) {
             document.execCommand("createLink", false, url);
         }
@@ -204,16 +204,20 @@ class RichTextComponent extends react_1.default.Component {
             react_1.default.createElement(DropdownPaletteItem_1.default, { key: "justify", items: [
                     { label: react_1.default.createElement("span", null,
                             react_1.default.createElement("i", { className: "fas fa-align-left fa-fw" }),
-                            " Left"), value: "justifyLeft" },
+                            " ",
+                            T `Left`), value: "justifyLeft" },
                     { label: react_1.default.createElement("span", null,
                             react_1.default.createElement("i", { className: "fas fa-align-center fa-fw" }),
-                            " Center"), value: "justifyCenter" },
+                            " ",
+                            T `Center`), value: "justifyCenter" },
                     { label: react_1.default.createElement("span", null,
                             react_1.default.createElement("i", { className: "fas fa-align-right fa-fw" }),
-                            " Right"), value: "justifyRight" },
+                            " ",
+                            T `Right`), value: "justifyRight" },
                     { label: react_1.default.createElement("span", null,
                             react_1.default.createElement("i", { className: "fas fa-align-justify fa-fw" }),
-                            " Justify"), value: "justifyFull" },
+                            " ",
+                            T `Justify`), value: "justifyFull" },
                 ], onSelect: (value) => this.handleCommand(value, null), position: schemeName === "over" ? "under" : "over", label: react_1.default.createElement("i", { className: "fas fa-align-left" }) }),
             react_1.default.createElement("div", { key: "insertUnorderedList", className: "mwater-visualization-text-palette-item", onMouseDown: (ev) => this.handleCommand("insertUnorderedList", null, ev) },
                 react_1.default.createElement("i", { className: "fas fa-list-ul" })),
@@ -221,28 +225,28 @@ class RichTextComponent extends react_1.default.Component {
                 react_1.default.createElement("i", { className: "fas fa-list-ol" })),
             this.props.includeHeadings && [
                 react_1.default.createElement(DropdownPaletteItem_1.default, { key: "paragraph", items: [
-                        { label: "Heading 1", value: "h1" },
-                        { label: "Heading 2", value: "h2" },
-                        { label: "Extra Small", value: "xsmall" },
-                        { label: "Small", value: "small" },
-                        { label: "Normal", value: "normal" },
-                        { label: "Large", value: "large" },
-                        { label: "Extra Large", value: "xlarge" },
-                        { label: "6px", value: "6px", more: true },
-                        { label: "7px", value: "7px", more: true },
-                        { label: "8px", value: "8px", more: true },
-                        { label: "9px", value: "9px", more: true },
-                        { label: "10px", value: "10px", more: true },
-                        { label: "11px", value: "11px", more: true },
-                        { label: "12px", value: "12px", more: true },
-                        { label: "14px", value: "14px", more: true },
-                        { label: "16px", value: "16px", more: true },
-                        { label: "18px", value: "18px", more: true },
-                        { label: "20px", value: "20px", more: true },
-                        { label: "22px", value: "22px", more: true },
-                        { label: "24px", value: "24px", more: true },
-                        { label: "30px", value: "30px", more: true },
-                        { label: "36px", value: "36px", more: true },
+                        { label: T `Heading 1`, value: "h1" },
+                        { label: T `Heading 2`, value: "h2" },
+                        { label: T `Extra Small`, value: "xsmall" },
+                        { label: T `Small`, value: "small" },
+                        { label: T `Normal`, value: "normal" },
+                        { label: T `Large`, value: "large" },
+                        { label: T `Extra Large`, value: "xlarge" },
+                        { label: T `6px`, value: "6px", more: true },
+                        { label: T `7px`, value: "7px", more: true },
+                        { label: T `8px`, value: "8px", more: true },
+                        { label: T `9px`, value: "9px", more: true },
+                        { label: T `10px`, value: "10px", more: true },
+                        { label: T `11px`, value: "11px", more: true },
+                        { label: T `12px`, value: "12px", more: true },
+                        { label: T `14px`, value: "14px", more: true },
+                        { label: T `16px`, value: "16px", more: true },
+                        { label: T `18px`, value: "18px", more: true },
+                        { label: T `20px`, value: "20px", more: true },
+                        { label: T `22px`, value: "22px", more: true },
+                        { label: T `24px`, value: "24px", more: true },
+                        { label: T `30px`, value: "30px", more: true },
+                        { label: T `36px`, value: "36px", more: true },
                     ], onSelect: (tag) => {
                         if (tag.startsWith("h")) {
                             this.handleSetFontSize(tag, null);
@@ -276,7 +280,7 @@ class RichTextComponent extends react_1.default.Component {
         if (this.props.onItemsChange != null) {
             return (react_1.default.createElement("div", { key: "contents", style: this.props.style, className: this.props.className },
                 react_1.default.createElement(expressions_ui_1.ContentEditableComponent, { ref: this.refContentEditable, style: { outline: "none" }, html: this.createHtml(), onChange: this.handleChange, onClick: this.handleEditorClick, onFocus: this.handleFocus, onBlur: this.handleBlur }),
-                this.props.items?.[0] == null ? (react_1.default.createElement("div", { key: "placeholder", style: { color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" } }, "Click to Edit")) : undefined));
+                this.props.items?.[0] == null ? (react_1.default.createElement("div", { key: "placeholder", style: { color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" } }, T `Click to Edit`)) : undefined));
         }
         else {
             return (react_1.default.createElement("div", { key: "contents", style: this.props.style, className: this.props.className, dangerouslySetInnerHTML: { __html: this.createHtml() } }));