@orangelogic/design-system 2.127.0 → 2.128.0

package/library/package.json

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

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

@@ -119,6 +119,7 @@ export default class CxDrawer extends CortexElement {
     private removeOpenListeners;
     private resetMultipleMenus;
     private handleDocumentKeyDown;
+    private handleDocumentPointerDown;
     handleOpenChange(): Promise<void>;
     handleNoModalChange(): void;
     /** Shows the drawer. */

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

@@ -87,6 +87,10 @@ export default class CxVideo extends ResizableElement {
      * Determines if the volume panel should be disabled.
      */
     disableVolumePanel: boolean;
+    /**
+     * Determines if the big play button overlay should be hidden.
+     */
+    hideBigPlayButton: boolean;
     isLoaded: boolean;
     isPlaying: boolean;
     isError: boolean;
@@ -131,6 +135,7 @@ export default class CxVideo extends ResizableElement {
     protected addVideoEventListeners(): void;
     protected removeVideoEventListeners(): void;
     attachSeekbar(): void;
+    private applyBigPlayButtonVisibility;
     protected setupVideoJsPlayer(src?: string): Promise<void>;
     handleLoopChange(): Promise<void>;
     handleMutedChange(): Promise<void>;
@@ -138,6 +143,7 @@ export default class CxVideo extends ResizableElement {
     handleDisablePictureInPictureChange(): Promise<void>;
     handleDisableRemotePlaybackChange(): Promise<void>;
     handleDisableVolumePanelChange(): Promise<void>;
+    handleHideBigPlayButtonChange(): Promise<void>;
     handlePosterChange(): Promise<void>;
     handleFormattedPosterChange(): Promise<void>;
     handleSrcChange(): Promise<void>;

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

@@ -0,0 +1,10 @@
+export type CxTableSwitchChangeEvent = CustomEvent<{
+    checked: boolean;
+    data: Record<string, unknown>;
+    field: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-switch-change': CxTableSwitchChangeEvent;
+    }
+}

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

@@ -182,6 +182,7 @@ export * from './cx-table-dropdown-filter-change';
 export * from './cx-table-export';
 export * from './cx-table-row-action-click';
 export * from './cx-table-save-search-select';
+export * from './cx-table-switch-change';
 export * from './cx-time-based-change';
 export * from './cx-timeline-data-resolved';
 export * from './cx-time-update';

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

@@ -0,0 +1,3 @@
+import { ICellComponent, SwitchFormatterParams } from '../../../../../../../../types/src/table';
+
+export default function (cell: ICellComponent, formatterParams: SwitchFormatterParams): HTMLElement;

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

@@ -1 +1,13 @@
+/**
+ * @deprecated Prefer the `switch` formatter over `toggle`.
+ *
+ * This is a legacy pill-style toggle built from plain `<div>`s and ad-hoc CSS.
+ * For new columns use `formatter: 'switch'`, which renders the design-system
+ * `cx-switch` atom (consistent focus/disabled/size states) and emits the typed
+ * `cx-table-switch-change` event.
+ *
+ * To adjust switch behavior/appearance, edit the switch formatter at
+ * `../formatters/switch.ts` (and the `cx-switch` atom under
+ * `packages/atoms/src/components/switch/`), NOT this file.
+ */
 export default function (this: any, cell: any, formatterParams: any, _onRendered: (callback: () => void) => void): HTMLElement;

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

@@ -20,6 +20,7 @@ import { default as plaintext } from './formatters/plaintext';
 import { default as progress } from './formatters/progress';
 import { default as rownum } from './formatters/rownum';
 import { default as star } from './formatters/star';
+import { default as switchFormatter } from './formatters/switch';
 import { default as tag } from './formatters/tag';
 import { default as textarea } from './formatters/textarea';
 import { default as tickCross } from './formatters/tickCross';
@@ -51,6 +52,7 @@ declare const defaultFormatters: {
     progress: typeof progress;
     rownum: typeof rownum;
     star: typeof star;
+    switch: typeof switchFormatter;
     tag: typeof tag;
     textarea: typeof textarea;
     tickCross: typeof tickCross;

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

@@ -30,6 +30,7 @@ export default class CxFolderSelectTree extends CortexElement {
     api?: FolderSelectApi;
     excludeVirtualFolders: boolean;
     firstFetchCallback: ((data: Folder[]) => void) | null;
+    autoPageSize: boolean;
     data: Folder[];
     hasMore: boolean;
     loading: boolean;
@@ -56,6 +57,7 @@ export default class CxFolderSelectTree extends CortexElement {
      * This is used to render the cx-tree inside the cx-folder-select without the shadow root so that the cx-folder-select can query select the cx-tree inside
      */
     createRenderRoot(): this;
+    private computeInitialLimit;
     runFirstUpdated(): void;
     handleExtraFolderIdChange(): Promise<void>;
     /**

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

@@ -39,6 +39,7 @@ export default class CxFolderSelect extends CortexElement {
     extraFolderId: string;
     extraFolderTitle: string;
     extraFolderIcon: string;
+    autoPageSize: boolean;
     firstFetchCallback: ((data: Folder[]) => void) | null;
     searchTerm: string;
     constructor();

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

@@ -0,0 +1,6 @@
+export declare const defaultAnnotationState: {
+    height: number;
+    markers: never[];
+    version: number;
+    width: number;
+};

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

@@ -0,0 +1,82 @@
+import { AnnotationState } from '@markerjs/markerjs3';
+import { CxTimeBasedChangeEvent } from '../../../events/src/cx-time-based-change';
+import { default as CxComment } from '../comment/comment.ts';
+import { TimecodeMode } from '../../../types/src/video-editor';
+import { default as CxAnnotatorCommentMenu } from './components/annotator-comment-menu';
+
+export type CxCommentSubmitEvent = CustomEvent<Record<string, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-comment-submit': CxCommentSubmitEvent;
+    }
+}
+/**
+ * @summary CxAnnotatorComment - An extension of the CxComment component that allows users to annotate a specific element.
+ */
+export default class CxAnnotatorComment extends CxComment {
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-annotator-comment-menu': typeof CxAnnotatorCommentMenu;
+        'cx-comment-menu': typeof import('../comment/components/comment-menu/comment-menu').default;
+        'cx-dialog': typeof import('../../../atoms/src/index.ts').CxDialog;
+        'cx-mentions': typeof import('../../../molecules/src/index.ts').CxMentions;
+        'cx-popup': typeof import('../../../atoms/src/index.ts').CxPopup;
+        'cx-space': typeof import('../../../atoms/src/index.ts').CxSpace;
+        'cx-timecode': typeof import('../../../atoms/src/index.ts').CxTimecode;
+    };
+    private readonly markerController;
+    commentMenu: CxAnnotatorCommentMenu;
+    /**
+     * The element to annotate. The marker are component `mjs-marker-area` will be
+     * instantiated inside the element and also matches its dimensions.
+     */
+    annotationEl: HTMLElement;
+    /**
+     * The annotation state data to be displayed in the annotator.
+     */
+    set annotationState(value: AnnotationState | null);
+    get annotationState(): AnnotationState;
+    /**
+     * Whether the time based button should be shown in the comment menu.
+     */
+    canUseTimeBased: boolean;
+    /**
+     * When true, hides the time based icon button in the comment menu while
+     * still allowing the time based feature to function (e.g. `timeBased`
+     * state is still respected). Useful when the parent wants to enable the
+     * feature without exposing the toggle button to end users.
+     */
+    hideTimeBasedIcon: boolean;
+    /**
+     * Whether the annotation (draw) tool is available in the comment menu.
+     */
+    canAnnotate: boolean;
+    /**
+     * Whether the time based feature is enabled.
+     */
+    timeBased: boolean;
+    /**
+     * The time values for the time based feature.
+     */
+    time: number[];
+    /**
+     * The timecode mode for the time based feature.
+     */
+    timecodeMode: TimecodeMode;
+    /**
+     * The frame rate for the time based feature.
+     */
+    frameRate: number;
+    runFirstUpdated(): void;
+    handleTimeChange(): void;
+    handleTimeBasedChange(event: CxTimeBasedChangeEvent): void;
+    private get timecodeExtension();
+    private handleUndoRequest;
+    private handleRedoRequest;
+    protected renderMenu(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-annotator-comment': CxAnnotatorComment;
+    }
+}

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

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -0,0 +1,69 @@
+import { AnnotationState } from '@markerjs/markerjs3';
+import { default as CxAnnotator } from '../../../../molecules/src/annotator/annotator.ts';
+import { default as CxCommentMenu } from '../../comment/components/comment-menu/comment-menu';
+
+/**
+ * @summary CxAnnotatorCommentMenu - An extension of the CxCommentMenu component that adds annotation tools alongside text formatting.
+ */
+export default class CxAnnotatorCommentMenu extends CxCommentMenu {
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-annotator': typeof CxAnnotator;
+        'cx-button': typeof import('../../../../atoms/src/index.ts').CxButton;
+        'cx-card': typeof import('../../../../atoms/src/index.ts').CxCard;
+        'cx-icon-button': typeof import('../../../../atoms/src/index.ts').CxIconButton;
+        'cx-input': typeof import('../../../../atoms/src/index.ts').CxInput;
+        'cx-popup': typeof import('../../../../atoms/src/index.ts').CxPopup;
+        'cx-space': typeof import('../../../../atoms/src/index.ts').CxSpace;
+        'cx-tooltip': typeof import('../../../../atoms/src/index.ts').CxTooltip;
+    };
+    annotator: CxAnnotator;
+    /**
+     * The element to annotate. The marker are component `mjs-marker-area` will be
+     * instantiated inside the element and also matches its dimensions.
+     */
+    annotationEl: HTMLElement;
+    /**
+     * Whether the time based button should be shown in the comment menu.
+     */
+    canUseTimeBased: boolean;
+    /**
+     * When true, hides the time based icon button in the menu while still
+     * allowing the time based feature to function (e.g. `timeBased` state
+     * is still respected and `cx-time-based-change` events can still be
+     * emitted programmatically). Set this when the host component wants to
+     * expose the time based feature without showing the toggle button.
+     */
+    hideTimeBasedIcon: boolean;
+    /**
+     * Whether the annotation (draw) toggle is shown in the menu.
+     */
+    canAnnotate: boolean;
+    /**
+     * Whether the time based feature is enabled.
+     */
+    timeBased: boolean;
+    /**
+     * The annotation state data to be displayed in the annotator.
+     */
+    set annotationState(value: AnnotationState | null);
+    get annotationState(): AnnotationState;
+    private _annotationState;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleAnnotationButtonClick;
+    private handleBackButtonClick;
+    private handleMarkerAreaStateChange;
+    private syncAnnotatorState;
+    protected handleTimeBasedClick(): void;
+    protected renderLeftMenu(): import('lit').TemplateResult<1>;
+    private renderBackButton;
+    renderRightActions(): import('lit').TemplateResult<1>;
+    renderRightMenu(): import('lit').TemplateResult<1>;
+    private renderAnnotationMenu;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-annotator-comment-menu': CxAnnotatorCommentMenu;
+    }
+}

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

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -0,0 +1,45 @@
+import { Extension } from '@tiptap/core';
+
+export interface HistoryOptions {
+    /**
+     * The amount of history events that are collected before the oldest events are discarded.
+     * @default 100
+     * @example 50
+     */
+    depth: number;
+    /**
+     * The delay (in milliseconds) between changes after which a new group should be started.
+     * @default 500
+     * @example 1000
+     */
+    newGroupDelay: number;
+    onEventRedo?: () => void;
+    onEventStart?: () => void;
+    onEventUndo?: () => void;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        history: {
+            /**
+             * Reapply reverted changes
+             * @example editor.commands.redo()
+             */
+            redo: () => ReturnType;
+            /**
+             * Undo recent changes
+             * @example editor.commands.undo()
+             */
+            undo: () => ReturnType;
+        };
+    }
+}
+/**
+ * This extension allows you to undo and redo recent changes.
+ * @see https://www.tiptap.dev/api/extensions/history
+ *
+ * **Important**: If the `@tiptap/extension-collaboration` package is used, make sure to remove
+ * the `history` extension, as it is not compatible with the `collaboration` extension.
+ *
+ * `@tiptap/extension-collaboration` uses its own history implementation.
+ */
+export declare const History: Extension<HistoryOptions, any>;

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

@@ -0,0 +1,7 @@
+import { Extension } from '@tiptap/core';
+import { default as CxAnnotatorComment } from '../annotator-comment';
+
+export interface AnnotatorKeyboardOptions {
+    host: CxAnnotatorComment;
+}
+export declare const AnnotatorKeyboard: Extension<AnnotatorKeyboardOptions, any>;

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

@@ -0,0 +1,19 @@
+import { Command, EditorState, Plugin, Transaction } from 'prosemirror-state';
+
+export declare function closeHistory(tr: Transaction): Transaction;
+interface HistoryOptions {
+    depth?: number;
+    newGroupDelay?: number;
+    onEventRedo?: () => void;
+    onEventStart?: () => void;
+    onEventUndo?: () => void;
+}
+export declare function history(config?: HistoryOptions): Plugin;
+export declare const undo: Command;
+export declare const redo: Command;
+export declare const undoNoScroll: Command;
+export declare const redoNoScroll: Command;
+export declare function undoDepth(state: EditorState): any;
+export declare function redoDepth(state: EditorState): any;
+export declare function isHistoryTransaction(tr: Transaction): boolean;
+export {};

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

@@ -0,0 +1,63 @@
+import { Extension } from '@tiptap/core';
+import { PluginKey } from '@tiptap/pm/state';
+import { TimecodeMode } from '../../../../types/src/video-editor';
+
+export interface TimeOptions {
+    /**
+     * The HTML attributes for the time widget.
+     * @default {}
+     */
+    HTMLAttributes: Record<string, string>;
+    /**
+     * The frame rate for the time based feature.
+     * @default 24
+     */
+    frameRate: number;
+    /**
+     * The placeholder text for the time based feature.
+     * @default 'Enter a message...'
+     */
+    placeholder: string;
+    /**
+     * The time values (in seconds) for the time based feature.
+     * Can be a single value or a range [start, end].
+     * @default []
+     */
+    time: number[];
+    /**
+     * The timecode mode for the time based feature.
+     * @default TimecodeMode.Standard
+     */
+    timecodeMode: TimecodeMode;
+}
+export interface TimeStorage {
+    frameRate: number;
+    placeholder: string;
+    time: number[];
+    timecodeMode: TimecodeMode;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        time: {
+            /**
+             * Update the time decoration with new values.
+             */
+            setTime: (options: {
+                frameRate?: number;
+                placeholder?: string;
+                time?: number[];
+                timecodeMode?: TimecodeMode;
+            }) => ReturnType;
+        };
+    }
+}
+/**
+ * The plugin key for the time decoration plugin.
+ */
+export declare const TimePluginKey: PluginKey<any>;
+/**
+ * This extension adds a node decoration widget at the start of the document
+ * displaying the time using cx-timecode component.
+ */
+export declare const Time: Extension<TimeOptions, TimeStorage>;
+export default Time;

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

@@ -0,0 +1,45 @@
+import { AnnotationState } from '@markerjs/markerjs3';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { default as CxAnnotatorComment } from './annotator-comment';
+
+/**
+ * A reactive controller to manage marker state synchronization and event handling
+ * for the annotator-comment component.
+ */
+export declare class MarkerController implements ReactiveController {
+    private readonly host;
+    _annotationState: AnnotationState;
+    canUndo: boolean;
+    canRedo: boolean;
+    private readonly undoStack;
+    private redoStack;
+    private pendingTiptapHistory;
+    private isUndoRedoInProgress;
+    constructor(host: ReactiveControllerHost & CxAnnotatorComment);
+    get annotationState(): AnnotationState;
+    setAnnotationState(value: AnnotationState | null): void;
+    hostUpdated(): void;
+    private handleMarkerAreaStateChange;
+    pushHistory(source: 'marker' | 'tiptap'): void;
+    undo(): boolean;
+    redo(): boolean;
+    private undoMarker;
+    private redoMarker;
+    private handleMarkerChange;
+    private handleMarkerCreate;
+    private handleMarkerDelete;
+    /**
+     * Get event handlers for marker-related events
+     */
+    getMarkerEventHandlers(): {
+        'cx-marker-area-state-change': () => void;
+        'cx-marker-change': () => void;
+        'cx-marker-create': () => void;
+        'cx-marker-delete': () => void;
+    };
+    /**
+     * Get the history extension for Tiptap that handles unified undo/redo
+     * for both Tiptap and Marker history
+     */
+    get historyExtension(): import('@tiptap/core').Extension<import('./extensions/history').HistoryOptions, any>;
+}

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

@@ -1,3 +1,4 @@
+export { default as CxAnnotatorComment } from './annotator-comment/annotator-comment';
 export { default as CxAssetLinkFormat } from './asset-link-format/asset-link-format';
 export { default as CxAssetTransformationDialog } from './asset-transformation-dialog/asset-transformation-dialog';
 export { default as CxDashboardFilter } from './dashboard-filter/dashboard-filter';

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

@@ -4,7 +4,7 @@ export declare enum FolderSelectVariant {
 }
 export type Folder = {
     docType: string;
-    fullPath: string;
+    fullPath?: string;
     hasChildren: boolean;
     id: string;
     isShared?: boolean;

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

@@ -2307,8 +2307,8 @@ export type ColumnCalc = 'avg' | 'max' | 'min' | 'sum' | 'concat' | 'count' | 'u
 export type ColumnCalcParams = {
     precision: number;
 } | ((values: any, data: any) => any);
-export type Formatter = 'plaintext' | 'textarea' | 'html' | 'money' | 'image' | 'datetime' | 'datetimediff' | 'link' | 'tickCross' | 'color' | 'star' | 'traffic' | 'progress' | 'lookup' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'toggle' | 'time' | 'diff' | ((cell: ICellComponent, formatterParams: Record<string, unknown>, onRendered: EmptyCallback) => string | HTMLElement);
-export type FormatterParams = MoneyParams | ImageParams | LinkParams | DateTimeParams | DateTimeDifferenceParams | TickCrossParams | TrafficParams | ProgressBarParams | StarRatingParams | RowSelectionParams | JSONRecord | ToggleSwitchParams | TimeFormatterParams | ((cell: ICellComponent) => Record<string, unknown>);
+export type Formatter = 'plaintext' | 'textarea' | 'html' | 'money' | 'image' | 'datetime' | 'datetimediff' | 'link' | 'tickCross' | 'color' | 'star' | 'traffic' | 'progress' | 'lookup' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'toggle' | 'switch' | 'time' | 'diff' | ((cell: ICellComponent, formatterParams: Record<string, unknown>, onRendered: EmptyCallback) => string | HTMLElement);
+export type FormatterParams = MoneyParams | ImageParams | LinkParams | DateTimeParams | DateTimeDifferenceParams | TickCrossParams | TrafficParams | ProgressBarParams | StarRatingParams | RowSelectionParams | JSONRecord | ToggleSwitchParams | SwitchFormatterParams | TimeFormatterParams | ((cell: ICellComponent) => Record<string, unknown>);
 export type TextFormatParams = {
     getColor?: (cell: any) => string;
     colorMap?: Record<any, string>;
@@ -2387,6 +2387,12 @@ export interface ToggleSwitchParams {
     offColor?: string;
     clickable?: boolean;
 }
+export interface SwitchFormatterParams {
+    size?: 'small' | 'medium' | 'large';
+    onValue?: string | number | boolean;
+    offValue?: string | number | boolean;
+    disabled?: (cell: ICellComponent) => boolean;
+}
 export interface SharedEditorParams {
     elementAttributes?: JSONRecord;
     /**