@orangelogic/design-system 2.122.0 → 2.123.0

package/library/package.json

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

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

@@ -26,6 +26,8 @@ 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 [--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;
@@ -118,6 +120,11 @@ export default class CxTableToolbar extends CortexElement {
      * paginator inside this toolbar; the value drives the header alignment.
      */
     paginationPlacement: PaginationPlacement;
+    /**
+     * Whether pagination is enabled on the table. Reserves stable height for the
+     * height when pagination moves between `top-*`/`bottom-*` placements.
+     */
+    pagination: boolean;
     private handleSearchSubmit;
     private handleAdvancedSearchClick;
     private handleClearSearch;

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

@@ -58,6 +58,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.
  *
  * @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.
@@ -704,7 +705,6 @@ export default class CxTable extends CortexElement {
     get initialized(): boolean | undefined;
     get searchValue(): string;
     get isBottomPlacement(): boolean;
-    get showToolbarPagination(): boolean;
     get showPaginationFooter(): boolean;
     get showTableToolbar(): string | boolean;
     get clipboardOption(): Options['clipboard'];

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

@@ -0,0 +1,17 @@
+export declare const COLOR_OPTIONS: string[];
+export declare const LINE_WEIGHT_OPTIONS: number[];
+/**
+ * Default stroke color applied to newly created markers (arrow, freehand, line, rectangle).
+ */
+export declare const DEFAULT_STROKE_COLOR = "#FACC15";
+/**
+ * MarkerJS requires an image URL to work properly. As we annotate directly on top of a video and doesn't need image rasterization,
+ * we use a dummy image instead. Below is a 1x1 pixel fully transparent PNG image.
+ */
+export declare const PLACEHOLDER_IMAGE_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+export declare const defaultAnnotationState: {
+    height: number;
+    markers: never[];
+    version: number;
+    width: number;
+};

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

@@ -0,0 +1,88 @@
+import { AnnotationState, MarkerArea } from '@markerjs/markerjs3';
+import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
+import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxAnnotatorColor } from './components/annotator-color';
+import { default as CxAnnotatorLineWeight } from './components/annotator-line-weight';
+
+/**
+ * @summary CxAnnotator - A component that allows users to annotate a specific element.
+ */
+export default class CxAnnotator extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-annotator-color': typeof CxAnnotatorColor;
+        'cx-annotator-line-weight': typeof CxAnnotatorLineWeight;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    annotatorColor: CxAnnotatorColor;
+    annotatorLineWeight: CxAnnotatorLineWeight;
+    /**
+     * The element to annotate. The marker are component `mjs-marker-area` will be
+     * instantiated inside the element and also matches its dimensions.
+     */
+    annotationEl: HTMLElement;
+    /**
+     * List of marker type names that should continue drawing after creation.
+     * Valid values: "arrow-marker", "line-marker", "rectangle-marker", "freehand-marker".
+     * Set via HTML attribute as a space-separated string, or via JS as an array.
+     * e.g. attribute: `continuous-creation-tools="freehand-marker arrow-marker"`
+     * e.g. property: `el.continuousCreationTools = ['freehand-marker', 'arrow-marker']`
+     */
+    continuousCreationTools: string[];
+    set annotationState(value: AnnotationState | null);
+    get annotationState(): AnnotationState;
+    markerArea: MarkerArea | null;
+    color: string;
+    lineWeight: number;
+    /** Internal cache of the latest annotation state, kept in sync with the marker area. */
+    private annotationStateValue;
+    private resizeObserver;
+    get currentMarker(): import('@markerjs/markerjs3').MarkerBase | undefined;
+    get currentMarkerType(): string | undefined;
+    private get isDrawMode();
+    get state(): AnnotationState | undefined;
+    constructor();
+    runFirstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleAnnotationElChange(): void;
+    private setupResizeObserver;
+    private destroyResizeObserver;
+    private handleAnnotationElResize;
+    private destroyMarkerArea;
+    private initMarkerArea;
+    private restoreAnnotationState;
+    private handleAreaStateChange;
+    private handleMarkerAreaShow;
+    /**
+     * Creates a marker of the given type and sets the color and line weight
+     * @param markerTypeName - The type of marker to create
+     * @returns
+     */
+    private createMarker;
+    undo(): void;
+    redo(): void;
+    switchToSelectMode(): void;
+    private handleMarkerCreating;
+    private handleMarkerCreate;
+    private handleMarkerChange;
+    private handleMarkerDelete;
+    private handleKeydown;
+    private handleToolClick;
+    private handleAddArrowClick;
+    private handleLineClick;
+    private handleFreehandClick;
+    private handleRectangleClick;
+    private handleLineWeightChange;
+    private handleColorChange;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-annotator': CxAnnotator;
+    }
+}

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

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

package/library/packages/molecules/src/annotator/components/annotator-color.d.ts

@@ -0,0 +1,32 @@
+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 CxMenu } from '../../../../atoms/src/components/menu/menu.ts';
+import { default as CxMenuItem } from '../../../../atoms/src/components/menu-item/menu-item.ts';
+import { default as CxTooltip } from '../../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary CxAnnotatorColor - A component that allows users to select a color for the annotator.
+ */
+export default class CxAnnotatorColor 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;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    protected createRenderRoot(): this;
+    colors: string[];
+    value: string;
+    private handleColorSelect;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-annotator-color': CxAnnotatorColor;
+    }
+}

package/library/packages/molecules/src/annotator/components/annotator-line-weight.d.ts

@@ -0,0 +1,34 @@
+import { default as CxDropdown } from '../../../../atoms/src/components/dropdown/dropdown.ts';
+import { default as CxIconButton } from '../../../../atoms/src/components/icon-button/icon-button.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 CxSpace } from '../../../../atoms/src/components/space/space.ts';
+import { default as CxTooltip } from '../../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary CxAnnotatorLineWeight - A component that allows users to select a line weight for the annotator.
+ */
+export default class CxAnnotatorLineWeight extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-dropdown': typeof CxDropdown;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+        'cx-space': typeof CxSpace;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    lineWeightOptions: number[];
+    value: number;
+    private handleLineWeightSelect;
+    protected createRenderRoot(): this;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-annotator-line-weight': CxAnnotatorLineWeight;
+    }
+}

package/library/packages/molecules/src/annotator/markers/arrow.marker.d.ts

@@ -0,0 +1,6 @@
+import { ArrowMarker as OriginalArrowMarker } from '@markerjs/markerjs3';
+
+export declare class ArrowMarker extends OriginalArrowMarker {
+    static readonly typeName = "ArrowMarker";
+    constructor(container: SVGGElement);
+}

package/library/packages/molecules/src/annotator/markers/freehand.marker.d.ts

@@ -0,0 +1,6 @@
+import { FreehandMarker as OriginalFreehandMarker } from '@markerjs/markerjs3';
+
+export declare class FreehandMarker extends OriginalFreehandMarker {
+    static readonly typeName = "FreehandMarker";
+    constructor(container: SVGGElement);
+}

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

@@ -0,0 +1,4 @@
+export * from './arrow.marker';
+export * from './freehand.marker';
+export * from './line.marker';
+export * from './rectangle.marker';

package/library/packages/molecules/src/annotator/markers/line.marker.d.ts

@@ -0,0 +1,6 @@
+import { LineMarker as OriginalLineMarker } from '@markerjs/markerjs3';
+
+export declare class LineMarker extends OriginalLineMarker {
+    static readonly typeName = "LineMarker";
+    constructor(container: SVGGElement);
+}

package/library/packages/molecules/src/annotator/markers/rectangle.marker.d.ts

@@ -0,0 +1,7 @@
+import { ShapeOutlineMarkerBase } from '@markerjs/markerjs3';
+
+export declare class RectangleMarker extends ShapeOutlineMarkerBase {
+    static readonly typeName = "RectangleMarker";
+    constructor(container: SVGGElement);
+    protected getPath(width?: number, height?: number): string;
+}

package/library/packages/molecules/src/annotator/utils/define-markerjs3-global.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -218,7 +218,7 @@ export default class CxDynamicSelect extends CortexElement {
     private handleLoadMore;
     private handleCustomChange;
     private renderTableOptions;
-    render(): import('lit-html/development/directive').DirectiveResult<typeof import('lit/directives/keyed.js').Keyed>;
+    render(): import('lit/directive').DirectiveResult<typeof import('lit/directives/keyed.js').Keyed>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,4 +1,5 @@
 export { default as Cx3dViewer } from './3d-viewer/3d-viewer';
+export { default as CxAnnotator } from './annotator/annotator';
 export { default as CxAssetDataDisplay } from './asset-data-display/asset-data-display';
 export { default as CxAssetPicker } from './asset-picker/asset-picker';
 export { default as CxBicolorPicker } from './bicolor-picker/bicolor-picker';

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

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/core';
+import { Editor, Extensions } from '@tiptap/core';
 import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
 import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts';
 import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
@@ -6,8 +6,9 @@ import { default as CxTimecode } from '../../../atoms/src/components/timecode/ti
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { default as CxMentions } from '../../../molecules/src/mentions/mentions.ts';
 import { AutocompleteItem } from '../../../types/src/comment';
-import { TimecodeMode } from '../../../types/src/video-editor';
 import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive';
+import { GuardDirective } from 'lit/directives/guard';
 import { default as CxCommentMenu } from './components/comment-menu/comment-menu';
 
 export type CxCommentChangeEvent = CustomEvent<{
@@ -63,43 +64,17 @@ export default class CxComment extends CortexElement {
     originalContainer: Element | null;
     editor: Editor;
     fullscreen: boolean;
-    /**
-     * Whether the time based button should be shown in the comment menu.
-     */
-    canUseTimeBased: boolean;
-    /**
-     * Whether the time based feature is enabled.
-     */
-    timeBased: 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;
     /**
      * When true, hides the fullscreen icon button and prevents entering
      * fullscreen. `toggleFullscreen()` becomes a no-op when not already
      * fullscreen, but still allows exiting fullscreen if currently open.
      */
-    disableFullscreen: 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;
+    disabledFullscreen: boolean;
     /**
      * The placeholder for the comment editor.
      */
     placeholder: string;
+    protected extensions: Extensions;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -108,7 +83,7 @@ export default class CxComment extends CortexElement {
     private fetchAutocompleteItems;
     getMentionItems(queryString: string): Promise<AutocompleteItem[]>;
     resetMention(): void;
-    private handleMenuItemClick;
+    protected handleMenuItemClick(): void;
     private handleFullscreenClick;
     toggleFullscreen(): void;
     private readonly debouncedFetch;
@@ -121,11 +96,10 @@ export default class CxComment extends CortexElement {
     runFirstUpdated(): void;
     private handleCommentMousedown;
     handleEditableChange(): void;
-    handleTimeChange(): void;
     handlePlaceholderChange(): void;
     handleFullscreenChange(): void;
     private handleRequestClose;
-    private handleTimeBasedChange;
+    protected renderMenu(): TemplateResult | DirectiveResult<typeof GuardDirective>;
     render(): TemplateResult;
 }
 declare global {

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

@@ -7,6 +7,7 @@ import { default as CxPopup } from '../../../../../atoms/src/components/popup/po
 import { default as CxSpace } from '../../../../../atoms/src/components/space/space.ts';
 import { default as CxTooltip } from '../../../../../atoms/src/components/tooltip/tooltip.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
+import { LocalizeController } from '../../../../../utils/src/custom-element/i18n';
 import { nothing } from 'lit';
 
 export type CxAttachmentUploadEvent = CustomEvent<Record<PropertyKey, never>>;
@@ -15,7 +16,7 @@ export type CxStopRecordingEvent = CustomEvent<Record<PropertyKey, never>>;
 export type CxCommentFullscreenToggleEvent = CustomEvent<Record<PropertyKey, never>>;
 export default class CxCommentMenu extends CortexElement {
     static readonly styles: import('lit').CSSResult[];
-    private readonly localize;
+    protected readonly localize: LocalizeController;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
         'cx-card': typeof CxCard;
@@ -34,13 +35,11 @@ export default class CxCommentMenu extends CortexElement {
     canUseAIAssistant: boolean;
     recording: boolean;
     /**
-     * Whether the time based button should be shown in the comment menu.
-     */
-    canUseTimeBased: boolean;
-    /**
-     * Whether the time based feature is enabled.
+     * When true, hides the fullscreen icon button and disables fullscreen
+     * toggling entirely. Both the menu button and programmatic calls to
+     * `toggleFullscreen()` become no-ops.
      */
-    timeBased: boolean;
+    disabledFullscreen: 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
@@ -49,17 +48,16 @@ export default class CxCommentMenu extends CortexElement {
      * expose the time based feature without showing the toggle button.
      */
     hideTimeBasedIcon: boolean;
-    /**
-     * When true, hides the fullscreen icon button and disables fullscreen
-     * toggling entirely. Both the menu button and programmatic calls to
-     * `toggleFullscreen()` become no-ops.
-     */
-    disableFullscreen: boolean;
     private showTextFormats;
     private showLinkPopup;
     private linkTextValue;
     private linkUrlValue;
     private selection;
+    /**
+     * The currently active menu to be displayed on the right actions.
+     * If null, no menu is active.
+     */
+    activeMenu: string | null;
     constructor();
     private handlePopupOpened;
     private resetLinkValues;
@@ -77,16 +75,19 @@ export default class CxCommentMenu extends CortexElement {
     private handleLinkTextInputChange;
     private handleLinkInputKeyDown;
     private handleLinkUrlInputChange;
-    private handleTextFormatsClick;
-    private handleTimeBasedClick;
-    private handleFullscreenClick;
-    private handleOpenAIAssistantClick;
-    private handleRecordingClick;
-    private handleAttachmentClick;
+    protected handleTextFormatsClick(): void;
+    protected handleFullscreenClick(event: MouseEvent): void;
+    protected handleOpenAIAssistantClick(event: MouseEvent): void;
+    protected handleRecordingClick(event: MouseEvent): void;
+    protected handleAttachmentClick(event: MouseEvent): void;
     private handleLinkPopupCancel;
     handleEditorChange(): void;
     runConnectedCallback(): void;
     disconnectedCallback(): void;
+    renderTextFormatMenu(): import('lit').TemplateResult<1>;
+    protected renderLeftMenu(): import('lit').TemplateResult<1>;
+    protected renderRightActions(): import('lit').TemplateResult<1>;
+    protected renderRightMenu(): import('lit').TemplateResult<1>;
     render(): import('lit').TemplateResult<1> | typeof nothing;
 }
 declare global {

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

@@ -0,0 +1,19 @@
+export declare enum HistorySource {
+    Marker = "marker",
+    Tiptap = "tiptap"
+}
+export declare enum MarkerDrawState {
+    Creating = "creating",
+    Edit = "edit",
+    Move = "move",
+    New = "new",
+    Resize = "resize",
+    Rotate = "rotate",
+    Select = "select"
+}
+export declare enum AnnotatorTool {
+    Arrow = "arrow-marker",
+    Freehand = "freehand-marker",
+    Line = "line-marker",
+    Rectangle = "rectangle-marker"
+}

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

@@ -0,0 +1,15 @@
+export type AutocompleteItem = {
+    id: string;
+    label: string;
+    name: string;
+    suffixContent?: string;
+    suffixIcon?: string;
+    suffixTooltip?: string;
+    suffixType?: 'badge';
+    title: string;
+    type: string;
+};
+export declare enum CommentMenuName {
+    Annotation = "annotation",
+    TextFormat = "text-format"
+}