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

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/styleController.d.ts

@@ -16,9 +16,9 @@ export default class StyleController {
         id: string;
         unit?: string | undefined;
         attributes?: Record<string, any> | undefined;
+        default?: any;
         max?: number | undefined;
         min?: number | undefined;
-        default?: any;
         text?: string | undefined;
         placeholder?: string;
         category?: (string | import('grapesjs').BlockCategoryProperties) | undefined;
@@ -45,6 +45,14 @@ export default class StyleController {
         full?: boolean | undefined;
         accept?: string;
         api?: () => Promise<import('../../../types/src/content-builder').Option[]> | import('../../../types/src/folder-select').FolderSelectApi;
+        assetTransformationConfigs?: {
+            assetIdKey?: string;
+            formatKey?: string;
+            multiple?: boolean;
+            noCrop?: boolean;
+            noResize?: boolean;
+            noRotate?: boolean;
+        };
         callback?: ((params: {
             extraValue?: Record<string, unknown>;
             record: Record<string, any>;
@@ -53,7 +61,7 @@ export default class StyleController {
         checkedValue?: string | boolean;
         children?: import('../../../types/src/content-builder').PropertyConfig[];
         clearable?: boolean;
-        controlType: "bicolor-picker" | "border-input-group" | "button-group" | "checkbox" | "checkbox-group" | "color-swatch-picker" | "corner-position-input-group" | "download-format-picker" | "file" | "folder-picker" | "gallery-picker" | "group" | "group-heading" | "icon-picker" | "image-picker" | "input" | "list-editor" | "all-picker" | "other-picker" | "padding-input-group" | "page-picker" | "placeholder" | "position-picker" | "radio-card-group" | "radio-group" | "select" | "shadow-input-group" | "size-input-group" | "switch" | "table" | "text" | "video-picker";
+        controlType: "asset-transformation" | "bicolor-picker" | "border-input-group" | "button-group" | "checkbox" | "checkbox-group" | "color-swatch-picker" | "corner-position-input-group" | "download-format-picker" | "file" | "folder-picker" | "gallery-picker" | "group" | "group-heading" | "icon-picker" | "image-picker" | "input" | "list-editor" | "all-picker" | "other-picker" | "padding-input-group" | "page-picker" | "placeholder" | "position-picker" | "radio-card-group" | "radio-group" | "select" | "shadow-input-group" | "size-input-group" | "switch" | "table" | "text" | "video-format-picker" | "video-picker";
         cornerStyleKey?: {
             offsetX: string;
             offsetY: string;
@@ -63,12 +71,15 @@ export default class StyleController {
         disabledTooltip?: string;
         downloadFormatPickerConfigs?: {
             assetIdsKey?: string;
+            isObjectFormat?: boolean;
+            objectIdKey?: string;
         };
         folderPickerConfigs?: {
             useFullPath: boolean;
         };
         galleryPickerConfigs?: {
             dialog: import('../../../types/src/content-builder').DialogType;
+            transformationRecordIdKey?: string;
         };
         groupConfigs?: {
             columnGap?: string;
@@ -124,6 +135,13 @@ export default class StyleController {
         type: "attribute" | "property" | "style" | "decorative";
         uncheckedValue?: string | boolean;
         useSearchTerm?: boolean;
+        videoFormatPickerConfigs?: {
+            assetIdKey?: string;
+            assetVersionKey?: string;
+            formatLabelKey?: string;
+            formatSrcKey?: string;
+            versionLabelKey?: string;
+        };
         width?: ((record: Record<string, unknown>) => string | number) | string | number;
     };
 }

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

@@ -1,4 +1,5 @@
 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';
 export { default as CxDashboardTable } from './dashboard-table/dashboard-table';
 export { default as CxBentoGrid } from './bento-grid/bento-grid';
@@ -11,6 +12,7 @@ export { default as CxComment } from './comment/comment';
 export { default as CxContentBuilder } from './content-builder/content-builder';
 export { default as CxDownloader } from './downloader/downloader';
 export { default as CxFileOnDemand } from './file-on-demand/file-on-demand';
+export { default as CxLightbox } from './lightbox/lightbox';
 export { default as CxMultiSelect } from './multi-select/multi-select';
 export { default as CxTemplateSwitcher } from './template-switcher/template-switcher';
 export { default as CxTextToSpeech } from './text-to-speech/text-to-speech';

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

@@ -0,0 +1,79 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
+import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { default as CxCarousel } from '../carousel/carousel.ts';
+import { GalleryItem } from '../../../types/src/gallery-item';
+import { TemplateResult } from 'lit';
+
+/**
+ * @summary A fullscreen lightbox that wraps a dialog and carousel for browsing gallery items.
+ * Supports download, keyboard/click-to-close, and lazy loading via chunk-based data fetching.
+ *
+ * @csspart base - The outer lightbox wrapper inside the dialog body.
+ * @csspart toolbar - The top-right action toolbar.
+ * @csspart counter - The slide counter label.
+ *
+ * @event cx-lightbox-close - Emitted when the lightbox is closed. Detail: `{ index: number }`
+ * @event cx-lightbox-download - Emitted when the download button is clicked. Detail: `{ index: number; item: GalleryItem }`
+ * @event cx-slide-change - Re-emitted from the internal carousel when the active slide changes.
+ * @event cx-gallery-chunk-request - Re-emitted from the internal carousel when more data is needed.
+ */
+export default class CxLightbox extends CortexElement {
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-carousel': typeof CxCarousel;
+        'cx-dialog': typeof CxDialog;
+        'cx-icon': typeof CxIcon;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    private carouselEl?;
+    /**
+     * Controls visibility of the lightbox.
+     */
+    open: boolean;
+    /**
+     * Array of slide items to display.
+     */
+    data: GalleryItem[];
+    /**
+     * Total number of items (used for the counter and carousel chunking).
+     */
+    totalData: number;
+    /**
+     * Loaded data range passed through to the carousel for lazy loading.
+     */
+    chunk: [number, number];
+    /**
+     * The slide index to jump to when the lightbox opens.
+     */
+    startIndex: number;
+    /**
+     * Whether the carousel loops back to the start after the last slide.
+     */
+    loop: boolean;
+    /**
+     * Show the download button in the toolbar.
+     */
+    canDownload: boolean;
+    /**
+     * Current active slide index, synced from internal carousel.
+     */
+    private activeIndex;
+    mappedData: GalleryItem[];
+    handleOpenChange(): Promise<void>;
+    handleDataChange(): void;
+    private handleRequestClose;
+    private handleSlideChange;
+    private handleDownload;
+    private renderToolbar;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-lightbox': CxLightbox;
+    }
+}