@orangelogic/design-system 2.171.0 → 2.173.0

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.171.0",
+  "version": "2.173.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/hybrid/table-core/src/table/components/table-toolbar/table-dropdown-filter.d.ts

@@ -1,5 +1,6 @@
 import { default as CxButton } from '../../../../../../atoms/src/components/button/button.ts';
 import { default as CxDropdown } from '../../../../../../atoms/src/components/dropdown/dropdown.ts';
+import { default as CxIcon } from '../../../../../../atoms/src/components/icon/icon.ts';
 import { default as CxMenu } from '../../../../../../atoms/src/components/menu/menu.ts';
 import { default as CxMenuItem } from '../../../../../../atoms/src/components/menu-item/menu-item.ts';
 import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
@@ -7,13 +8,20 @@ import { TableDropdownFilterData, TableDropdownFilterDataOption } from '../../..
 import { CSSResultGroup } from 'lit';
 
 /**
- * @summary CxTableDropdownFilter
+ * @summary Renders a single dropdown filter in the table toolbar: a trigger button plus a menu of mutually exclusive options.
+ * @description Configured entirely through the `data` property, which `cx-table-toolbar` supplies from each entry of its
+ * `dropdown-filters` array. Setting `data.icon` shows an icon in the trigger and turns the caret off, unless `data.caret`
+ * says otherwise. Setting `data.hideLabel` alongside an icon produces an icon-only trigger, where the label survives as
+ * the button's accessible name and native tooltip.
+ *
+ * @event {{ data: { id: string, option: TableDropdownFilterDataOption } }} cx-table-dropdown-filter-change - Emitted when an option is selected.
  */
 export default class CxTableDropdownFilter extends CortexElement {
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
         'cx-dropdown': typeof CxDropdown;
+        'cx-icon': typeof CxIcon;
         'cx-menu': typeof CxMenu;
         'cx-menu-item': typeof CxMenuItem;
     };
@@ -21,12 +29,16 @@ export default class CxTableDropdownFilter extends CortexElement {
     activeOptionId: string;
     optionsMap: Record<string, TableDropdownFilterDataOption>;
     get activeOption(): TableDropdownFilterDataOption;
+    private get triggerText();
+    private get isIconOnly();
+    private get showCaret();
     createRenderRoot(): this;
     private createOptionsMap;
     private selectOptionWithId;
     handleDataChange(): void;
     private handleMenuSelect;
     private renderMenuItems;
+    private renderTriggerIcon;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/library/packages/hybrid/table-core/src/table/components/table-toolbar/table-toolbar.d.ts

@@ -31,6 +31,9 @@ import { default as CxTableSavedSearchDropdown } from './table-saved-search-drop
  * @event cx-table-advanced-search-click - Emitted when the advanced search action is clicked.
  * @event cx-add - Emitted when the add action is clicked.
  * @event {{ type: 'csv' | 'xml' | 'custom' | 'report' }} cx-table-export - Emitted when an export action is selected.
+ *
+ * @cssproperty [--dropdown-filter-icon-color=currentColor] - Color of the icon in a dropdown filter trigger.
+ * @cssproperty [--dropdown-filter-icon-size=var(--cx-font-size-large)] - Size of the icon in a dropdown filter trigger. Matches the 20px icon in the design; without it the icon inherits 16px from cx-button.
  */
 export default class CxTableToolbar extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/molecules/src/dynamic-select/dynamic-select.d.ts

@@ -215,15 +215,28 @@ export default class CxDynamicSelect extends CortexElement {
      * Has no effect when `multiple` is enabled.
      */
     autoFallbackFirstOption: boolean;
+    /**
+     * Reflects whether the select currently has any fetched options.
+     * Read-only from consumers; useful as a CSS hook (e.g. `cx-dynamic-select[has-options]`).
+     */
+    hasOptions: boolean;
     options: Option[];
     start: number;
     searchTerm: string;
     hasMore: boolean;
     loading: boolean;
+    /**
+     * Sequence number for in-flight `fetchOptions` calls. Incremented every time a fetch is
+     * (re)started so a late-arriving response from a superseded/cancelled request (e.g. the
+     * user cleared the input while a previous fetch was still pending) can be detected and
+     * discarded instead of overwriting newer state.
+     */
+    private fetchToken;
     createRenderRoot(): this;
     private fetchOptions;
     handleStartChange(): Promise<void>;
     handleSearchTermChange(): Promise<void>;
+    handleOptionsChange(): void;
     handleColumnsChange(): Promise<void>;
     private tableGetOptionValue;
     private tableSetOptionSelected;
@@ -236,6 +249,7 @@ export default class CxDynamicSelect extends CortexElement {
     private getColWidth;
     private getFallbackValue;
     private handleInputChange;
+    private handleClear;
     private handleLoadMore;
     private handleCustomChange;
     private renderTableOptions;

package/library/packages/molecules/src/faceted-filter/faceted-filter.d.ts

@@ -23,6 +23,7 @@ import { CSSResultGroup } from 'lit';
  * or via "Clear". Carries the removed tag's `key`.
  *
  * @cssproperty [--panel-max-height=600px] - The maximum height of the dropdown panel and its content.
+ * @cssproperty [--trigger-icon-size=var(--cx-font-size-large)] - Size of the filter icon in the trigger. Also insulates the icon from a `--font-size` inherited from an ancestor.
  */
 export default class CxFacetedFilter extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/molecules/src/folder-select/components/folder-select-tree/folder-select-tree.d.ts

@@ -97,7 +97,23 @@ export default class CxFolderSelectTree extends CortexElement {
     private fetchFolders;
     private handleChildrenLoaded;
     private removePreloadedFolders;
+    /**
+     * @returns Whether this call added any new key to `currentRootIDsSet`
+     * (and therefore already emitted `cx-folder-select-selection-seeded` via
+     * `seedSelectionFromValue`). Callers that suppressed an earlier seed's
+     * emit (e.g. `handleFetchFolders` seeding root folders first) use this to
+     * know whether they still need to emit themselves.
+     */
     private preloadSelectedFolders;
+    /**
+     * @param suppressEmit Skip the `cx-folder-select-selection-seeded` emit
+     * even if this call adds keys. Used when the caller is about to seed more
+     * (e.g. `handleFetchFolders` seeding root folders right before awaiting
+     * `preloadSelectedFolders`) so the host never re-syncs its `value` from a
+     * `currentRootIDsSet` that is still missing folders the caller already
+     * knows are coming — that partial snapshot would otherwise overwrite
+     * `cx-folder-select.value` and permanently drop the not-yet-seeded ids.
+     */
     private seedSelectionFromValue;
     private renderFolder;
     render(): TemplateResult;

package/library/packages/molecules/src/folder-select/folder-select.d.ts

@@ -21,6 +21,7 @@ export default class CxFolderSelect extends CortexElement {
     };
     private readonly localize;
     selectEl?: CxSelect;
+    treeEl?: CxFolderSelectTree;
     minQueryLength: number;
     selection: 'multiple' | 'single';
     variant: FolderSelectVariant;
@@ -74,6 +75,17 @@ export default class CxFolderSelect extends CortexElement {
      */
     private handleTreeChildrenLoaded;
     private handleSelectClear;
+    /**
+     * `cx-tree` only emits `cx-selection-change` from its own click-driven
+     * `selectItem()` — setting `option.selected` directly (as the tag's X
+     * button does in `selectGetTag`) bypasses that method entirely, so
+     * `cx-tree` never emits it for a tag removal. Consumers like
+     * `cx-folder-picker` listen for `cx-selection-change` (not our internal
+     * `cx-selected-change`/`value`) to know when to re-emit their own public
+     * change event, so removing a tag would otherwise never reach them.
+     * Emit it ourselves here, mirroring `cx-tree`'s own event shape.
+     */
+    private emitSelectionChangeFromTree;
     /**
      * cx-folder-select-tree owns `currentRootIDsSet` (the real source of
      * truth for multi-select) — a user toggling a tree-item, or removing a
@@ -99,8 +111,9 @@ export default class CxFolderSelect extends CortexElement {
     /**
      * cx-select's selectedOptions cache (which drives the tag UI in
      * `multiple` mode) is only recomputed during its own `selectionChanged`
-     * flow — that flow doesn't run in our setup because we no-op
-     * `selectSetOptionSelected` for multi-select (cx-tree owns selection).
+     * flow — that flow doesn't run for us because cx-select's default
+     * `setOptionSelected` only acts on `CxOption`, not our `CxTreeItem`
+     * options (cx-tree owns selection instead).
      * Re-read options here so the rendered tag list matches, in response to
      * either signal cx-folder-select-tree can emit:
      * - `cx-selected-change`, bubbled from a user toggling a tree-item.
@@ -119,11 +132,11 @@ export default class CxFolderSelect extends CortexElement {
      * default tag, but the X click goes through cx-tree's selection flow
      * (`option.selected = false` → `cx-selected-change` →
      * cx-folder-select-tree.handleSelectedChange) rather than
-     * cx-select.toggleOptionSelection (which our `selectSetOptionSelected`
-     * no-ops in multi mode, so the default X click would do nothing).
+     * cx-select.toggleOptionSelection (whose `setOptionSelected` only acts on
+     * `CxOption`, so the default X click would do nothing for our
+     * `CxTreeItem` options).
      */
     selectGetTag(option: HTMLElement): TemplateResult;
-    selectSetOptionSelected(option: HTMLElement, selected: boolean): void;
     updateFunctionProps(): void;
     handleOpenChange(): void;
     handleVariantChange(): Promise<void>;

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -111,6 +111,15 @@ export default class CxContentBuilder extends CortexElement {
      * @default false
      */
     enableAssetFormatControls: boolean;
+    /**
+     * Whether the content builder emits `ol:ui-metric` events timing each user action,
+     * for collection as browser OpenTelemetry histograms.
+     *
+     * Off by default: when false no timers are armed and no events are dispatched, so an
+     * unmonitored site pays nothing for this being here.
+     * @default false
+     */
+    enableMetrics: boolean;
     /**
      * Default asset format applied to image blocks.
      * Used as the initial format when a block is added, whether or not
@@ -221,6 +230,20 @@ export default class CxContentBuilder extends CortexElement {
     private readonly initializeCustomFrame;
     private containerDropdownObservers;
     private nextMapHoveredBadgeState;
+    /**
+     * Host callbacks handed to GrapesJS blocks and config UI, each timed via
+     * `measurePromise` so the promise's own settling is the completion signal.
+     *
+     * Getters, not fields set once in the constructor: a host can override
+     * `onRequestAsset` (etc.) on the element instance after construction but before
+     * these are read (e.g. `el.onRequestAsset = customFn`), and a constructor-time
+     * `.bind()` would have captured the original method forever, silently ignoring
+     * that override.
+     */
+    private get measuredOnRequestAsset();
+    private get measuredOnRequestDownloadFormat();
+    private get measuredOnConfigureWorkflow();
+    private get measuredOnRequestAssetFormat();
     get isDesigner(): boolean;
     get isTemplateEditable(): boolean;
     get isMultiLanguage(): boolean;

package/library/packages/organisms/src/content-builder/content-builder.telemetry.d.ts

@@ -0,0 +1,67 @@
+import { Component } from 'grapesjs';
+
+export declare const UiAction: {
+    readonly AddBlock: "add_block";
+    readonly ConfigureWorkflow: "configure_workflow";
+    readonly DeviceSwitch: "device_switch";
+    readonly DuplicateBlock: "duplicate_block";
+    readonly EditorBoot: "editor_boot";
+    readonly MoveBlock: "move_block";
+    readonly OpenConfig: "open_config";
+    readonly PickAsset: "pick_asset";
+    readonly PickAssetFormat: "pick_asset_format";
+    readonly PickDownloadFormat: "pick_download_format";
+    readonly Redo: "redo";
+    readonly RemoveBlock: "remove_block";
+    readonly RichTextEdit: "rich_text_edit";
+    readonly SaveConfig: "save_config";
+    readonly SelectBlock: "select_block";
+    readonly Undo: "undo";
+};
+export type UiActionName = (typeof UiAction)[keyof typeof UiAction];
+/** Mirrors the CMS5_BO.Data.MetricsIsEnabled parameter, passed in by the host VForm. */
+export declare function setEditorMetricsEnabled(enabled: boolean): void;
+/** Whether metrics are currently armed - the same flag `measureSync` and friends check. */
+export declare function isEditorMetricsEnabled(): boolean;
+export declare function dispatch(action: string, durationMs: number, component: string, blockType?: string): void;
+/**
+ * Derive the block-type label from a GrapesJS component.
+ *
+ * Returns undefined for anything that is not a CMS5 block - a raw text node, a wrapper,
+ * an element the builder does not own - so those actions are recorded without a block
+ * dimension rather than under a misleading one.
+ */
+export declare function blockTypeOf(component?: Component): string | undefined;
+/**
+ * Time a synchronous action through to the paint that shows its result.
+ *
+ * Two nested frames, not one: the first callback still runs before the browser
+ * paints, so ending there would time the JavaScript and miss the layout and paint
+ * the user is actually waiting on.
+ */
+export declare function measureSync(action: UiActionName, blockType?: string): void;
+/**
+ * Time a synchronous action that started earlier, through to the paint that shows it.
+ *
+ * Needed for the editor commands: the only place that knows which block was
+ * involved is *after* the command has run, but the clock has to start before it.
+ * The caller keeps the start time and supplies the block type at the end, so the
+ * sample covers the whole action rather than only its trailing paint.
+ */
+export declare function measureSyncFrom(startedAt: number, action: UiActionName, blockType?: string): void;
+/**
+ * Start timing an action that finishes on its own schedule, and return the ender.
+ *
+ * Used where a paint is not the completion signal - opening the asset picker, saving
+ * a config, booting the editor. The returned function is safe to call more than once;
+ * only the first call records.
+ */
+export declare function measureAsync(action: UiActionName, blockType?: string): () => void;
+/**
+ * Wrap a promise-returning host callback so it reports how long it took.
+ *
+ * The picker is host code we hand control to, so the promise settling is the only
+ * reliable completion signal. Rejections are timed too and then rethrown untouched:
+ * a picker that fails slowly is exactly the case worth seeing.
+ */
+export declare function measurePromise<TArgs extends unknown[], TResult>(action: UiActionName, fn: (...args: TArgs) => Promise<TResult>, blockType?: string): (...args: TArgs) => Promise<TResult>;

package/library/packages/organisms/src/content-builder/plugins/index.d.ts

@@ -19,6 +19,7 @@ export { default as RichTextEditorPlugin } from './rich-text-editor';
 export * from './rich-text-editor/components';
 export { default as SearchBoxPlugin } from './search-box';
 export { default as TabsPlugin } from './tab-group';
+export { default as TelemetryPlugin } from './telemetry';
 export { default as TextPlugin } from './text';
 export { default as TimelinePlugin } from './timeline';
 export { default as VideoPlugin } from './video';

package/library/packages/organisms/src/content-builder/plugins/telemetry.d.ts

@@ -0,0 +1,15 @@
+import { Editor } from 'grapesjs';
+
+export type TelemetryPluginOptions = {
+    bootStartedAt: number;
+};
+/**
+ * Subscribe to the editor's own event bus for edit-mode timing.
+ *
+ * A GrapesJS plugin rather than a function called after `grapesjs.init()`: all
+ * edit-mode instrumentation then lives alongside the other editor plugins and is
+ * wired the same way (`plugins: [...]`), instead of being a one-off call the reader
+ * has to notice separately.
+ */
+declare const TelemetryPlugin: (editor: Editor, options: TelemetryPluginOptions) => void;
+export default TelemetryPlugin;

package/library/react-web-component.d.ts

@@ -43,7 +43,8 @@
             export type CxTableDropdownItem = { label: string; name: string; prefixIcon: string; section: string; style: dictionary; };
             export type CxTablePartial = { hozAlign: 'right' | 'left' | 'center'; headerHozAlign: 'right' | 'left' | 'center'; vertAlign: 'top' | 'bottom' | 'middle'; minWidth: number; widthGrow: number; widthShrink: number; resizable: 'header' | 'cell' | any; frozen: boolean; responsive: number; tooltip: string | any; cssClass: string; rowHandle: boolean; hideInHtml: boolean; sorter: 'string' | 'number' | 'boolean' | 'time' | 'date' | 'alphanum' | 'exists' | 'datetime' | 'array'; sorterParams: { format: string; locale: string | any; alignEmptyValues: 'top' | 'bottom'; type: 'max' | 'min' | 'length' | 'sum' | 'avg'; }; variableHeight: boolean; editable: any; editor: 'number' | 'input' | 'textarea' | 'time' | 'date' | 'list' | 'range' | 'datetime' | 'tickCross' | 'star' | any; editorParams: { min: number; max: number; step: number; verticalNavigation: 'table' | 'editor'; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { tristate: boolean; indeterminateValue: string; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { values: string | any | any[] | string[] | dictionary | { label: string; value: string | number | any; }[]; valuesURL: string; valuesLookup: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display' | any; valuesLookupField: string; fallbackOption: { value: string | number | any; prefix: string; hideDivider: boolean; }; clearable: boolean; sort: 'asc' | 'desc' | 'none'; emptyValue: any; maxWidth: boolean; placeholderLoading: string; placeholderEmpty: string; autocomplete: boolean; filterRemote: boolean; filterDelay: number; allowEmpty: boolean; listOnEmpty: boolean; freetext: boolean; showListOnEmpty: boolean; verticalNavigation: 'table' | 'editor' | 'hybrid'; closedByDefault: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; defaultValue: string; sortValuesList: 'desc' | 'asc'; formatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; formatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; } | { search: boolean; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { verticalNavigation: 'table' | 'editor' | 'hybrid'; shiftEnterSubmit: boolean; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { min: string; max: string; format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; }; validator: string | 'string' | 'boolean' | 'date' | 'numeric' | 'required' | 'unique' | 'integer' | 'float' | 'alphanumeric' | 'in' | 'regex'[] | { type: 'string' | 'boolean' | 'date' | 'numeric' | 'required' | 'unique' | 'integer' | 'float' | 'alphanumeric' | 'in' | 'regex'; parameters: any; message: string; } | { type: 'string' | 'boolean' | 'date' | 'numeric' | 'required' | 'unique' | 'integer' | 'float' | 'alphanumeric' | 'in' | 'regex'; parameters: any; message: string; }[]; mutatorParams: dictionary; mutatorDataParams: dictionary; mutatorEditParams: dictionary; mutatorClipboardParams: dictionary; mutateOnValidate: boolean; accessor: 'rownum'; accessorParams: dictionary; accessorDownloadParams: dictionary; accessorClipboardParams: dictionary; download: any; titleDownload: string; topCalc: 'max' | 'min' | 'concat' | 'sum' | 'avg' | 'unique' | 'count'; topCalcParams: { precision: number; }; topCalcFormatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; topCalcFormatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; bottomCalc: 'max' | 'min' | 'concat' | 'sum' | 'avg' | 'unique' | 'count'; bottomCalcParams: { precision: number; }; bottomCalcFormatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; bottomCalcFormatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; headerSort: boolean; headerSortStartingDir: 'asc' | 'desc' | 'none'; headerSortTristate: boolean; headerTooltip: string | any; headerVertical: 'flip' | any; editableTitle: boolean; titleFormatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; titleFormatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; textFormatParams: CxTableTextFormatParams; cellClass: string; cellStyle: dictionary; headerFilter: 'number' | 'input' | 'textarea' | 'time' | 'date' | 'list' | 'range' | 'datetime' | 'tickCross' | 'star' | any; headerFilterParams: { min: number; max: number; step: number; verticalNavigation: 'table' | 'editor'; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { tristate: boolean; indeterminateValue: string; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { values: string | any | any[] | string[] | dictionary | { label: string; value: string | number | any; }[]; valuesURL: string; valuesLookup: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display' | any; valuesLookupField: string; fallbackOption: { value: string | number | any; prefix: string; hideDivider: boolean; }; clearable: boolean; sort: 'asc' | 'desc' | 'none'; emptyValue: any; maxWidth: boolean; placeholderLoading: string; placeholderEmpty: string; autocomplete: boolean; filterRemote: boolean; filterDelay: number; allowEmpty: boolean; listOnEmpty: boolean; freetext: boolean; showListOnEmpty: boolean; verticalNavigation: 'table' | 'editor' | 'hybrid'; closedByDefault: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; defaultValue: string; sortValuesList: 'desc' | 'asc'; formatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; formatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; } | { search: boolean; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { verticalNavigation: 'table' | 'editor' | 'hybrid'; shiftEnterSubmit: boolean; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { min: string; max: string; format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; }; headerFilterPlaceholder: string; headerFilterFunc: 'ends' | '=' | '>=' | '>' | 'in' | 'keywords' | '<=' | '<' | 'like' | '!=' | 'regex' | 'starts'; headerFilterFuncParams: any; headerFilterLiveFilter: boolean; htmlOutput: any; clipboard: any; print: any; columns: { hozAlign: 'right' | 'left' | 'center'; headerHozAlign: 'right' | 'left' | 'center'; vertAlign: 'top' | 'bottom' | 'middle'; minWidth: number; widthGrow: number; widthShrink: number; resizable: 'header' | 'cell' | any; frozen: boolean; responsive: number; tooltip: string | any; cssClass: string; rowHandle: boolean; hideInHtml: boolean; sorter: 'string' | 'number' | 'boolean' | 'time' | 'date' | 'alphanum' | 'exists' | 'datetime' | 'array'; sorterParams: { format: string; locale: string | any; alignEmptyValues: 'top' | 'bottom'; type: 'max' | 'min' | 'length' | 'sum' | 'avg'; }; variableHeight: boolean; editable: any; editor: 'number' | 'input' | 'textarea' | 'time' | 'date' | 'list' | 'range' | 'datetime' | 'tickCross' | 'star' | any; editorParams: { min: number; max: number; step: number; verticalNavigation: 'table' | 'editor'; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { tristate: boolean; indeterminateValue: string; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { values: string | any | any[] | string[] | dictionary | { label: string; value: string | number | any; }[]; valuesURL: string; valuesLookup: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display' | any; valuesLookupField: string; fallbackOption: { value: string | number | any; prefix: string; hideDivider: boolean; }; clearable: boolean; sort: 'asc' | 'desc' | 'none'; emptyValue: any; maxWidth: boolean; placeholderLoading: string; placeholderEmpty: string; autocomplete: boolean; filterRemote: boolean; filterDelay: number; allowEmpty: boolean; listOnEmpty: boolean; freetext: boolean; showListOnEmpty: boolean; verticalNavigation: 'table' | 'editor' | 'hybrid'; closedByDefault: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; defaultValue: string; sortValuesList: 'desc' | 'asc'; formatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; formatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; } | { search: boolean; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { verticalNavigation: 'table' | 'editor' | 'hybrid'; shiftEnterSubmit: boolean; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { min: string; max: string; format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; }; validator: string | 'string' | 'boolean' | 'date' | 'numeric' | 'required' | 'unique' | 'integer' | 'float' | 'alphanumeric' | 'in' | 'regex'[] | { type: 'string' | 'boolean' | 'date' | 'numeric' | 'required' | 'unique' | 'integer' | 'float' | 'alphanumeric' | 'in' | 'regex'; parameters: any; message: string; } | { type: 'string' | 'boolean' | 'date' | 'numeric' | 'required' | 'unique' | 'integer' | 'float' | 'alphanumeric' | 'in' | 'regex'; parameters: any; message: string; }[]; mutatorParams: dictionary; mutatorDataParams: dictionary; mutatorEditParams: dictionary; mutatorClipboardParams: dictionary; mutateOnValidate: boolean; accessor: 'rownum'; accessorParams: dictionary; accessorDownloadParams: dictionary; accessorClipboardParams: dictionary; download: any; titleDownload: string; topCalc: 'max' | 'min' | 'concat' | 'sum' | 'avg' | 'unique' | 'count'; topCalcParams: { precision: number; }; topCalcFormatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; topCalcFormatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; bottomCalc: 'max' | 'min' | 'concat' | 'sum' | 'avg' | 'unique' | 'count'; bottomCalcParams: { precision: number; }; bottomCalcFormatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; bottomCalcFormatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; headerSort: boolean; headerSortStartingDir: 'asc' | 'desc' | 'none'; headerSortTristate: boolean; headerTooltip: string | any; headerVertical: 'flip' | any; editableTitle: boolean; titleFormatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; titleFormatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; textFormatParams: CxTableTextFormatParams; cellClass: string; cellStyle: dictionary; headerFilter: 'number' | 'input' | 'textarea' | 'time' | 'date' | 'list' | 'range' | 'datetime' | 'tickCross' | 'star' | any; headerFilterParams: { min: number; max: number; step: number; verticalNavigation: 'table' | 'editor'; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { tristate: boolean; indeterminateValue: string; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { values: string | any | any[] | string[] | dictionary | { label: string; value: string | number | any; }[]; valuesURL: string; valuesLookup: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display' | any; valuesLookupField: string; fallbackOption: { value: string | number | any; prefix: string; hideDivider: boolean; }; clearable: boolean; sort: 'asc' | 'desc' | 'none'; emptyValue: any; maxWidth: boolean; placeholderLoading: string; placeholderEmpty: string; autocomplete: boolean; filterRemote: boolean; filterDelay: number; allowEmpty: boolean; listOnEmpty: boolean; freetext: boolean; showListOnEmpty: boolean; verticalNavigation: 'table' | 'editor' | 'hybrid'; closedByDefault: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; defaultValue: string; sortValuesList: 'desc' | 'asc'; formatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; formatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; } | { search: boolean; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { verticalNavigation: 'table' | 'editor' | 'hybrid'; shiftEnterSubmit: boolean; selectContents: boolean; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { min: string; max: string; format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; } | { format: string; verticalNavigation: 'table' | 'editor'; elementAttributes: dictionary; mask: string; maskAutoFill: boolean; maskLetterChar: string; maskNumberChar: string; maskWildcardChar: string; }; headerFilterPlaceholder: string; headerFilterFunc: 'ends' | '=' | '>=' | '>' | 'in' | 'keywords' | '<=' | '<' | 'like' | '!=' | 'regex' | 'starts'; headerFilterFuncParams: any; headerFilterLiveFilter: boolean; htmlOutput: any; clipboard: any; print: any; columns: any[]; headerMenu: { label: string; disabled: any; menu: any[]; } | { separator: boolean; }[]; headerMenuIcon: string; headerContextMenu: { label: string; disabled: any; menu: any[]; } | { separator: boolean; }[]; headerDblClickPopup: string; dblClickPopup: string; contextMenu: { separator: boolean; } | { label: string; disabled: any; menu: any[]; }[]; clickMenu: { separator: boolean; } | { label: string; disabled: any; menu: any[]; }[]; headerDblClickMenu: { separator: boolean; } | { label: string; disabled: any; menu: any[]; }[]; dblClickMenu: { separator: boolean; } | { label: string; disabled: any; menu: any[]; }[]; cellPopup: string; formatterClipboard: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff' | any; formatterClipboardParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; formatterPrint: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff' | any; formatterPrintParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; accessorPrintParams: dictionary; accessorHtmlOutputParams: dictionary; formatterHtmlOutput: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff' | any; formatterHtmlOutputParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; titleClipboard: string; titleHtmlOutput: string; titlePrint: string; maxWidth: number | any; headerWordWrap: boolean; editorEmptyValue: any; hoverMenu: CxTableHoverMenuOptions; clickable: boolean; clickableActionName: string; clickableEventName: string; title: string; field: string; hidden: boolean; width: string | number; formatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; formatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; }[]; headerMenu: { label: string; disabled: any; menu: any[]; } | { separator: boolean; }[]; headerMenuIcon: string; headerContextMenu: { label: string; disabled: any; menu: any[]; } | { separator: boolean; }[]; headerDblClickPopup: string; dblClickPopup: string; contextMenu: { separator: boolean; } | { label: string; disabled: any; menu: any[]; }[]; clickMenu: { separator: boolean; } | { label: string; disabled: any; menu: any[]; }[]; headerDblClickMenu: { separator: boolean; } | { label: string; disabled: any; menu: any[]; }[]; dblClickMenu: { separator: boolean; } | { label: string; disabled: any; menu: any[]; }[]; cellPopup: string; formatterClipboard: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff' | any; formatterClipboardParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; formatterPrint: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff' | any; formatterPrintParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; accessorPrintParams: dictionary; accessorHtmlOutputParams: dictionary; formatterHtmlOutput: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff' | any; formatterHtmlOutputParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; titleClipboard: string; titleHtmlOutput: string; titlePrint: string; maxWidth: number | any; headerWordWrap: boolean; editorEmptyValue: any; hoverMenu: CxTableHoverMenuOptions; clickable: boolean; clickableActionName: string; clickableEventName: string; title: string; field: string; hidden: boolean; width: string | number; formatter: 'html' | 'link' | 'progress' | 'textarea' | 'time' | 'color' | 'image' | 'switch' | 'plaintext' | 'toggle' | 'lookup' | 'datetime' | 'tickCross' | 'star' | 'money' | 'datetimediff' | 'traffic' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'diff'; formatterParams: dictionary | { decimal: string; thousand: string; symbol: string; symbolAfter: boolean; precision: number | any; negativeSign: string | any; } | { height: string; width: string; urlPrefix: string; urlSuffix: string; } | { labelField: string; label: string; urlPrefix: string; urlField: string; url: string; target: string; download: boolean; } | { inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { date: any; humanize: boolean; unit: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds'; suffix: boolean; inputFormat: string; outputFormat: string; invalidPlaceholder: string | number | any; timezone: string; } | { allowEmpty: boolean; allowTruthy: boolean; tickElement: string | any; crossElement: string | any; } | { min: number; max: number; color: string | any[]; } | { legend: string | any; legendColor: string | any[]; legendAlign: 'right' | 'left' | 'center' | 'justify'; min: number; max: number; color: string | any[]; } | { stars: number; } | { rowRange: 'all' | 'selected' | 'visible' | 'range' | 'active' | 'display'; } | { size: number; max: number; onValue: string | number; offValue: string | number; onTruthy: boolean; onColor: string; offColor: string; clickable: boolean; } | { size: 'small' | 'large' | 'medium'; onValue: string | number | any; offValue: string | number | any; } | CxTableTimeFormatterParams; };
             export type CxTableSavedSearchItem = { name: string; recordID: string; };
-            export type CxTableTableDropdownFilterData = { defaultOption: string; field: string; id: string; label: string; options: CxTableTableDropdownFilterDataOption[]; };
+            export type CxTableTableDropdownFilterData = { caret: boolean; defaultOption: string; field: string; hideLabel: boolean; icon: CxTableTableDropdownFilterIcon; id: string; label: string; options: CxTableTableDropdownFilterDataOption[]; };
+            export type CxTableTableDropdownFilterIcon = { name: string; src: string; };
             export type CxTableTableDropdownFilterDataOption = { filter: CxTableFilter; id: string; label: string; };
             export type CxTableFilter = { field: string; type: 'ends' | '=' | '>=' | '>' | 'in' | 'keywords' | '<=' | '<' | 'like' | '!=' | 'regex' | 'starts'; value: any; params: { separator: string; matchAll: boolean; }; };
             export type CxTablePick = { value: any; field: string; };
@@ -5981,6 +5982,10 @@
           * When set to true, after options are fetched, the select falls back to the first option's value when the current `value` does not match any fetched option (including when no `value` was provided). Has no effect when `multiple` is enabled.
         */
         autoFallbackFirstOption?: boolean;
+        /**
+          * Reflects whether the select currently has any fetched options. Read-only from consumers; useful as a CSS hook (e.g. `cx-dynamic-select[has-options]`).
+        */
+        hasOptions?: boolean;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -9769,6 +9774,10 @@
           * Whether to expose the asset format / transformation / download-format / asset-format-picker controls in the per-block config sidebar for image, video, gallery, carousel, and timeline blocks. <br/>@default false
         */
         enableAssetFormatControls?: boolean;
+        /**
+          * Whether the content builder emits `ol:ui-metric` events timing each user action, for collection as browser OpenTelemetry histograms. <br/> Off by default: when false no timers are armed and no events are dispatched, so an unmonitored site pays nothing for this being here. <br/>@default false
+        */
+        enableMetrics?: boolean;
         /**
           * Default asset format applied to image blocks. Used as the initial format when a block is added, whether or not `enable-asset-format-controls` is on. <br/>@default 'TR1'
         */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.171.0",
+  "version": "2.173.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {