@orangelogic/design-system 2.172.0 → 2.173.0

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/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
         */

package/package.json

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