@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

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

@@ -205,6 +205,7 @@ export default class CxCarousel extends CortexElement {
      * The timeout for the fade transition. (Only for programmatically scroll by gsap)
      */
     fadeTimeout: ReturnType<typeof setTimeout> | null;
+    private fadeTransitionToken;
     /**
      * The range of the carousel. Presenting current visible slides index range.
      */
@@ -238,6 +239,8 @@ export default class CxCarousel extends CortexElement {
     private readonly localize;
     private readonly instantScrollGap;
     private isTooltipShown;
+    /** Stores the requested index when goToSlide returns early due to an out-of-chunk request, so it can be retried after the chunk loads. */
+    private pendingNavigationIndex;
     protected isProgrammaticFocus: boolean;
     private mutationObserver;
     get easeCSSVariable(): string;
@@ -317,7 +320,7 @@ export default class CxCarousel extends CortexElement {
     handleOrientationChange(): void;
     handleAutoplayChange(): void;
     handleDataChanges(): Promise<void>;
-    handleChunkChange(): void;
+    handleChunkChange(): Promise<void>;
     handleChunkLoopChange(): Promise<void>;
     /**
      * Move the carousel backward by `slides-per-move` slides.
@@ -339,6 +342,7 @@ export default class CxCarousel extends CortexElement {
      */
     goToSlide(index: number, behavior?: ScrollBehavior): void;
     private removeCloneContainer;
+    private finishFadeTransition;
     /**
      * Scrolls to the given slide, allowing an optional duration (in ms) for the scroll animation.
      * If duration is provided and behavior is 'smooth', a custom smooth scroll is performed.

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

@@ -117,6 +117,7 @@ export default class CxComment extends CortexElement {
     private handleMentionStart;
     private handleMentionUpdate;
     private handleMentionKeyDown;
+    private initEditor;
     runFirstUpdated(): void;
     private handleCommentMousedown;
     handleEditableChange(): void;

package/library/packages/organisms/src/content-builder/components/block-picker/block-picker.d.ts

@@ -98,6 +98,13 @@ export default class CxBlockPicker extends CortexElement {
     forceSelectingTemplate: boolean;
     limitedBlocks: string[];
     addIndex: number | undefined;
+    /**
+     * Whether to expose asset format / transformation / download-format /
+     * video-format-picker controls for image, video, gallery, carousel,
+     * and timeline blocks. Forwarded from `cx-content-builder`.
+     * @default false
+     */
+    enableAssetFormatControls: boolean;
     selectedComponent: Component | undefined;
     /**
      * The boundary property of the confirm popover's dropdown/dialog popup.

package/library/packages/organisms/src/content-builder/components/config-form/config-form.d.ts

@@ -40,7 +40,10 @@ import { default as CxPaddingInputGroup } from '../../../../../molecules/src/pad
 import { default as CxPositionPicker } from '../../../../../molecules/src/position-picker/position-picker.ts';
 import { default as CxShadowInputGroup } from '../../../../../molecules/src/shadow-input-group/shadow-input-group.ts';
 import { default as CxSizeInputGroup } from '../../../../../molecules/src/size-input-group/size-input-group.ts';
+import { default as CxVideoFormatPicker } from '../../../../../molecules/src/video-format-picker/video-format-picker.ts';
+import { default as CxAssetTransformationDialog } from '../../../asset-transformation-dialog/asset-transformation-dialog.ts';
 import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
+import { VideoFormatValue } from '../../../../../types/src/video-format-picker';
 import { StyleProps } from 'grapesjs';
 import { CxColorSwatchPicker } from '../color-swatch-picker';
 import { CxFolderPicker } from '../folder-picker';
@@ -73,6 +76,7 @@ export default class CxConfigForm extends CortexElement {
     static readonly styles: import('lit').CSSResult[];
     static readonly dependencies: {
         'cx-asset-picker': typeof CxAssetPicker;
+        'cx-asset-transformation-dialog': typeof CxAssetTransformationDialog;
         'cx-bicolor-picker': typeof CxBicolorPicker;
         'cx-border-input-group': typeof CxBorderInputGroup;
         'cx-button': typeof CxButton;
@@ -116,6 +120,7 @@ export default class CxConfigForm extends CortexElement {
         'cx-textarea': typeof CxTextarea;
         'cx-tooltip': typeof CxTooltip;
         'cx-typography': typeof CxTypography;
+        'cx-video-format-picker': typeof CxVideoFormatPicker;
         'cx-visually-hidden': typeof CxVisuallyHidden;
     };
     private readonly localize;
@@ -192,6 +197,10 @@ export default class CxConfigForm extends CortexElement {
      * @returns A promise that resolves to an Asset object.
      * @default undefined
      */
+    /** Base URL passed through to cx-asset-transformation-dialog for asset fetching. */
+    baseUrl: string;
+    /** Auth token passed through to cx-asset-transformation-dialog for asset fetching. */
+    token: string;
     onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
     /**
      * Function to request a download format.
@@ -202,6 +211,8 @@ export default class CxConfigForm extends CortexElement {
      * @default undefined
      */
     onRequestDownloadFormat: ((assetIds: string[], formats?: Record<string, string[]>) => Promise<Record<string, string[]>>) | undefined;
+    /** Callback invoked when a video format needs to be selected via an external popup. */
+    onRequestVideoFormat: ((assetId: string, value?: VideoFormatValue) => Promise<VideoFormatValue | null | undefined>) | undefined;
     /**
      * The attributes of the component.
      * This is used to store the attributes of the block being configured.

package/library/packages/organisms/src/content-builder/components/config-manager/config-manager.d.ts

@@ -1,6 +1,7 @@
 import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
 import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
+import { VideoFormatValue } from '../../../../../types/src/video-format-picker';
 import { Component, DataRecord, StyleProps } from 'grapesjs';
 import { CxConfigForm } from '../config-form';
 
@@ -53,6 +54,13 @@ export default class CxConfigManager extends CortexElement {
      * @default EditorMode.Template
      */
     mode: EditorMode;
+    /**
+     * Whether to expose asset format / transformation / download-format /
+     * video-format-picker controls for image, video, gallery, carousel,
+     * and timeline blocks.
+     * @default false
+     */
+    enableAssetFormatControls: boolean;
     /**
      * A list of properties that are not shown in the configuration manager if mode is EditorMode.Content.
      * @default []
@@ -100,6 +108,8 @@ export default class CxConfigManager extends CortexElement {
      * @default undefined
      */
     onRequestDownloadFormat: ((assetIds: string[]) => Promise<Asset[]>) | undefined;
+    /** Callback forwarded to `cx-config-form` → `cx-video-format-picker` for video format selection. */
+    onRequestVideoFormat: ((assetId: string, value?: VideoFormatValue) => Promise<VideoFormatValue | null | undefined>) | undefined;
     /**
      * The attributes of the component.
      * This is used to store the attributes of the block being configured.

package/library/packages/organisms/src/content-builder/components/folder-picker/folder-picker.d.ts

@@ -37,6 +37,12 @@ export default class CxFolderPicker extends CortexElement {
     value: string;
     variant: FolderSelectVariant;
     useFullPath: boolean;
+    /**
+     * Allows selecting multiple folders. Only applies when `variant` is `select`.
+     * When enabled, `cx-content-builder-folder-change` emits `detail.id` as a space-separated
+     * list of selected folder ids and `detail.representativeAssetId` from the first selected folder.
+     */
+    multiple: boolean;
     /**
      * The select's required attribute.
      */

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

@@ -1,5 +1,5 @@
 import { Easing, TransitionType } from '../../../../types/src/index.ts';
-import { PropertyConfig } from '../../../../types/src/content-builder';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { ContentType, SourceVariant } from '../../../../types/src/gallery';
 import { GalleryItemCardType, GalleryItemContentPosition, GalleryItemContentVariant, GalleryItemEffect, GalleryItemTextRevealStyle, GalleryItemZoomStyle } from '../../../../types/src/gallery-item';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
@@ -17,8 +17,10 @@ type Attributes = {
     'content-variant': GalleryItemContentVariant;
     'data-constraints': boolean;
     'details-source-field': string;
+    'download-format': string;
     easing: Easing;
     effect: GalleryItemEffect;
+    format: string;
     'header-source-field': string;
     'highlight-border': boolean;
     'highlight-color-overlay': boolean;
@@ -34,12 +36,14 @@ type Attributes = {
     'source-variant': SourceVariant;
     src: string;
     'text-reveal-style': GalleryItemTextRevealStyle;
+    'transformation-record-id': string;
+    transformations: string;
     'transition-type': TransitionType;
     variant: string;
     'zoom-style': GalleryItemZoomStyle;
 };
 declare const _default: {
-    configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attributes>>;
     defaultValue: Partial<Attributes>;
     stylable: string[];
 };

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

@@ -1,5 +1,5 @@
 import { Easing, Orientation } from '../../../../types/src/index.ts';
-import { PropertyConfig } from '../../../../types/src/content-builder';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { ContentType, GalleryVariant, OverflowBehavior, SourceVariant } from '../../../../types/src/gallery';
 import { GalleryItemCardType, GalleryItemContentPosition, GalleryItemContentVariant, GalleryItemEffect, GalleryItemShowContentType, GalleryItemTextRevealStyle, GalleryItemZoomStyle } from '../../../../types/src/gallery-item';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
@@ -17,8 +17,10 @@ type Attribute = {
     'content-type': ContentType;
     'content-variant': GalleryItemContentVariant;
     'details-source-field': string;
+    'download-format': string;
     easing: Easing;
     effect: GalleryItemEffect;
+    format: string;
     'header-source-field': string;
     'highlight-background': boolean;
     'highlight-border': boolean;
@@ -40,11 +42,13 @@ type Attribute = {
     'source-variant': SourceVariant;
     src: string;
     'text-reveal-style': GalleryItemTextRevealStyle;
+    'transformation-record-id': string;
+    transformations: string;
     variant: GalleryVariant;
     'zoom-style': GalleryItemZoomStyle;
 };
 declare const _default: {
-    configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
     defaultValue: Partial<Attribute>;
     stylable: string[];
 };

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

@@ -1,4 +1,4 @@
-import { PropertyConfig } from '../../../../types/src/content-builder';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 import { default as CxImage } from '../blocks/image/image';
 
@@ -21,8 +21,10 @@ type Attribute = {
     'download-id'?: CxImage['downloadId'];
     'download-names'?: CxImage['downloadNames'];
     'download-src'?: CxImage['downloadSrc'];
-    easing?: CxImage['easing'];
-    effect?: CxImage['effect'];
+    easing: CxImage['easing'];
+    effect: CxImage['effect'];
+    format: CxImage['format'];
+    'format-dark-mode': CxImage['formatDarkMode'];
     'header-source-field': CxImage['headerSourceField'];
     height: CxImage['height'];
     'height-mode': CxImage['heightMode'];
@@ -41,12 +43,13 @@ type Attribute = {
     src: CxImage['src'];
     'src-dark-mode': CxImage['srcDarkMode'];
     'text-reveal-style'?: CxImage['textRevealStyle'];
+    transformations: string;
     'transition-type'?: string;
     width: CxImage['width'];
     'zoom-style'?: CxImage['zoomStyle'];
 };
 declare const _default: {
-    configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
     defaultValue: Attribute;
     stylable: string[];
 };

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

@@ -1,16 +1,19 @@
-import { PropertyConfig } from '../../../../types/src/content-builder';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attributes = {
     data: string;
+    format: string;
     'min-tab-width': string;
     'multi-language': boolean;
     'navigation-arrows': boolean;
     'show-thumbnails': boolean;
     'tabs-per-page': number;
+    'transformation-record-id': string;
+    transformations: string;
 };
 declare const _default: {
-    configs: (localize: LocalizeController) => Array<PropertyConfig<Attributes>>;
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attributes>>;
     defaultValue: Attributes;
     stylable: string[];
 };

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

@@ -1,10 +1,12 @@
 import { ClickAction } from '../../../../types/src/asset-click-action';
-import { PropertyConfig } from '../../../../types/src/content-builder';
+import { ConfigsOptions, PropertyConfig } from '../../../../types/src/content-builder';
+import { AssetVersion } from '../../../../types/src/video-format-picker';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 import { default as CxVideo } from '../blocks/video/video';
 
 type Attribute = {
     'additional-fields': string;
+    'asset-version': AssetVersion;
     autoplay: CxVideo['autoplay'];
     'click-action': ClickAction;
     'click-link'?: CxVideo['clickLink'];
@@ -22,6 +24,9 @@ type Attribute = {
     'download-id'?: CxVideo['downloadId'];
     'download-names'?: CxVideo['downloadNames'];
     'download-src'?: CxVideo['downloadSrc'];
+    'format': string;
+    'format-label'?: string;
+    'format-src': string;
     'header-source-field': CxVideo['headerSourceField'];
     height: CxVideo['height'];
     'height-mode': CxVideo['heightMode'];
@@ -38,10 +43,14 @@ type Attribute = {
     'share-src'?: CxVideo['shareSrc'];
     'show-controls': CxVideo['showControls'];
     src: CxVideo['src'];
+    'thumbnail-format'?: string;
+    'thumbnail-record-id'?: string;
+    'thumbnail-transformations'?: string;
+    'version-label'?: string;
     width: CxVideo['width'];
 };
 declare const _default: {
-    configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
+    configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
     defaultValue: Partial<Attribute>;
     stylable: string[];
 };

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

@@ -1,10 +1,10 @@
-import { BlockType } from '../../../types/src/content-builder';
+import { BlockType, ConfigsOptions } from '../../../types/src/content-builder';
 import { LocalizeController } from '../../../utils/src/custom-element/i18n';
 
 export default class ConfigsController {
     private readonly localize;
     constructor(localize: LocalizeController);
-    getConfigs(type: BlockType): import('../../../types/src/content-builder').PropertyConfig<{
+    getConfigs(type: BlockType, options?: ConfigsOptions): import('../../../types/src/content-builder').PropertyConfig<{
         data: string;
         'data-constraints': boolean;
         'default-open-indexes': string;
@@ -46,8 +46,10 @@ export default class ConfigsController {
         'content-variant': import('../../../types/src/gallery-item').GalleryItemContentVariant;
         'data-constraints': boolean;
         'details-source-field': string;
+        'download-format': string;
         easing: import('../../../types/src/index.ts').Easing;
         effect: import('../../../types/src/highlightable-element').HighlightableElementEffect;
+        format: string;
         'header-source-field': string;
         'highlight-border': boolean;
         'highlight-color-overlay': boolean;
@@ -63,6 +65,8 @@ export default class ConfigsController {
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
         'text-reveal-style': import('../../../types/src/highlightable-element').HighlightableElementTextRevealStyle;
+        'transformation-record-id': string;
+        transformations: string;
         'transition-type': import('../../../types/src/index.ts').TransitionType;
         variant: string;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
@@ -111,8 +115,10 @@ export default class ConfigsController {
         'content-type': import('../../../types/src/gallery').ContentType;
         'content-variant': import('../../../types/src/gallery-item').GalleryItemContentVariant;
         'details-source-field': string;
+        'download-format': string;
         easing: import('../../../types/src/index.ts').Easing;
         effect: import('../../../types/src/highlightable-element').HighlightableElementEffect;
+        format: string;
         'header-source-field': string;
         'highlight-background': boolean;
         'highlight-border': boolean;
@@ -134,6 +140,8 @@ export default class ConfigsController {
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
         'text-reveal-style': import('../../../types/src/highlightable-element').HighlightableElementTextRevealStyle;
+        'transformation-record-id': string;
+        transformations: string;
         variant: import('../../../types/src/gallery').GalleryVariant;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
@@ -167,8 +175,10 @@ export default class ConfigsController {
         'download-id'?: import('./blocks/image/image').default["downloadId"];
         'download-names'?: import('./blocks/image/image').default["downloadNames"];
         'download-src'?: import('./blocks/image/image').default["downloadSrc"];
-        easing?: import('./blocks/image/image').default["easing"];
-        effect?: import('./blocks/image/image').default["effect"];
+        easing: import('./blocks/image/image').default["easing"];
+        effect: import('./blocks/image/image').default["effect"];
+        format: import('./blocks/image/image').default["format"];
+        'format-dark-mode': import('./blocks/image/image').default["formatDarkMode"];
         'header-source-field': import('./blocks/image/image').default["headerSourceField"];
         height: import('./blocks/image/image').default["height"];
         'height-mode': import('./blocks/image/image').default["heightMode"];
@@ -187,6 +197,7 @@ export default class ConfigsController {
         src: import('./blocks/image/image').default["src"];
         'src-dark-mode': import('./blocks/image/image').default["srcDarkMode"];
         'text-reveal-style'?: import('./blocks/image/image').default["textRevealStyle"];
+        transformations: string;
         'transition-type'?: string;
         width: import('./blocks/image/image').default["width"];
         'zoom-style'?: import('./blocks/image/image').default["zoomStyle"];
@@ -207,13 +218,17 @@ export default class ConfigsController {
         'data-constraints': boolean;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         data: string;
+        format: string;
         'min-tab-width': string;
         'multi-language': boolean;
         'navigation-arrows': boolean;
         'show-thumbnails': boolean;
         'tabs-per-page': number;
+        'transformation-record-id': string;
+        transformations: string;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'additional-fields': string;
+        'asset-version': import('../../../types/src/video-format-picker').AssetVersion;
         autoplay: import('./blocks/video/video').default["autoplay"];
         'click-action': import('../../../types/src/asset-click-action').ClickAction;
         'click-link'?: import('./blocks/video/video').default["clickLink"];
@@ -231,6 +246,9 @@ export default class ConfigsController {
         'download-id'?: import('./blocks/video/video').default["downloadId"];
         '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"];
         'height-mode': import('./blocks/video/video').default["heightMode"];
@@ -247,6 +265,10 @@ export default class ConfigsController {
         'share-src'?: import('./blocks/video/video').default["shareSrc"];
         'show-controls': import('./blocks/video/video').default["showControls"];
         src: import('./blocks/video/video').default["src"];
+        'thumbnail-format'?: string;
+        'thumbnail-record-id'?: string;
+        'thumbnail-transformations'?: string;
+        'version-label'?: string;
         width: import('./blocks/video/video').default["width"];
     }>[];
     getName(type: BlockType): string;
@@ -287,8 +309,10 @@ export default class ConfigsController {
         'content-variant': import('../../../types/src/gallery-item').GalleryItemContentVariant;
         'data-constraints': boolean;
         'details-source-field': string;
+        'download-format': string;
         easing: import('../../../types/src/index.ts').Easing;
         effect: import('../../../types/src/highlightable-element').HighlightableElementEffect;
+        format: string;
         'header-source-field': string;
         'highlight-border': boolean;
         'highlight-color-overlay': boolean;
@@ -304,6 +328,8 @@ export default class ConfigsController {
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
         'text-reveal-style': import('../../../types/src/highlightable-element').HighlightableElementTextRevealStyle;
+        'transformation-record-id': string;
+        transformations: string;
         'transition-type': import('../../../types/src/index.ts').TransitionType;
         variant: string;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
@@ -349,8 +375,10 @@ export default class ConfigsController {
         'content-type': import('../../../types/src/gallery').ContentType;
         'content-variant': import('../../../types/src/gallery-item').GalleryItemContentVariant;
         'details-source-field': string;
+        'download-format': string;
         easing: import('../../../types/src/index.ts').Easing;
         effect: import('../../../types/src/highlightable-element').HighlightableElementEffect;
+        format: string;
         'header-source-field': string;
         'highlight-background': boolean;
         'highlight-border': boolean;
@@ -372,6 +400,8 @@ export default class ConfigsController {
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
         'text-reveal-style': import('../../../types/src/highlightable-element').HighlightableElementTextRevealStyle;
+        'transformation-record-id': string;
+        transformations: string;
         variant: import('../../../types/src/gallery').GalleryVariant;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
     }> | {
@@ -387,13 +417,17 @@ export default class ConfigsController {
         'data-constraints': boolean;
     } | {
         data: string;
+        format: string;
         'min-tab-width': string;
         'multi-language': boolean;
         'navigation-arrows': boolean;
         'show-thumbnails': boolean;
         'tabs-per-page': number;
+        'transformation-record-id': string;
+        transformations: string;
     } | Partial<{
         'additional-fields': string;
+        'asset-version': import('../../../types/src/video-format-picker').AssetVersion;
         autoplay: import('./blocks/video/video').default["autoplay"];
         'click-action': import('../../../types/src/asset-click-action').ClickAction;
         'click-link'?: import('./blocks/video/video').default["clickLink"];
@@ -411,6 +445,9 @@ export default class ConfigsController {
         'download-id'?: import('./blocks/video/video').default["downloadId"];
         '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"];
         'height-mode': import('./blocks/video/video').default["heightMode"];
@@ -427,6 +464,10 @@ export default class ConfigsController {
         'share-src'?: import('./blocks/video/video').default["shareSrc"];
         'show-controls': import('./blocks/video/video').default["showControls"];
         src: import('./blocks/video/video').default["src"];
+        'thumbnail-format'?: string;
+        'thumbnail-record-id'?: string;
+        'thumbnail-transformations'?: string;
+        'version-label'?: string;
         width: import('./blocks/video/video').default["width"];
     }>;
     getStylable(type: BlockType): string[];

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

@@ -4,6 +4,7 @@ import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts
 import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { Asset, AssetTypeString, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
+import { VideoFormatValue } from '../../../types/src/video-format-picker';
 import { Component, Editor, StyleProps } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { CxBlockPicker } from './components/block-picker';
@@ -13,6 +14,10 @@ import { CxRTEBubbleMenu, CxRTETableGenerator } from './plugins';
 /**
  * @summary The `cx-content-builder` component is used to create and manage content blocks in a CMS.
  *
+ * Set `enable-asset-format-controls` to expose the asset format, transformation,
+ * download-format, and video-format-picker controls on image, video, gallery,
+ * carousel, and timeline blocks. Off by default.
+ *
  * @event cx-change - Emitted when the content builder changes.
  */
 export default class CxContentBuilder extends CortexElement {
@@ -93,6 +98,13 @@ export default class CxContentBuilder extends CortexElement {
      * @default false
      */
     allowDuplicateBlocks: boolean;
+    /**
+     * Whether to expose the asset format / transformation / download-format /
+     * video-format-picker controls in the per-block config sidebar for
+     * image, video, gallery, carousel, and timeline blocks.
+     * @default false
+     */
+    enableAssetFormatControls: boolean;
     /**
      * The default language of the content builder.
      * This is the language that will be used to store the translatable texts.
@@ -248,6 +260,7 @@ export default class CxContentBuilder extends CortexElement {
     handleBuilderPropsChange(): void;
     onRequestAsset(type: AssetTypeString): Promise<Asset>;
     onRequestDownloadFormat(assetIds: string[], formats?: Record<string, string[]>): Promise<{}>;
+    onRequestVideoFormat(_assetId: string, _value?: VideoFormatValue): Promise<VideoFormatValue | null | undefined>;
     /**
      * This method retrieves all the components of the specified component.
      * It recursively traverses the component's children and adds them to the list.

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

@@ -1,5 +1,49 @@
-import { Editor } from 'grapesjs';
+import { Component, ComponentDefinition, ComponentView, ComponentViewDefinition, Editor } from 'grapesjs';
+import { default as _delay } from 'lodash-es/delay';
 import { EditorPluginOptions } from './plugin-factory';
 
+export declare const GALLERY_TAG_NAME = "cx-gallery";
+export type GalleryTimerMap = WeakMap<Component, ReturnType<typeof _delay>>;
+type GalleryViewThis = ComponentViewDefinition & ComponentView<Component>;
+/**
+ * `clearHover` defaults to clearing grapesjs's hovered model. The carousel
+ * plugin passes a DOM mouseleave dispatch instead, because its lightbox
+ * interaction needs a different cleanup path.
+ */
+export declare function createBlockHoverEvent(editor: Editor, clearHover?: () => void): (event: MouseEvent) => void;
+export declare function handleOnRequestAsset(model: Component): void;
+export declare function createHandleComponentChange(timerId: GalleryTimerMap, options?: {
+    columnStyle?: ComponentDefinition['style'];
+}): (model: Component) => void;
+export declare function createInit({ editor, handleComponentChange, timerId, }: {
+    editor: Editor;
+    handleComponentChange: (model: Component) => void;
+    timerId: GalleryTimerMap;
+}): (model: Component) => void;
+export declare function createRemoved({ handleComponentChange, timerId, }: {
+    handleComponentChange: (model: Component) => void;
+    timerId: GalleryTimerMap;
+}): (model: Component) => void;
+/**
+ * Move a record one position. `wrap: true` makes the first/last item swap
+ * with the last/first (used by the carousel in loop mode); `wrap: false`
+ * leaves the boundary item in place (used by the gallery, which hides the
+ * arrow button in that case).
+ */
+export declare function performMoveItem(model: Component, itemDetail: {
+    id?: string;
+    rawId?: string;
+}, direction: 'left' | 'right', options?: {
+    wrap?: boolean;
+}): void;
+/**
+ * View methods that the gallery and carousel plugins share verbatim. Move,
+ * config-hide/show, and the events() list stay in the caller because they
+ * differ between plugins.
+ */
+export declare function createSharedViewMethods({ editor, handleComponentChange, }: {
+    editor: Editor;
+    handleComponentChange: (model: Component) => void;
+}): Partial<ComponentViewDefinition> & ThisType<GalleryViewThis>;
 declare const GalleryPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default GalleryPlugin;