@orangelogic/design-system 2.123.0 → 2.124.0

package/library/package.json

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

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

@@ -63,7 +63,6 @@ export * from './cx-dot-status-click';
 export * from './cx-download-format-picker-delete';
 export * from './cx-download-format-picker-select';
 export * from './cx-download-format-request-status';
-export * from './cx-asset-format-picker-delete';
 export * from './cx-asset-format-picker-select';
 export * from './cx-drag-end';
 export * from './cx-drag-start';

package/library/packages/molecules/src/asset-format-picker/asset-format-picker.d.ts

@@ -11,11 +11,11 @@ import { CSSResultGroup } from 'lit';
  * @summary The `cx-asset-format-picker` component lets users choose and clear an asset display format.
  * Works for any asset type (video, audio, etc.) based on the callback provided.
  *
- * @event cx-asset-format-select - Emitted when a format is selected. Detail is an `AssetFormatValue`.
- * @event cx-asset-format-delete - Emitted when the selected format is cleared.
+ * @event cx-asset-format-select - Emitted when a format is selected or reset to its default. Detail is an `AssetFormatValue`.
  * @event cx-asset-request-status - Emitted when the format request status changes.
  */
 export default class CxAssetFormatPicker extends CortexElement {
+    #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
@@ -25,6 +25,7 @@ export default class CxAssetFormatPicker extends CortexElement {
         'cx-typography': typeof CxTypography;
     };
     private readonly localize;
+    private apiGetAvailableProxies;
     inputEl?: CxInput;
     /** The currently selected asset format value. */
     value: AssetFormatValue | undefined;
@@ -36,6 +37,8 @@ export default class CxAssetFormatPicker extends CortexElement {
     required: boolean;
     /** Disables the picker. */
     disabled: boolean;
+    /** The format code to reset to when the user clicks the reset button (e.g. 'Web', 'WebHigh'). */
+    defaultFormat: string;
     /**
      * A callback invoked when the user requests to select an asset format.
      * It receives the asset ID and the current value, and should return a
@@ -43,8 +46,11 @@ export default class CxAssetFormatPicker extends CortexElement {
      */
     onRequestAssetFormat: ((assetId: string, value?: AssetFormatValue) => Promise<AssetFormatValue | null | undefined>) | undefined;
     private get hasValue();
+    private get resolvedLabel();
+    private get canReset();
     private handleRequestFormatClick;
-    private handleDeleteClick;
+    private handleResetClick;
+    handleAssetIdChange(): Promise<void>;
     handleValueChange(): Promise<void>;
     private renderFormatDisplay;
     render(): import('lit').TemplateResult<1>;

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

@@ -0,0 +1,67 @@
+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 CxCommentMenuV1 } from './components/comment-menu/comment-menu';
+
+/**
+ * @summary CxCommentV1 - Temporary fork of `cx-comment` that restores the time-based/timecode
+ * feature removed from `cx-comment` by the cx-annotator refactor. Kept for Cortex core
+ * compatibility until core migrates off the old timecode API; remove once no longer needed.
+ */
+export default class CxCommentV1 extends CxComment {
+    static readonly dependencies: {
+        'cx-comment-menu-v1': typeof CxCommentMenuV1;
+        '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;
+    };
+    readonly commentMenu: CxCommentMenuV1;
+    /**
+     * 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 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;
+    /**
+     * Legacy alias for `disabledFullscreen` using the pre-rename attribute name
+     * (`disable-fullscreen`) that Cortex core still sets. Setting this also sets
+     * `disabledFullscreen`, which is what `cx-comment` actually acts on.
+     */
+    disableFullscreen: boolean;
+    handleDisableFullscreenChange(): void;
+    runFirstUpdated(): void;
+    handleTimeChange(): void;
+    handleTimeBasedChange(event: CxTimeBasedChangeEvent): void;
+    /** Shared timecode config for both the initial extension and `setTime` updates. */
+    private get timecodeOptions();
+    protected renderMenu(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-comment-v1': CxCommentV1;
+    }
+}

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

@@ -0,0 +1,32 @@
+import { default as CxCommentMenu } from '../../../../comment/components/comment-menu/comment-menu';
+
+/**
+ * @summary CxCommentMenuV1 - Temporary fork of `cx-comment-menu` that restores the time-based/timecode
+ * toggle button removed by the cx-annotator refactor. Used only by `cx-comment-v1`.
+ */
+export default class CxCommentMenuV1 extends CxCommentMenu {
+    static readonly dependencies: {
+        '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;
+    };
+    /**
+     * Whether the time based button should be shown in the comment menu.
+     */
+    canUseTimeBased: boolean;
+    /**
+     * Whether the time based feature is enabled.
+     */
+    timeBased: boolean;
+    protected handleTimeBasedClick(): void;
+    protected renderRightActions(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-comment-menu-v1': CxCommentMenuV1;
+    }
+}

package/library/packages/organisms/src/_v1/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/content-builder/configs/audio.d.ts

@@ -8,7 +8,6 @@ type Attribute = {
     'data-width-percent': string;
     'data-width-pixel': string;
     'format'?: string;
-    'format-label'?: string;
     'format-src'?: string;
     name: CxSbAudio['name'];
     'parent-record-id'?: string;

package/library/packages/organisms/src/content-builder/configs/video.d.ts

@@ -25,7 +25,6 @@ type Attribute = {
     'download-names'?: CxVideo['downloadNames'];
     'download-src'?: CxVideo['downloadSrc'];
     'format': string;
-    'format-label'?: string;
     'format-src': string;
     'header-source-field': CxVideo['headerSourceField'];
     height: CxVideo['height'];

package/library/packages/organisms/src/content-builder/configs-controller.d.ts

@@ -14,7 +14,6 @@ export default class ConfigsController {
         'data-width-percent': string;
         'data-width-pixel': string;
         format?: string;
-        'format-label'?: string;
         'format-src'?: string;
         name: import('./blocks/audio/audio').default["name"];
         'parent-record-id'?: string;
@@ -330,7 +329,6 @@ export default class ConfigsController {
         'download-names'?: import('./blocks/video/video').default["downloadNames"];
         'download-src'?: import('./blocks/video/video').default["downloadSrc"];
         format: string;
-        'format-label'?: string;
         'format-src': string;
         'header-source-field': import('./blocks/video/video').default["headerSourceField"];
         height: import('./blocks/video/video').default["height"];
@@ -360,7 +358,6 @@ export default class ConfigsController {
         'data-width-percent': string;
         'data-width-pixel': string;
         format?: string;
-        'format-label'?: string;
         'format-src'?: string;
         name: import('./blocks/audio/audio').default["name"];
         'parent-record-id'?: string;
@@ -612,7 +609,6 @@ export default class ConfigsController {
         'download-names'?: import('./blocks/video/video').default["downloadNames"];
         'download-src'?: import('./blocks/video/video').default["downloadSrc"];
         format: string;
-        'format-label'?: string;
         'format-src': string;
         'header-source-field': import('./blocks/video/video').default["headerSourceField"];
         height: import('./blocks/video/video').default["height"];

package/library/packages/organisms/src/content-builder/styleController.d.ts

@@ -48,7 +48,7 @@ export default class StyleController {
         assetFormatPickerConfigs?: {
             assetIdKey?: string;
             assetVersionKey?: string;
-            formatLabelKey?: string;
+            defaultFormat?: string;
             formatSrcKey?: string;
             versionLabelKey?: string;
         };

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

@@ -10,6 +10,7 @@ export { default as CxChartPlanBuilder } from './content-builder/components/char
 export { default as CxClusterManagement } from './cluster-management/cluster-management';
 export { default as CxColorSwatchGroup } from './color-swatch-group/color-swatch-group';
 export { default as CxComment } from './comment/comment';
+export { default as CxCommentV1 } from './_v1/comment/comment';
 export { default as CxDamCustomToolbarButtonsEditor } from './dam-custom-toolbar-buttons-editor/dam-custom-toolbar-buttons-editor';
 export { default as CxContentBuilder } from './content-builder/content-builder';
 export { default as CxDownloader } from './downloader/downloader';

package/library/packages/types/src/asset-format-picker.d.ts

@@ -6,6 +6,5 @@ export interface AssetFormatValue {
     assetSrc?: string;
     assetVersion: AssetVersion | string;
     format: string;
-    formatLabel?: string;
     versionLabel?: string;
 }

package/library/packages/types/src/content-builder.d.ts

@@ -49,8 +49,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
         assetIdKey?: string;
         /** The block-attribute key that stores the selected asset version. Defaults to 'asset-version'. */
         assetVersionKey?: string;
-        /** The block-attribute key that stores the human-readable format label. Defaults to 'format-label'. */
-        formatLabelKey?: string;
+        /** The format code to use when the user resets the picker (e.g. 'Web' for audio, 'WebHigh' for video). */
+        defaultFormat?: string;
         /** The block-attribute key that stores the resolved asset source URL. Defaults to 'format-src'. */
         formatSrcKey?: string;
         /** The block-attribute key that stores the human-readable version label. Defaults to 'version-label'. */

package/library/react-web-component.d.ts

@@ -7696,7 +7696,7 @@
         /**
           * The currently selected asset format value.
         */
-        value?: { assetSrc: string; assetVersion: string; format: string; formatLabel: string; versionLabel: string; };
+        value?: { assetSrc: string; assetVersion: string; format: string; versionLabel: string; };
         /**
           * Form field name.
         */
@@ -7713,6 +7713,10 @@
           * Disables the picker.
         */
         disabled?: boolean;
+        /**
+          * The format code to reset to when the user clicks the reset button (e.g. 'Web', 'WebHigh').
+        */
+        defaultFormat?: string;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */

package/package.json

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

package/library/packages/events/src/cx-asset-format-picker-delete.d.ts

@@ -1,6 +0,0 @@
-export type CxAssetFormatPickerDeleteEvent = CustomEvent<Record<PropertyKey, unknown>>;
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'cx-asset-format-delete': CxAssetFormatPickerDeleteEvent;
-    }
-}