@orangelogic/design-system 2.139.0 → 2.141.0

package/library/package.json

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

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

@@ -110,6 +110,11 @@ export default class CxAudio extends ResizableElement {
     private audioSrc;
     /** Whether autoplay is deferred until the in-point seek completes after durationchange. */
     private pendingAutoplay;
+    /**
+     * Resolved filename override (e.g. an asset title fetched by subclasses). Falls back
+     * to `name` in the footer display when empty, without touching the `name` property.
+     */
+    protected resolvedName: string;
     private get clampedInPoint();
     runConnectedCallback(): void;
     disconnectedCallback(): void;

package/library/packages/atoms/src/components/line-clamp/line-clamp.d.ts

@@ -33,6 +33,11 @@ export default class CxLineClamp extends CortexElement {
      * The tooltip to show. When this prop is set, the component will always show a tooltip.
      */
     tooltip: string;
+    /**
+     * Consumer-provided tooltip text, shown only when the content is clamped. Overrides the
+     * auto-derived (scraped) text; leave empty ('') to fall back to it.
+     */
+    clampedTooltip: string;
     disabledTooltip: boolean;
     disabledHoverBridge: boolean;
     /** The flip boundary for the tooltip. */
@@ -81,6 +86,7 @@ export default class CxLineClamp extends CortexElement {
     isTextClamped(element: Element): boolean;
     handleResize(): void;
     toggleShowingMore(): void;
+    private get resolvedTooltipContent();
     render(): TemplateResult<1>;
 }
 declare global {

package/library/packages/events/src/cx-annotator-tool-change.d.ts

@@ -0,0 +1,11 @@
+import { AnnotatorTool } from '../../types/src/annotator';
+
+export type CxAnnotatorToolChangeEvent = CustomEvent<{
+    active: boolean;
+    tool: AnnotatorTool;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-annotator-tool-change': CxAnnotatorToolChangeEvent;
+    }
+}

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

@@ -10,6 +10,7 @@ export * from './cx-after-collapse';
 export * from './cx-after-expand';
 export * from './cx-after-hide';
 export * from './cx-after-show';
+export * from './cx-annotator-tool-change';
 export * from './cx-asset-data-display-slot-change';
 export * from './cx-asset-format-picker-select';
 export * from './cx-asset-picker-delete';

package/library/packages/hybrid/book-reader/src/react/constant.d.ts

@@ -18,6 +18,7 @@ export declare const IMAGES_LOAD_OFFSET = 15;
 export declare const MAX_STORED_PAGES = 10;
 export declare const MAX_CANVAS_SCALE = 2;
 export declare const MIN_CANVAS_SCALE = 1;
+export declare const MAX_CANVAS_PIXELS: number;
 export declare const SPECIAL_SCALE_OPTION: {
     ACTUAL_SIZE: string;
     PAGE_FIT: string;
@@ -28,6 +29,7 @@ export declare const CORTEX_VIEW_MODE_MAP: {
 };
 export declare const DEBOUNCE_TIME = 300;
 export declare const THROTTLE_TIME = 700;
+export declare const SCALE_RENDER_DEBOUNCE_TIME = 250;
 export declare const SCALE_OPTIONS: {
     label: string;
     value: number;

package/library/packages/hybrid/book-reader/src/react/types.d.ts

@@ -113,7 +113,7 @@ export type TextItem = {
     width: number;
 };
 export type PageView = {
-    imageData?: ImageData | null;
+    bitmap?: ImageBitmap | null;
     isRendering?: boolean;
     loading: boolean;
     page: PDFPageProxy | null;
@@ -131,7 +131,7 @@ export type BookContext = {
         [key: number]: PageView;
     };
     requestPDFPageProxy: (pageNumbers: number[]) => void;
-    requestRenderPDFPage: (pageNumber: number) => Promise<null | ImageData | undefined>;
+    requestRenderPDFPage: (pageNumber: number) => Promise<null | ImageBitmap | undefined>;
 } | null;
 export declare enum BookReaderMode {
     IMAGE = "Image",

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

@@ -24,14 +24,13 @@ 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.
+ * @slot add-action - Replaces the default add button. When empty the default add button (controlled by `can-add`) is rendered unchanged.
+ * @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. Set `has-dynamic-filter` when slotting content here directly, so the actions row is rendered to receive it.
  *
  * @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.
  * @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 [--header-pagination-min-height=var(--cx-input-height-medium)] - Reserved height for the label/pagination row when pagination is enabled.
  */
 export default class CxTableToolbar extends CortexElement {
     static readonly styles: CSSResultGroup;
@@ -154,6 +153,18 @@ export default class CxTableToolbar extends CortexElement {
      * height when pagination moves between `top-*`/`bottom-*` placements.
      */
     pagination: boolean;
+    /**
+     * When true, an empty header row collapses instead of reserving space.
+     * Ignored while the header has a label or a top-placed paginator — real
+     * content always keeps the row visible.
+     */
+    noHeaderRowReserve: boolean;
+    /**
+     * Set by cx-table when a dynamic (faceted) filter is slotted into
+     * `dialog-dynamic-filter`. A reactive property (not slot detection) so the
+     * actions row reliably renders when facets load asynchronously.
+     */
+    hasDynamicFilter: boolean;
     private renderSelectAll;
     private handleSearchSubmit;
     private handleAdvancedSearchClick;
@@ -170,7 +181,16 @@ export default class CxTableToolbar extends CortexElement {
     private renderGroupByDropdown;
     private renderExportDropdown;
     private renderDropdownFilters;
-    private renderPagination;
+    private renderHeaderRow;
+    /**
+     * Whether the actions row has anything to show. When false the row is not
+     * rendered, so its inter-row gap does not add empty space below the header
+     * (e.g. a pagination-only table). Driven entirely by reactive properties.
+     */
+    private get hasHeaderActions();
+    /** True when either the default add button or a custom `add-action` slot should render. */
+    get hasAddAction(): boolean;
+    private renderHeaderActions;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -63,7 +63,7 @@ import { CxTableFooter, CxTableRowActions, CxTableToolbar } from './components';
  * @cssproperty [--table-active-cell-border-color=var(--cx-color-neutral-200)] - The border color of the active/hover range overlay cell outline.
  * @cssproperty [--table-selected-cell-border-width=1px] - The border width of the active selected cell.
  * @cssproperty [--table-selected-cell-border-style=solid] - The border style of the active selected cell.
- * @cssproperty [--header-pagination-min-height=var(--cx-input-height-medium)] - Reserved height for the toolbar's label/pagination row (`cx-table-toolbar`) when `pagination` is enabled, regardless of `pagination-placement`. Set to `0` to remove the reservation.
+ * @slot add-action - Passed through to `cx-table-toolbar`'s `add-action` slot. Replaces the default add button when provided; when empty the toolbar's default add button (controlled by `can-add`) is rendered unchanged.
  *
  * @event {{ args: any[] }} cx-table.[event_name] - Emitted when the event with such name is emitted on the table.
  * Must register the event listener on the table element to receive the event.
@@ -76,6 +76,7 @@ export default class CxTable extends CortexElement {
     #private;
     static readonly styles: CSSResultGroup;
     private readonly localize;
+    private readonly hasSlotController;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
         'cx-checkbox': typeof CxCheckbox;
@@ -676,6 +677,14 @@ export default class CxTable extends CortexElement {
      * Where to place the pagination control relative to the table.
      */
     paginationPlacement: PaginationPlacement;
+    /**
+     * When true, the toolbar does not reserve an empty header row. A label or a
+     * top-placed paginator still shows (content always wins) — this only removes
+     * the reserved blank space, letting the table sit flush. Useful when the host
+     * renders its own header/label outside the table (e.g. a bottom-paginated
+     * table).
+     */
+    noHeaderRowReserve: boolean;
     /**
      * The hover menu options.
      */
@@ -772,6 +781,12 @@ export default class CxTable extends CortexElement {
     dateFilterCompareFormat: DateFilterCompareFormat;
     /** Format of the data at dataUrl. Use 'auto' to detect from URL extension or Content-Type header. */
     dataFormat: TableDataFormat;
+    /**
+     * When true, a `dataUrl` load keeps existing `columns` as-is instead of auto-populating them
+     * from the loaded file's headers. Has no effect when `columns` is empty — auto-detection still
+     * applies so the table has something to render.
+     */
+    preserveColumnsOnLoad: boolean;
     tabulatorInstance: Tabulator | null;
     /**
      * In case the table is re-initialized, we need to re-register the event listeners.
@@ -787,6 +802,15 @@ export default class CxTable extends CortexElement {
     get searchValue(): string;
     get isBottomPlacement(): boolean;
     get showPaginationFooter(): boolean;
+    /**
+     * Whether pagination alone should render the toolbar. A top-placed paginator
+     * sits in the toolbar header row, and by default the empty header row is
+     * reserved. A bottom paginator lives in the footer, so once that reserve is
+     * opted out via `no-header-row-reserve` there is no reason to render it.
+     */
+    private get paginationNeedsToolbar();
+    /** True when either the default add button or a custom `add-action` slot should render. */
+    get hasAddAction(): 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;
@@ -862,11 +886,19 @@ export default class CxTable extends CortexElement {
     private handleDropdownFilterChange;
     private handleTableGroupByChange;
     private handleSelectAllChange;
+    /**
+     * Controlled by `preserveColumnsOnLoad`: when enabled and the consumer already defined
+     * `columns` (e.g. a custom column with its own `mutator`), a `dataUrl` load keeps them as-is.
+     * Otherwise columns are auto-detected from the loaded data's headers, same as before.
+     */
+    private resolveColumnsAfterLoad;
     private streamCsvData;
     private streamJsonData;
     private streamXmlData;
     private loadFromDataUrl;
     private handleTabulatorAjaxResponse;
+    private renderToolbar;
+    private renderPaginationFooter;
     render(): TemplateResult;
 }
 declare global {

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

@@ -29,6 +29,8 @@ export default class Validate extends Module {
      * row/column (detached mocks) key by the cell itself.
      */
     private readonly invalidState;
+    /** Columns declaring `mutateOnValidate` — re-mutated whenever the row's validation state changes. */
+    private readonly mutateOnValidateColumns;
     get invalidCells(): Cell[];
     set invalidCells(cells: Cell[]);
     /**
@@ -60,6 +62,8 @@ export default class Validate extends Module {
     dataProcessed(): void;
     cellIsValid(cell: Cell): boolean;
     cellValidate(cell: Cell): CellValidationFailure[] | boolean;
+    /** Current validation failures for this cell — empty when the cell is valid or unvalidated. */
+    getCellValidationErrors(cell: Cell): CellValidationFailure[];
     columnValidate(column: Column): ICellComponent[] | boolean;
     rowValidate(row: Row): ICellComponent[] | boolean;
     userClearCellValidation(cells?: ICellComponent | ICellComponent[]): void;
@@ -80,6 +84,12 @@ export default class Validate extends Module {
     validate(validators: ValidatorConfig[] | false | undefined, cell: Cell, value: unknown): CellValidationFailure[] | boolean;
     getInvalidCells(): ICellComponent[];
     clearValidation(cell: Cell): void;
+    /**
+     * Forces every `mutateOnValidate` column to re-run its mutator (and re-render) for this row —
+     * called after this row's validation state changes, so a column aggregating row-level errors
+     * (e.g. via `getValidationErrors()` on sibling cells) stays in sync. No-op when no column opts in.
+     */
+    private refreshMutateOnValidateColumns;
     private rowKeyOf;
     private columnKeyOf;
     private getInvalidRecord;

package/library/packages/molecules/src/annotator/annotator.d.ts

@@ -8,6 +8,8 @@ import { default as CxAnnotatorLineWeight } from './components/annotator-line-we
 
 /**
  * @summary CxAnnotator - A component that allows users to annotate a specific element.
+ *
+ * @event {{ active: boolean; tool: AnnotatorTool }} cx-annotator-tool-change - Fired when a drawing tool is selected (`active: true`) or the active tool icon is clicked again to return to select mode (`active: false`). `tool` is the `AnnotatorTool` value (`arrow-marker`, `line-marker`, `rectangle-marker`, `freehand-marker`).
  */
 export default class CxAnnotator extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/molecules/src/index.d.ts

@@ -25,6 +25,7 @@ export { default as CxGraphView } from './graph-view/graph-view';
 export { default as CxIconPicker } from './icon-picker/icon-picker';
 export { default as CxMasonry } from './masonry/masonry';
 export { default as CxMentions } from './mentions/mentions';
+export { default as CxMultiSelect } from './multi-select/multi-select';
 export { default as CxPaddingInputGroup } from './padding-input-group/padding-input-group';
 export { default as CxPageOutline } from './page-outline/page-outline';
 export { default as CxPdfViewerToolbar } from './pdf-viewer-toolbar/pdf-viewer-toolbar';

package/library/packages/organisms/src/annotator-comment/annotator-comment.d.ts

@@ -12,6 +12,8 @@ declare global {
 }
 /**
  * @summary CxAnnotatorComment - An extension of the CxComment component that allows users to annotate a specific element.
+ *
+ * @event {{ active: boolean; tool: AnnotatorTool }} cx-annotator-tool-change - Emitted via the inner `cx-annotator` when a drawing tool is selected (`active: true`) or the active tool icon is clicked again to return to select mode (`active: false`). `tool` is the `AnnotatorTool` value (`arrow-marker`, `line-marker`, `rectangle-marker`, `freehand-marker`). Bubbles and composed.
  */
 export default class CxAnnotatorComment extends CxComment {
     static readonly styles: import('lit').CSSResult[];

package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts

@@ -248,6 +248,15 @@ export default class CxAssetLinkFormat extends CortexElement {
             width: number;
         };
     };
+    /**
+     * Returns the last applied rotation value. Without an asset, rotation applies replace
+     * (dedupe) a single Rotate entry, so this reflects the exact committed value — used to
+     * know when the rotation panel has no pending change to apply, and to restore this value
+     * when the panel is closed without applying. With an asset, rotation applies are
+     * cumulative deltas reprocessed by the backend, so there is no single "last applied"
+     * value and this always returns 0.
+     */
+    get lastRotation(): number;
     /**
      * Returns the transformation string for the asset link.
      */

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-crop/asset-link-format-crop.d.ts

@@ -106,10 +106,6 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
      * Whether the apply button is disabled.
      */
     disabledApply: boolean;
-    /**
-     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
-     */
-    canApply: boolean;
     /**
      * The last applied crop settings for each unit.
      * This is used to restore the last applied settings when the component is closed.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-quality/asset-link-format-quality.d.ts

@@ -48,10 +48,6 @@ export default class CxAssetLinkFormatQuality extends CortexElement {
      * @default false
      */
     loading: boolean;
-    /**
-     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
-     */
-    canApply: boolean;
     scopedValue: number;
     /**
      * A computed property that checks if the current quality value is invalid.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-resize/asset-link-format-resize.d.ts

@@ -104,10 +104,6 @@ export default class CxAssetLinkFormatResize extends CortexElement {
      * @default false
      */
     loading: boolean;
-    /**
-     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
-     */
-    canApply: boolean;
     /**
      * Whether to keep the aspect ratio when changing width or height.
      * This is used to automatically adjust the other dimension when one is changed.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-rotation/asset-link-format-rotation.d.ts

@@ -57,9 +57,12 @@ export default class CxAssetLinkFormatRotation extends CortexElement {
      */
     loading: boolean;
     /**
-     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
+     * The last applied rotation value. Used to know when there is no pending change to apply
+     * (instead of assuming 0 always means "unchanged"), and to restore this value when the
+     * details section is closed without applying.
+     * @default 0
      */
-    canApply: boolean;
+    lastAppliedValue: number;
     handleOpenChange(): void;
     private handleRotationChange;
     private handleButtonClick;

package/library/packages/organisms/src/index.d.ts

@@ -19,7 +19,6 @@ export { default as CxFileOnDemand } from './file-on-demand/file-on-demand';
 export { default as CxFindAndReplace } from './find-and-replace/find-and-replace';
 export { default as CxLightbox } from './lightbox/lightbox';
 export { default as CxListEditor } from './list-editor/list-editor';
-export { default as CxMultiSelect } from './multi-select/multi-select';
 export { default as CxSpecialCharactersDialog } from './special-characters-dialog/special-characters-dialog';
 export { default as CxTemplateSwitcher } from './template-switcher/template-switcher';
 export { default as CxTextToSpeech } from './text-to-speech/text-to-speech';

package/library/packages/types/src/table.d.ts

@@ -152,6 +152,7 @@ export interface ICellComponent {
     getType(): string;
     getField(): string;
     getColumn(): IColumnComponent;
+    getValidationErrors(): CellValidationFailure[];
     setValue(value: any, mutate?: boolean): void;
     restoreOldValue(): void;
     restoreInitialValue(): void;
@@ -2102,6 +2103,13 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks, Formatter
     /** only called when data is changed via a user editing a cell. */
     mutatorClipboard?: CustomMutator;
     mutatorClipboardParams?: CustomMutatorParams;
+    /**
+     * When true, this column's mutator is re-run (and the cell re-rendered) whenever any cell's
+     * validation state changes elsewhere in the same row — cell edit, `validateAsync()`/`validate()`,
+     * or `clearCellValidation()`. Use this for a column that aggregates row-level validation errors,
+     * e.g. reading sibling cells' `getValidationErrors()` inside the `mutator`.
+     */
+    mutateOnValidate?: boolean;
     /**
      * Accessors are used to alter data as it is extracted from the table, through commands, the clipboard, or download.
      *

package/library/packages/utils/src/string/string.d.ts

@@ -148,6 +148,7 @@ export declare function reducePathToDirectChild(full: string, base: string): str
 export declare function formatTimeToSeconds(timeString: string, options?: TimeFormatOptions): number;
 export declare function extractExtension(filename: string): string | null;
 export declare function sanitizeHTML(html: string): string;
+export declare function htmlToPlainText(html: string): string;
 export declare function safeString(value: any): string;
 export declare function emptyToSpace(value: any): string;
 export declare function isGalleryItemCardType(value: unknown): value is GalleryItemCardType;