@orangelogic/design-system 2.132.0 → 2.134.0

package/library/components/video.js

@@ -1,13 +1,13 @@
 import { _ as kd, a as Sa, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as ps, a as Bn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Sb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Cb } from "../chunks/image.DAtx64Jj.js";
+import { C as Cb } from "../chunks/image.SLqIVjqc.js";
 import Mb from "./resize-observer.js";
-import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.B5N-oYx6.js";
+import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.BVhOesNE.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";
 import { b as Ib } from "../chunks/browser.BHOCIF_A.js";
 import { c as Ob } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as kb } from "../chunks/i18n.NAH4U8Lw.js";
+import { L as kb } from "../chunks/i18n.DoMIwXr2.js";
 import { w as Ki } from "../chunks/watch.CThbualB.js";
 import { i as Bb, x as Qc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as Ri } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/package.json

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

package/library/packages/atoms/src/components/checkbox/checkbox.d.ts

@@ -25,6 +25,9 @@ import { default as CxIcon } from '../icon/icon';
  * @csspart indeterminate-icon - The indeterminate icon, an `<cx-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
  * @csspart form-control-help-text - The help text's wrapper.
+ *
+ * @cssproperty [--cx-checkbox-disabled-background=var(--cx-input-background-color)] - Background color of the control box when disabled. Override to customize the disabled appearance without affecting the shared opacity behavior.
+ * @cssproperty [--cx-checkbox-disabled-border-color=var(--cx-input-border-color)] - Border color of the control box when disabled.
  */
 export default class CxCheckbox extends CortexElement implements CortexFormControl {
     static readonly styles: CSSResultGroup;

package/library/packages/atoms/src/components/diff/utils/diff-worker-client.d.ts

@@ -5,6 +5,7 @@
  * their responses by an internal id. Mounting many consumers therefore neither
  * spawns multiple workers nor accumulates per-request listeners.
  *
- * Resolves with the diff HTML, or an empty string if the worker errors.
+ * Resolves with the diff HTML, or an empty string if the worker cannot be
+ * created or errors while computing.
  */
 export declare function computeDiff(oldValue: string, newValue: string): Promise<string>;

package/library/packages/atoms/src/components/format-date/format-date.d.ts

@@ -37,6 +37,14 @@ export default class CxFormatDate extends CortexElement {
     timeZone: string;
     /** The format for displaying the hour. */
     hourFormat: FormatDateTimeZoneHour;
+    /**
+     * When true, removes the locale separator (e.g. " at " in en-US) that
+     * appears between date and time parts.
+     */
+    noDatetimeSeparator: boolean;
+    private buildDateTimeOptions;
+    private hasDateParts;
+    private hasTimeParts;
     render(): import('lit').TemplateResult<1> | undefined;
 }
 declare global {

package/library/packages/atoms/src/components/menu-item/menu-item.d.ts

@@ -30,6 +30,8 @@ import { default as CxSpinner } from '../spinner/spinner';
  * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
  *
  * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
+ * @cssproperty [--checked-icon-size=1.5em] - The size of the checked icon.
+ * @cssproperty [--checked-icon-color=var(--cx-color-primary)] - The color of the checked icon when the item is checked.
  */
 export default class CxMenuItem extends CortexElement {
     static readonly styles: CSSResultGroup;

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

@@ -3,7 +3,7 @@ import { default as CxDropdown } from '../../../dropdown/dropdown.ts';
 import { default as CxMenu } from '../../../menu/menu.ts';
 import { default as CxMenuItem } from '../../../menu-item/menu-item.ts';
 import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
-import { TableDropdownFilterData, TableDropdownFilterDataOption } from '../../../../../../types/src/table';
+import { TableDropdownFilterData, TableDropdownFilterDataOption } from '../../../../../../types/src/table-toolbar';
 import { CSSResultGroup } from 'lit';
 
 /**

package/library/packages/atoms/src/components/table/components/table-toolbar/table-group-by-dropdown.d.ts

@@ -0,0 +1,44 @@
+import { default as CxButton } from '../../../button/button.ts';
+import { default as CxDropdown } from '../../../dropdown/dropdown.ts';
+import { default as CxMenu } from '../../../menu/menu.ts';
+import { default as CxMenuItem } from '../../../menu-item/menu-item.ts';
+import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
+import { TableGroupByOption } from '../../../../../../types/src/table-toolbar';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary CxTableGroupByDropdown is a dropdown component for grouping table rows.
+ *
+ * @event {{ id: string | null }} cx-table-group-by-change - Emitted when the group-by selection changes. The id is null when grouping is cleared.
+ */
+export default class CxTableGroupByDropdown extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-dropdown': typeof CxDropdown;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+    };
+    private readonly localize;
+    private groupByOptionIdSet;
+    handleGroupByOptionsChange(): void;
+    /**
+     * The group by options.
+     */
+    groupByOptions: TableGroupByOption[];
+    /**
+     * The currently selected table group field.
+     */
+    groupByValue: string;
+    createRenderRoot(): this;
+    private handleMenuSelect;
+    private emitGroupByChange;
+    private renderOption;
+    private renderOffOption;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-table-group-by-dropdown': CxTableGroupByDropdown;
+    }
+}

package/library/packages/atoms/src/components/table/components/table-toolbar/table-saved-search-dropdown.d.ts

@@ -4,7 +4,7 @@ import { default as CxIcon } from '../../../icon/icon.ts';
 import { default as CxMenu } from '../../../menu/menu.ts';
 import { default as CxMenuItem } from '../../../menu-item/menu-item.ts';
 import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
-import { SavedSearchItem } from '../../../../../../types/src/table';
+import { SavedSearchItem } from '../../../../../../types/src/table-toolbar';
 import { CSSResultGroup } from 'lit';
 
 /**

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

@@ -1,4 +1,5 @@
 import { default as CxButton } from '../../../button/button.ts';
+import { default as CxCheckbox } from '../../../checkbox/checkbox.ts';
 import { default as CxDropdown } from '../../../dropdown/dropdown.ts';
 import { default as CxIcon } from '../../../icon/icon.ts';
 import { default as CxIconButton } from '../../../icon-button/icon-button.ts';
@@ -10,9 +11,11 @@ import { default as CxSpace } from '../../../space/space.ts';
 import { default as CxTooltip } from '../../../tooltip/tooltip.ts';
 import { default as CxTypography } from '../../../typography/typography.ts';
 import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
-import { PaginationPlacement, SavedSearchItem, TableDropdownFilterData } from '../../../../../../types/src/table';
+import { PaginationPlacement } from '../../../../../../types/src/table';
+import { SavedSearchItem, TableDropdownFilterData, TableGroupByOption } from '../../../../../../types/src/table-toolbar';
 import { CSSResultGroup } from 'lit';
 import { default as CxTableDropdownFilter } from './table-dropdown-filter';
+import { default as CxTableGroupByDropdown } from './table-group-by-dropdown';
 import { default as CxTableSavedSearchDropdown } from './table-saved-search-dropdown';
 
 /**
@@ -21,6 +24,7 @@ import { default as CxTableSavedSearchDropdown } from './table-saved-search-drop
  *
  * @slot label - Optional label content that replaces the label property fallback.
  * @slot pagination - Optional pagination content displayed opposite the label.
+ * @slot dialog-dynamic-filter - Filter UI shown beside the toolbar actions and hidden while rows are selected. `cx-table` renders a `cx-faceted-filter` here when facets are available.
  *
  * @event {{ value: string }} cx-search - Emitted when the search value is submitted or cleared.
  * @event cx-table-advanced-search-click - Emitted when the advanced search action is clicked.
@@ -35,6 +39,7 @@ export default class CxTableToolbar extends CortexElement {
     private readonly hasSlotController;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
+        'cx-checkbox': typeof CxCheckbox;
         'cx-dropdown': typeof CxDropdown;
         'cx-icon': typeof CxIcon;
         'cx-icon-button': typeof CxIconButton;
@@ -44,6 +49,7 @@ export default class CxTableToolbar extends CortexElement {
         'cx-pagination': typeof CxPagination;
         'cx-space': typeof CxSpace;
         'cx-table-dropdown-filter': typeof CxTableDropdownFilter;
+        'cx-table-group-by-dropdown': typeof CxTableGroupByDropdown;
         'cx-table-saved-search-dropdown': typeof CxTableSavedSearchDropdown;
         'cx-tooltip': typeof CxTooltip;
         'cx-typography': typeof CxTypography;
@@ -78,6 +84,10 @@ export default class CxTableToolbar extends CortexElement {
      * Whether to display a export XML button
      */
     canExportXml: boolean;
+    /**
+     * Whether to display a export PDF button
+     */
+    canExportPdf: boolean;
     /**
      * Whether to display a export custom button
      */
@@ -114,28 +124,50 @@ export default class CxTableToolbar extends CortexElement {
      * Whether to display the saved search dropdown
      */
     showSavedSearch: boolean;
+    /**
+     * The group by options.
+     */
+    groupByOptions: TableGroupByOption[];
+    /**
+     * The currently selected group-by field.
+     */
+    groupByValue: string;
     searchValue: string;
+    /**
+     * Set by cx-table to drive the select-all checkbox.
+     * `null` = feature disabled. Object = feature enabled with checkbox + slot state.
+     * Intended for cx-table ownership, not direct consumer assignment.
+     */
+    selectAllState: {
+        checked: boolean;
+        count: number;
+        indeterminate: boolean;
+    } | null;
     /**
      * Where the pagination control is placed. Only the `top*` values render the
      * paginator inside this toolbar; the value drives the header alignment.
      */
     paginationPlacement: PaginationPlacement;
+    private handleSelectAllChange;
     /**
      * Whether pagination is enabled on the table. Reserves stable height for the
      * height when pagination moves between `top-*`/`bottom-*` placements.
      */
     pagination: boolean;
+    private renderSelectAll;
     private handleSearchSubmit;
     private handleAdvancedSearchClick;
     private handleClearSearch;
     private handleAdd;
     private handleExportCsv;
     private handleExportXml;
+    private handleExportPdf;
     private handleExportCustom;
     private handleSaveReport;
     private renderSearch;
     private renderAddButton;
     private renderSavedSearchDropdown;
+    private renderGroupByDropdown;
     private renderExportDropdown;
     private renderDropdownFilters;
     private renderPagination;

package/library/packages/atoms/src/components/table/controllers/ajax-facets/ajax-facet-data-controller.d.ts

@@ -0,0 +1,39 @@
+import { Facet, FacetDetails } from '../../../../../../types/src/faceted-filter';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+interface FacetDataHost extends ReactiveControllerHost, HTMLElement {
+    ajaxURL: string | undefined;
+    facetConfig: string | undefined;
+    hasFacets: boolean;
+}
+/**
+ * FacetDataController
+ *
+ * When `ajaxURL` is set and an AJAX response contains a `facets` map,
+ * this controller builds `Facet[]` from the response and exposes them via
+ * the `facets` / `availableFacets` fields, which `cx-table` binds onto the
+ * `cx-faceted-filter` it renders in the `dialog-dynamic-filter` slot.
+ *
+ * The optional `facetConfig` prop on `cx-table` provides the schema for
+ * date-picker, date-range-picker, and checkbox selection-mode facets.
+ * All other response keys default to checkbox. Requires either `facetConfig` or `response.facets` to be
+ * present — if neither exists the controller is a no-op.
+ *
+ * `facetConfig` format: `"FieldName:type-option1-option2 …"`
+ * - `checkbox` — required option: `single` or `multiple`
+ * - `datePicker` — options: `showTime`
+ * - `dateRangePicker` — options: `showTime`, `showPreset`
+ */
+export declare class FacetDataController implements ReactiveController {
+    private readonly host;
+    /** Built facets bound onto the table-rendered `cx-faceted-filter`. */
+    facets: Facet[];
+    /** Facet schema (details only) bound onto the `cx-faceted-filter`. */
+    availableFacets: FacetDetails[];
+    constructor(host: FacetDataHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    handleAjaxResponse(result: unknown): void;
+}
+export {};

package/library/packages/atoms/src/components/table/controllers/ajax-facets/ajax-facet-filter-controller.d.ts

@@ -0,0 +1,27 @@
+import { DateFilterCompareFormat } from '../../../../../../types/src/table';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { FilterController } from '../filter-controller';
+
+interface FacetFilterHost extends ReactiveControllerHost, HTMLElement {
+    dateFilterCompareFormat: DateFilterCompareFormat;
+}
+/**
+ * FacetFilterController
+ *
+ * Bridges `cx-faceted-filter` (placed in the `dialog-dynamic-filter` slot) with
+ * `FilterController`. Listens for `cx-faceted-filter-change` events bubbling out
+ * of the slot and translates the detail into Tabulator filter calls.
+ *
+ * Works in both filter modes:
+ * - **local** — Tabulator compares filter values against in-memory row data.
+ * - **remote** — Tabulator puts active filters in `params` for `ajaxURLGenerator`.
+ */
+export declare class FacetFilterController implements ReactiveController {
+    private readonly host;
+    private readonly filterController;
+    constructor(host: FacetFilterHost, filterController: FilterController);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleFacetedFilterChange;
+}
+export {};

package/library/packages/atoms/src/components/table/{filter-controller.d.ts → controllers/filter-controller.d.ts}

@@ -1,8 +1,10 @@
-import { Filter, TableDropdownFilterData } from '../../../../types/src/table';
+import { SelectedDateRanges } from '../../../../../types/src/faceted-filter';
+import { DateFilterCompareFormat, Filter } from '../../../../../types/src/table';
+import { TableDropdownFilterData } from '../../../../../types/src/table-toolbar';
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { default as CxTable } from './table';
+import { default as CxTable } from '../table';
 
-export type FilterSource = 'search' | `dropdown:${string}`;
+export type FilterSource = 'search' | `dropdown:${string}` | `dynamic:${string}`;
 /**
  * A reactive controller to manage programmatic filter state across multiple sources (search, dropdowns).
  * Coordinates filter operations to prevent conflicts between different filter sources.
@@ -44,6 +46,25 @@ export declare class FilterController implements ReactiveController {
      * and applies filters for each configured `defaultOption`
      */
     syncDropdownFilterSources(configs: readonly TableDropdownFilterData[]): void;
+    /**
+     * Reconcile faceted-filter sources from a full selection map keyed by field name
+     * (the `cx-faceted-filter-change` detail). Each field with values becomes an `in`
+     * filter under `dynamic:facet:<field>`; fields that are absent or empty are cleared.
+     * Mirrors {@link syncDropdownFilterSources} for the faceted-filter use case.
+     */
+    syncFacetedFilters(selection: Record<string, string[]>): void;
+    /**
+     * Reconcile date-range facet sources from the `dateRanges` map emitted by
+     * `cx-faceted-filter` (keyed by field).
+     *
+     * - `date-picker` → single `=` filter on `fromDate`
+     * - `date-range` → `>=` on `fromDate` + `<=` on `toDate`
+     *
+     * When `dateFilterCompareFormat` is `'timestamp'`, values are converted to
+     * Unix ms via `new Date(...).getTime()` so numeric `>=`/`<=` comparison
+     * works when cell data is a timestamp. Default (`'iso'`) keeps ISO strings.
+     */
+    syncDateRangeFilters(dateRanges: SelectedDateRanges, dateFilterCompareFormat?: DateFilterCompareFormat): void;
     /**
      * Remove filters for a specific field, optionally scoped to a specific source.
      * @param field - The field name to remove filters for

package/library/packages/atoms/src/components/table/controllers/select-all-controller.d.ts

@@ -0,0 +1,55 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { default as CxTable } from '../table';
+
+export interface SelectAllState {
+    checked: boolean;
+    count: number;
+    indeterminate: boolean;
+}
+export declare class SelectAllController implements ReactiveController {
+    private readonly host;
+    private isSelectAllMode;
+    /** Remote select-all: IDs of rows explicitly unchecked by the user. */
+    private deselectedIds;
+    /** Remote individual selection: IDs of rows explicitly checked by the user. */
+    private selectedIdsForRemote;
+    private remoteTotalCount;
+    /**
+   * Cross-page selection count. Cannot derive from Tabulator's getSelectedRows()
+   * because in remote mode only the current page's rows exist in memory.
+   */
+    private selectedRowsCount;
+    /** Prevents rowSelectionChanged from syncing count during clearTabulatorSelection(). */
+    private selectionSyncSkip;
+    /** True while Tabulator is loading a new page — suppresses rowSelectionChanged. */
+    private isPageTransition;
+    constructor(host: ReactiveControllerHost & CxTable);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /**
+     * Use this instead of tabulatorInstance.getSelectedRows().length when
+     * remote pagination is active — Tabulator only holds the current page
+     * in memory, so getSelectedRows() would return an incomplete count.
+   */
+    get selectedCount(): number;
+    get selectAllActive(): boolean;
+    get state(): SelectAllState;
+    canSelectRow(rowData: Record<string, unknown>): boolean;
+    private get isRemoteMode();
+    private get checked();
+    private get indeterminate();
+    private get activeEnabledRows();
+    selectAll(): void;
+    deselectAll(): void;
+    resetSelection(): void;
+    onTableInit(): void;
+    handleSelectAllChange(checked: boolean): void;
+    handleAjaxResponse(userAjaxResponse: CxTable['ajaxResponse'], url: string, config: unknown, response: unknown): any;
+    private handleDataLoading;
+    private handleRowSelectionChanged;
+    private handleDataLoaded;
+    private clearTabulatorSelection;
+    private purgeStaleSelectedRows;
+    private findDisabledFn;
+}

package/library/packages/atoms/src/components/table/table.d.ts

@@ -8,15 +8,19 @@ import { default as CxSpace } from '../space/space.ts';
 import { default as CxSpinner } from '../spinner/spinner.ts';
 import { default as CxTooltip } from '../tooltip/tooltip.ts';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { default as CxFacetedFilter } from '../../../../molecules/src/faceted-filter/faceted-filter.ts';
 import { RowComponent, TabulatorFull as Tabulator } from '../../../../hybrid/table-core/src/index.ts';
 import { PaginationCounter } from '../../../../types/src/pagination';
-import { HoverMenuOptions, PaginationPlacement, SavedSearchItem, TableClipboardAction, TableDropdownFilterData, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition, TableDataFormat } from '../../../../types/src/table';
+import { DateFilterCompareFormat, HoverMenuOptions, HttpMethod, PaginationPlacement, TableClipboardAction, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition, TableDataFormat } from '../../../../types/src/table';
+import { SavedSearchItem, TableDropdownFilterData, TableGroupByOption } from '../../../../types/src/table-toolbar';
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { CxTableFooter, CxTableRowActions, CxTableToolbar } from './components';
 
 /**
  * @summary Tables are used to display data in a structured format.
  *
+ * @description When `facet-config` and `ajax-url` are set, the table renders its own `cx-faceted-filter` in the toolbar and listens for `cx-faceted-filter-change`: checkbox-facet `selection` becomes `in` filters and `dateRanges` (from a `date-range` facet) become `>=` / `<=` filters, applied in both local and remote `filter-mode`. Hidden while rows are selected.
+ *
  * @csspart table - The table element.
  * @csspart pagination-footer - The footer container that holds the pagination control when `pagination-placement` is a `bottom*` value.
  *
@@ -76,6 +80,7 @@ export default class CxTable extends CortexElement {
         'cx-button': typeof CxButton;
         'cx-checkbox': typeof CxCheckbox;
         'cx-divider': typeof CxDivider;
+        'cx-faceted-filter': typeof CxFacetedFilter;
         'cx-format-number': typeof CxFormatNumber;
         'cx-icon-button': typeof CxIconButton;
         'cx-select': typeof CxSelect;
@@ -90,7 +95,10 @@ export default class CxTable extends CortexElement {
     private horizontalOsInstance;
     private resizeObserver;
     private overflowObserver;
+    private readonly ajaxFacetsController;
     private readonly filterController;
+    private readonly ajaxFacetFilterController;
+    private readonly selectAllController;
     private readonly shadowRootAutoloader;
     private readonly tabulatorHolder;
     private readonly tabulatorElement;
@@ -242,6 +250,10 @@ export default class CxTable extends CortexElement {
      * Whether to display a export XML button
      */
     canExportXml: boolean;
+    /**
+     * Whether to display a export PDF button
+     */
+    canExportPdf: boolean;
     /**
      * Whether to display a export custom button
      */
@@ -273,10 +285,20 @@ export default class CxTable extends CortexElement {
      * The dropdown filters to display in the toolbar.
      */
     dropdownFilters: TableDropdownFilterData[];
+    /**
+     * The group by options to display in the toolbar.
+     */
+    groupByOptions: TableGroupByOption[];
     /**
      * The URL to load the data from.
      */
     ajaxURL: string | undefined;
+    /**
+     * HTTP method for the remote ajax data request. When `POST`, parameters
+     * (page/size/sort/search/filters) are sent in the JSON request body instead of the URL query string.
+     * Defaults to `GET`.
+     */
+    ajaxMethod: HttpMethod;
     /**
      * If you need more control over the url of the request that you can get from the ajaxURL and ajaxParams properties, the you can use the ajaxURLGenerator property to pass in a callback that will generate the URL for you.
      *
@@ -288,6 +310,17 @@ export default class CxTable extends CortexElement {
      */
     ajaxParams: Record<string, string> | undefined;
     ajaxResponse: Options['ajaxResponse'] | undefined;
+    /**
+     * Schema string for AJAX facets when using `ajax-url`.
+     * Format: `"FieldName|Display Name:type-option1-option2,FieldName:type-option"` (comma-separated tokens).
+     * - `FieldName` — key returned in `response.facets` (required).
+     * - `Display Name` — human-readable UI label, separated from the field name by `|` (optional; defaults to `FieldName`).
+     * - `type` — `checkbox`, `datePicker`, or `dateRangePicker`.
+     * - options — `single` / `multiple` (required for `checkbox`), `showTime` (date types), `showPreset` (`dateRangePicker` only).
+     * Checkbox facets are inferred automatically from the AJAX response when omitted; configure them only to set selection mode. Checkbox config does not create config-only facets.
+     * Example: `"country:checkbox-multiple,createdAt|Create Date:datePicker-showTime,updatedAt|Updated At:dateRangePicker-showTime-showPreset"`
+     */
+    facetConfig: string | undefined;
     /**
      * Lookup list to link fields expected by the server to their function
      * ```typescript
@@ -359,6 +392,13 @@ export default class CxTable extends CortexElement {
      * Whether to display the item count in the group header.
      */
     groupHeaderCount: boolean;
+    /**
+     * When true, the default group header reuses the grouped column's formatter
+     * (e.g. composite avatar + name) instead of rendering plain text. Defaults to
+     * false to preserve existing group-header behavior. Ignored when a custom
+     * `group-header` function is supplied.
+     */
+    groupHeaderUseFormatter: boolean;
     /**
      * The amount of pixels to indent group rows per level
      */
@@ -714,8 +754,22 @@ export default class CxTable extends CortexElement {
      * the externally set state, not the internal data fetch.
      */
     loading: boolean;
+    /**
+     * Enables the select-all checkbox in the toolbar.
+     */
+    canSelectAll: boolean;
+    /**
+     * The field used as the unique row identifier for cross-page selection tracking
+     * when `can-select-all` is active with remote pagination.
+     *
+     * Defaults to `'id'`. Set this to match your data's actual unique key
+     * (e.g. `'recordID'`) — otherwise deselected/selected IDs will not be
+     * tracked correctly across pages.
+     */
+    rowIdField: string;
     /** URL to fetch tabular data from. When set, the table fetches, parses, and populates columns and data. */
     dataUrl: string;
+    dateFilterCompareFormat: DateFilterCompareFormat;
     /** Format of the data at dataUrl. Use 'auto' to detect from URL extension or Content-Type header. */
     dataFormat: TableDataFormat;
     tabulatorInstance: Tabulator | null;
@@ -727,11 +781,22 @@ export default class CxTable extends CortexElement {
     private activeSearchValue;
     /** Monotonic counter to discard responses from superseded dataUrl fetches. */
     private dataUrlRequestId;
+    /** True when facets are available — either from facet-config or from an AJAX response. Controls toolbar visibility. */
+    hasFacets: boolean;
     get initialized(): boolean | undefined;
     get searchValue(): string;
     get isBottomPlacement(): boolean;
     get showPaginationFooter(): boolean;
     get showTableToolbar(): string | boolean;
+    /** True when all active enabled rows are selected (local) or select-all mode with no exclusions (remote). */
+    get selectAllActive(): boolean;
+    /** Effective selected count — cross-page total in remote select-all mode, Tabulator count otherwise. */
+    get selectedCount(): number;
+    selectAll(): void;
+    deselectAll(): void;
+    resetSelection(): void;
+    canSelectRow(rowData: Record<string, unknown>): boolean;
+    handleSelectableRowsCheck(row: RowComponent): boolean;
     get clipboardOption(): Options['clipboard'];
     initTable(): Promise<void>;
     handleUseOverlayScrollbarChange(): void;
@@ -776,6 +841,7 @@ export default class CxTable extends CortexElement {
     handleNoColumnPlaceholderTextChange(): void;
     handleGroupByChange(): void;
     handleGroupHeaderChange(): void;
+    handleGroupHeaderUseFormatterChange(): void;
     handleGroupValuesChange(): void;
     handleGroupLoadMoreMetaChange(): void;
     handlePaginationSizeChange(): void;
@@ -794,10 +860,13 @@ export default class CxTable extends CortexElement {
     handleDataUrlChange(): void;
     private handleTableExport;
     private handleDropdownFilterChange;
+    private handleTableGroupByChange;
+    private handleSelectAllChange;
     private streamCsvData;
     private streamJsonData;
     private streamXmlData;
     private loadFromDataUrl;
+    private handleTabulatorAjaxResponse;
     render(): TemplateResult;
 }
 declare global {

package/library/packages/events/src/cx-table-dropdown-filter-change.d.ts

@@ -1,4 +1,4 @@
-import { TableDropdownFilterDataOption } from '../../types/src/table';
+import { TableDropdownFilterDataOption } from '../../types/src/table-toolbar';
 
 export type CxTableDropdownFilterChangeEvent = CustomEvent<{
     data: {

package/library/packages/events/src/cx-table-export.d.ts

@@ -1,7 +1,7 @@
 export type CxTableExportEvent = CustomEvent<{
     data?: unknown[];
     searchValue?: string;
-    type: 'csv' | 'xml' | 'custom' | 'report';
+    type: 'csv' | 'xml' | 'custom' | 'report' | 'pdf';
 }>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/library/packages/events/src/cx-table-group-by-change.d.ts

@@ -0,0 +1,8 @@
+export type CxTableGroupByChangeEvent = CustomEvent<{
+    id: string | null;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-group-by-change': CxTableGroupByChangeEvent;
+    }
+}

package/library/packages/events/src/cx-table-select-all-change.d.ts

@@ -0,0 +1,8 @@
+export type CxTableSelectAllChangeEvent = CustomEvent<{
+    checked: boolean;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-select-all-change': CxTableSelectAllChangeEvent;
+    }
+}

package/library/packages/events/src/events.d.ts

@@ -179,8 +179,10 @@ export * from './cx-table-advanced-search-click';
 export * from './cx-table-data-load';
 export * from './cx-table-dropdown-filter-change';
 export * from './cx-table-export';
+export * from './cx-table-group-by-change';
 export * from './cx-table-row-action-click';
 export * from './cx-table-save-search-select';
+export * from './cx-table-select-all-change';
 export * from './cx-table-switch-change';
 export * from './cx-table-validation-change';
 export * from './cx-time-based-change';

package/library/packages/hybrid/table-core/src/tabulator-tables/core/TabulatorFull.d.ts

@@ -12,7 +12,7 @@ declare class TabulatorFull extends Tabulator implements ITabulatorFull {
     /**
      * You can use the setGroupBy function to change the fields that rows are grouped by. This function has one argument and takes the same values as passed to the groupBy setup option.
      */
-    setGroupBy: (groups: GroupArg) => void;
+    setGroupBy: (groups: GroupArg | false) => void;
     /**
      * You can use the setGroupHeader function to change the header generation function for each group. This function has one argument and takes the same values as passed to the groupHeader setup option.
      */

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/Format/defaults/formatters/avatar.d.ts

@@ -0,0 +1,5 @@
+import { AvatarFormatterParams } from '../../../../../../../../types/src/table';
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+export default function avatar(this: Format, cell: CellComponent, formatterParams: AvatarFormatterParams): HTMLElement | string;