@orangelogic/design-system 3.4.0 → 3.5.0

package/library/components/video.js

@@ -1,7 +1,7 @@
 import { _ as kd, a as Sa, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as ps, a as Bn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Sb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Cb } from "../chunks/image.B-4cVbol.js";
+import { C as Cb } from "../chunks/image.ysU1iW6e.js";
 import Mb from "./resize-observer.js";
 import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.CAfXABBc.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";

package/library/package.json

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

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

@@ -139,6 +139,12 @@ export default class CxImage extends ResizableElement {
     retryOnError: boolean;
     /**
      * Maximum number of retry attempts when `retry-on-error` is enabled.
+     *
+     * Set high enough to outlast a transient backend overload: a page full of images
+     * can push the transform service into 503s, and those images need to keep retrying
+     * until it recovers rather than falling back to a broken-image icon. The backoff is
+     * exponential and capped at 10s per attempt, so the attempts spread out instead of
+     * adding to the load.
      */
     maxRetries: number;
     /**

package/library/packages/atoms/src/components/menu-section/menu-section.d.ts

@@ -23,6 +23,7 @@ export default class CxMenuSection extends CortexElement {
     private mutationObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    runFirstUpdated(): void;
     private handleSlotChange;
     render(): import('lit').TemplateResult<1>;
 }

package/library/packages/events/src/cx-asset-transformation-dialog-confirm.d.ts

@@ -2,6 +2,8 @@ import { Transformation } from '../../types/src/asset-link-format';
 
 export type CxAssetTransformationDialogConfirmEvent = CustomEvent<{
     format: string;
+    /** False when the format follows the asset's file extension instead of an explicit pick. */
+    manualFormat: boolean;
     transformations: Transformation[];
 }>;
 declare global {

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

@@ -28,7 +28,6 @@ export default class CxCropper extends CortexElement {
     image: {
         extension: string;
         height: number;
-        originalUrl: string;
         rotation: number;
         url: string;
         width: number;

package/library/packages/molecules/src/cropper/react/Cropper.d.ts

@@ -17,7 +17,6 @@ type Props = {
     image: {
         extension: string;
         height: number;
-        originalUrl: string;
         rotation: number;
         url: string;
         width: number;

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

@@ -59,6 +59,19 @@ export default class CxMasonry extends CortexElement {
      * The key to use for the id of the items in the masonry layout.
      */
     idKey: keyof MasonryItem;
+    /**
+     * The proxy format the item images were resolved with.
+     *
+     * Only used to decide whether a `srcset` may be generated: an original-file format
+     * paired with an animated source must be delivered untouched.
+     */
+    format: string;
+    /**
+     * Whether `format` was picked by hand. When false each item's format follows its own
+     * file extension instead, so a mixed list can serve animated originals and resizable
+     * raster proxies side by side.
+     */
+    manualFormat: boolean;
     /**
      * When true, forwards `no-crossorigin` to each inner `<cx-image>`, disabling CORS mode
      * (e.g. in Site Builder contexts where CORS headers are absent).
@@ -90,6 +103,8 @@ export default class CxMasonry extends CortexElement {
      * the default `100vw`.
      */
     private get itemSizes();
+    /** The format one item is served under: the configured one, or derived from its extension. */
+    private resolveItemFormat;
     handleItemClick(event: MouseEvent, item: MasonryItem): void;
     handleSortableUpdate(event: Sortable.SortableEvent): void;
     renderActions(item: MasonryItem): import('lit').TemplateResult<1>;

package/library/packages/molecules/src/view-and-sort/view-and-sort.d.ts

@@ -7,6 +7,7 @@ import { default as CxLineClamp } from '../../../atoms/src/components/line-clamp
 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 CxMenuLabel } from '../../../atoms/src/components/menu-label/menu-label.ts';
+import { default as CxMenuSection } from '../../../atoms/src/components/menu-section/menu-section.ts';
 import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
 import { default as CxSwitch } from '../../../atoms/src/components/switch/switch.ts';
 import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
@@ -35,6 +36,7 @@ export default class CxViewAndSort extends CortexElement {
         'cx-menu': typeof CxMenu;
         'cx-menu-item': typeof CxMenuItem;
         'cx-menu-label': typeof CxMenuLabel;
+        'cx-menu-section': typeof CxMenuSection;
         'cx-space': typeof CxSpace;
         'cx-switch': typeof CxSwitch;
         'cx-tooltip': typeof CxTooltip;

package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts

@@ -111,6 +111,18 @@ export default class CxAssetLinkFormat extends CortexElement {
      * This is a string that represents the ID of the selected proxy format from the list of available proxies.
      */
     defaultProxy: string;
+    /**
+     * Whether the format listbox offers an `Auto` entry, which derives the proxy from the
+     * asset's file extension instead of the author naming one.
+     */
+    canAutoFormat: boolean;
+    /**
+     * Whether `Auto` is the current choice.
+     *
+     * Tracked next to `selectedProxy` rather than encoded into it, so `selectedProxy` stays
+     * a real proxy id for every consumer that reads it — only the origin of that id differs.
+     */
+    autoFormat: boolean;
     useCustomExtension: boolean;
     noMetadata: boolean;
     noFormat: boolean;
@@ -133,13 +145,12 @@ export default class CxAssetLinkFormat extends CortexElement {
     activeSetting: string;
     /**
      * The currently selected format for the asset link.
-     * This is an object that contains details about the selected format, such as `extension`, `height`, `keepMetadata`, `originalUrl`, `proxyUrl`, `quality`, `rotation`, `url`, `width`, `x`, and `y`.
+     * This is an object that contains details about the selected format, such as `extension`, `height`, `keepMetadata`, `proxyUrl`, `quality`, `rotation`, `url`, `width`, `x`, and `y`.
      */
     selectedFormat: {
         extension: string;
         height: number;
         keepMetadata: boolean;
-        originalUrl: string;
         quality: number;
         rotation: number;
         url: string;
@@ -194,6 +205,10 @@ export default class CxAssetLinkFormat extends CortexElement {
     private frozenIndex;
     /** Snapshot saved on Reset to allow one Undo step back to the pre-reset state. */
     private preResetTransformations;
+    /** The `Auto` state saved alongside `preResetTransformations`, restored by the same Undo. */
+    private preResetAutoFormat;
+    /** The proxy saved alongside `preResetAutoFormat`, so Undo restores the pair together. */
+    private preResetSelectedProxy;
     /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
     private get hasUnfrozenTransformations();
     private apiGetTransformAssetLink;
@@ -319,6 +334,13 @@ export default class CxAssetLinkFormat extends CortexElement {
     private handleCropperElementChange;
     private handleCropperSelectorChange;
     private handleAssetChange;
+    /**
+     * The proxy id to fall back to when none is set or the current one is not in the list.
+     *
+     * Under `Auto` the asset's extension decides, so the first proxy in the list is only a
+     * last resort — used when the mapped format is not offered for this asset.
+     */
+    private resolveFallbackProxyId;
     private handleProxiesChange;
     handleSelectedProxyChange(oldValue: unknown): Promise<void>;
     handleLoadingChange(): void;
@@ -332,6 +354,14 @@ export default class CxAssetLinkFormat extends CortexElement {
     private onCropDragStart;
     private onDetailsShow;
     private onDetailsHide;
+    /**
+     * The proxy id that `Auto` resolves to for the current asset, or `''` when the mapped
+     * format is not among the available proxies.
+     *
+     * `resolveAutoFormat` yields a proxy *name* (`TRX` / `TR1`) while `selectedProxy` holds
+     * a proxy *id*, so the name has to be looked up in `proxies` rather than used directly.
+     */
+    private get autoResolvedProxyId();
     private onProxyChange;
     private onCropModeChange;
     private onCropFocusModeChange;
@@ -347,6 +377,20 @@ export default class CxAssetLinkFormat extends CortexElement {
     private onMetadataChange;
     private onExtensionChange;
     private syncQuality;
+    /**
+     * Whether there is anything for Reset to undo.
+     *
+     * Transformations are one way to diverge from the defaults; leaving `Auto` for an
+     * explicit format is another, and Reset is what puts that back.
+     */
+    private get hasResettableState();
+    /**
+     * Drops the one-step Reset snapshot.
+     *
+     * Called whenever the user applies a new transformation: at that point Undo means
+     * "remove that transformation", not "go back to before the Reset".
+     */
+    private clearResetSnapshot;
     private handleUndo;
     private handleReset;
     render(): TemplateResult;

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-proxy/asset-link-format-proxy.d.ts

@@ -1,5 +1,6 @@
 import { default as CxButton } from '../../../../../atoms/src/components/button/button.ts';
 import { default as CxDetails } from '../../../../../atoms/src/components/details/details.ts';
+import { default as CxDivider } from '../../../../../atoms/src/components/divider/divider.ts';
 import { default as CxIcon } from '../../../../../atoms/src/components/icon/icon.ts';
 import { default as CxOption } from '../../../../../atoms/src/components/option/option.ts';
 import { default as CxSelect } from '../../../../../atoms/src/components/select/select.ts';
@@ -9,7 +10,23 @@ import { default as CortexElement } from '../../../../../base/src/cortex-element
 import { Proxy } from '../../../../../types/src/asset-link-format';
 import { CSSResultGroup, TemplateResult } from 'lit';
 
-export type CxAssetLinkFormatProxyChangeEvent = CustomEvent<Proxy>;
+/**
+ * Listbox value for the `Auto` entry. Not a proxy id — no `Proxy` can ever carry it, so it
+ * is safe to distinguish the two cases by comparing against this constant.
+ */
+export declare const AUTO_FORMAT_OPTION_VALUE = "auto";
+/**
+ * Either a named proxy or the `Auto` choice.
+ *
+ * `Auto` carries no proxy: this component does not own the asset, so it cannot resolve
+ * which format the extension maps to. The parent does that and sets `selectedProxy`.
+ */
+export type CxAssetLinkFormatProxyChangeDetail = (Proxy & {
+    autoFormat?: false;
+}) | {
+    autoFormat: true;
+};
+export type CxAssetLinkFormatProxyChangeEvent = CustomEvent<CxAssetLinkFormatProxyChangeDetail>;
 /**
  * @summary The `cx-asset-link-format-proxy` component is used to select a proxy format for an asset link.
  *
@@ -20,6 +37,7 @@ export default class CxAssetLinkFormatProxy extends CortexElement {
     static readonly dependencies: {
         'cx-button': typeof CxButton;
         'cx-details': typeof CxDetails;
+        'cx-divider': typeof CxDivider;
         'cx-icon': typeof CxIcon;
         'cx-option': typeof CxOption;
         'cx-select': typeof CxSelect;
@@ -50,6 +68,18 @@ export default class CxAssetLinkFormatProxy extends CortexElement {
      * @default []
      */
     items: Proxy[];
+    /**
+     * Whether the listbox offers an `Auto` entry that derives the format from the asset's
+     * file extension instead of naming one.
+     * @default false
+     */
+    canAutoFormat: boolean;
+    /**
+     * Whether `Auto` is the current choice. Kept separate from `value` so the resolved
+     * format stays readable while the listbox still shows `Auto` as selected.
+     * @default false
+     */
+    autoFormat: boolean;
     /**
      * The loading state of the component.
      * This is used to indicate that an operation is in progress, such as applying a new quality value.
@@ -63,6 +93,11 @@ export default class CxAssetLinkFormatProxy extends CortexElement {
      * @default ''
      */
     scopedValue: string;
+    /**
+     * The listbox value that represents the committed choice: the `Auto` entry when that is
+     * active, otherwise the resolved proxy id.
+     */
+    private get committedValue();
     handleValueChange(): void;
     handleOpenChange(): void;
     private handleProxyChange;

package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts

@@ -20,7 +20,7 @@ import { default as CxAssetLinkFormat } from '../asset-link-format/asset-link-fo
  *   `cx-icon-button`. Automatically disabled when `asset-id` is not set.
  *
  * @event cx-asset-transformation-dialog-cancel - Emitted when the user closes or cancels the dialog.
- * @event {{ detail: { format: string; transformations: Transformation[] } }} cx-asset-transformation-dialog-confirm - Emitted when the user saves, with the selected proxy id and transformation array.
+ * @event {{ detail: { format: string; manualFormat: boolean; transformations: Transformation[] } }} cx-asset-transformation-dialog-confirm - Emitted when the user saves, with the resolved proxy id, whether that id was picked by hand rather than derived from the asset extension, and the transformation array.
  * @event cx-asset-transformation-dialog-delete - Emitted when the user resets the format to its default and clears the saved transformations via the reset button.
  */
 export default class CxAssetTransformationDialog extends CortexElement {
@@ -64,6 +64,11 @@ export default class CxAssetTransformationDialog extends CortexElement {
     format: string;
     /** The default format to fall back to if the asset has no transformations or selected proxy. */
     defaultFormat: string;
+    /**
+     * Whether the author picked the format by hand rather than letting it follow the asset's
+     * file extension. `false` (the default) means `Auto`.
+     */
+    manualFormat: boolean;
     /** Optional label rendered as the dialog title. Falls back to the localized "Asset format" term. */
     dialogLabel: string;
     /** The transformations applied when the user last saved, passed back into cx-asset-link-format on reopen. */
@@ -86,8 +91,21 @@ export default class CxAssetTransformationDialog extends CortexElement {
     private proxies;
     /** False while the authorization check is in flight or after it confirms no access. */
     private canAccess;
+    /**
+     * Whether the author changed anything away from the block's defaults, which is what the
+     * Reset control acts on.
+     *
+     * `Auto` is the default, so any manual format counts as an edit — including one that
+     * happens to resolve to the same proxy as `defaultFormat`. Comparing the codes instead
+     * would leave the author no way back to `Auto` from that format.
+     */
     private get hasTransformations();
-    /** Resolves the selected format code to its proxy label, falling back to the raw code. */
+    /**
+     * The label shown in the settings row.
+     *
+     * Under `Auto` the stored format is only what the extension happened to resolve to, so
+     * naming it would read as an explicit choice the author never made.
+     */
     private get resolvedFormatLabel();
     handleAssetIdChange(): Promise<void>;
     handleCanAccessChange(): void;

package/library/packages/organisms/src/bento-grid/bento-grid.d.ts

@@ -116,6 +116,19 @@ export default class CxBentoGrid extends CortexElement {
      * Unloaded slots are approximated as 1×1 items.
      */
     totalItems: number;
+    /**
+     * The proxy format the item images were resolved with.
+     *
+     * Only used to decide whether a `srcset` may be generated: an original-file format
+     * paired with an animated source must be delivered untouched.
+     */
+    format: string;
+    /**
+     * Whether `format` was picked by hand. When false each item's format follows its own
+     * file extension instead, so a mixed grid can serve animated originals and resizable
+     * raster proxies side by side.
+     */
+    manualFormat: boolean;
     /**
      * Delay in milliseconds between releasing one row of images and the next.
      *

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

@@ -72,6 +72,19 @@ export default class CxCarousel extends CortexElement {
      * The real total number of data in the carousel. Not affected by chunking.
      */
     totalData: number;
+    /**
+     * The proxy format the slide images were resolved with.
+     *
+     * Only used to decide whether a `srcset` may be generated: an original-file format
+     * paired with an animated source must be delivered untouched.
+     */
+    format: string;
+    /**
+     * Whether `format` was picked by hand. When false each slide's format follows its own
+     * file extension instead, so a mixed carousel can serve animated originals and
+     * resizable raster proxies side by side.
+     */
+    manualFormat: boolean;
     /**
      * When set, allows the user to navigate the carousel in the same direction indefinitely.
      */

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

@@ -88,6 +88,14 @@ export default class CxSbImage extends CxImage {
      * Asset transformation proxy format key for dark mode.
      */
     formatDarkMode: string;
+    /**
+     * Whether `format` was picked by hand. When false the format follows the asset's file
+     * extension instead, so an animated GIF keeps its original file and everything else
+     * takes the transcoded raster proxy that `srcset` is allowed to resize.
+     */
+    manualFormat: boolean;
+    /** Whether `formatDarkMode` was picked by hand. See `manualFormat`. */
+    manualFormatDarkMode: boolean;
     /**
      * Asset transformations applied to the image.
      */
@@ -163,6 +171,20 @@ export default class CxSbImage extends CxImage {
     private resolvedSrc;
     /** Fresh URL re-resolved when the stored `srcDarkMode` has expired. */
     private resolvedSrcDarkMode;
+    /**
+     * The asset's file extension. Lets an animated GIF opt out of `srcset`, which a
+     * server-side resize would flatten to a still frame.
+     */
+    private assetExtension;
+    /**
+     * Whether an asset fetch has reported back for the current record.
+     *
+     * Tracked separately from `assetExtension` because "no extension" is a legitimate
+     * answer — a missing asset or a record without the field both yield an empty string.
+     * Gating on the empty string alone would hold `srcset` back forever in those cases;
+     * gating on this flag releases it as soon as the answer is in, whatever it says.
+     */
+    private hasResolvedAssetExtension;
     /**
      * Space list supplied by `cx-content-builder-viewer`, which fetches it once per
      * surface. The only source — this block never fetches the list itself.
@@ -193,6 +215,24 @@ export default class CxSbImage extends CxImage {
     get currentRecordId(): string;
     get currentSrc(): string;
     get currentTransformations(): Transformation[];
+    /** Whether the variant being displayed had its format picked by hand. */
+    get isCurrentFormatManual(): boolean;
+    /**
+     * The proxy format of the variant actually being displayed.
+     *
+     * Under `Auto` the asset's extension decides, so this stays a real proxy name and every
+     * consumer — the transformation URL and `srcset` alike — reads the same resolved value.
+     */
+    get currentFormat(): string;
+    /**
+     * Fields the child `cx-asset-data-display` must fetch for this block.
+     *
+     * The extension is always requested rather than only for the format that can serve
+     * an animated original. Requesting it unconditionally keeps the fetch shape stable
+     * (it does not change when the author switches format) and means `srcset` never has
+     * to wait on a follow-up fetch to learn whether this asset may be resized.
+     */
+    private get requestedAssetFields();
     get highlighterTabindex(): "0" | undefined;
     get highlighterRole(): "button" | "img";
     get highlighterClass(): {
@@ -228,6 +268,12 @@ export default class CxSbImage extends CxImage {
     handleClickSpaceChange(): void;
     handleObjectFitChange(): Promise<void>;
     handleSrcChange(): void;
+    /**
+     * Drops a cached extension once the asset it described is replaced, so a new record
+     * cannot inherit the previous one's answer about whether it may be resized — nor its
+     * resolved flag, which would let `srcset` be built before the new answer arrives.
+     */
+    handleRecordIdChangeForExtension(): void;
     handleFetchedAssetDataChange(): void;
     /**
      * Support CMS5 click action for the image.
@@ -240,6 +286,14 @@ export default class CxSbImage extends CxImage {
      * own `cx-asset-data-display` fetch) into alt text and overlay content.
      */
     private applyFetchedAssetData;
+    /**
+     * Captures the asset's extension from a fetch result and marks the answer as in.
+     *
+     * A blank value leaves any previously known extension in place — a response that
+     * omitted the field says nothing about the asset — but still resolves the wait, so a
+     * record whose extension never arrives does not block `srcset` indefinitely.
+     */
+    private applyExtensionFromAssetData;
     /**
      * A stored space URL breaks once the space moves domain, so the link target is
      * re-resolved against the list the viewer supplies. Without that list the stored

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

@@ -72,6 +72,11 @@ export default class CxSbVideo extends CxVideo {
      * Thumbnail proxy format key (e.g. "webp", "jpg").
      */
     thumbnailFormat: string;
+    /**
+     * Whether `thumbnailFormat` was picked by hand. When false the thumbnail's format
+     * follows the poster asset's file extension instead.
+     */
+    manualThumbnailFormat: boolean;
     /**
      * Transformations applied to the thumbnail image.
      */

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

@@ -27,7 +27,6 @@ import { default as CxTooltip } from '../../../../../atoms/src/components/toolti
 import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
 import { default as CxVisuallyHidden } from '../../../../../atoms/src/components/visually-hidden/visually-hidden.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
-import { CxFontPicker, CxIconPicker } from '../../../../../molecules/src/index.ts';
 import { default as CxAssetFormatPicker } from '../../../../../molecules/src/asset-format-picker/asset-format-picker.ts';
 import { default as CxAssetPicker } from '../../../../../molecules/src/asset-picker/asset-picker.ts';
 import { default as CxBicolorPicker } from '../../../../../molecules/src/bicolor-picker/bicolor-picker.ts';
@@ -36,6 +35,8 @@ import { default as CxConfirmPopover } from '../../../../../molecules/src/confir
 import { default as CxCornerPositionInputGroup } from '../../../../../molecules/src/corner-position-input-group/corner-position-input-group.ts';
 import { default as CxDownloadFormatPicker } from '../../../../../molecules/src/download-format-picker/download-format-picker.ts';
 import { default as CxDynamicSelect } from '../../../../../molecules/src/dynamic-select/dynamic-select.ts';
+import { default as CxFontPicker } from '../../../../../molecules/src/font-picker/font-picker.ts';
+import { default as CxIconPicker } from '../../../../../molecules/src/icon-picker/icon-picker.ts';
 import { default as CxPaddingInputGroup } from '../../../../../molecules/src/padding-input-group/padding-input-group.ts';
 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';

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

@@ -55,6 +55,11 @@ export default class CxGalleryPicker extends CortexElement implements CortexForm
      * The asset format code used to resolve image src URLs.
      */
     format: string;
+    /**
+     * Whether `format` was picked by hand. When false each item's format follows its own
+     * file extension instead.
+     */
+    manualFormat: boolean;
     /**
      * The boundary property of the confirm popover's dropdown/dialog popup.
      */
@@ -69,6 +74,7 @@ export default class CxGalleryPicker extends CortexElement implements CortexForm
     loading: boolean;
     masonryData: Array<{
         alt?: string;
+        extension?: string;
         id: string;
         rawId?: string;
         src?: string;

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

@@ -27,6 +27,7 @@ type Attributes = {
     'highlight-drop-shadow': boolean;
     'item-height': string;
     loop: boolean;
+    'manual-format'?: boolean;
     navigation: string;
     orientation: string;
     'peek-slides': boolean;

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

@@ -29,6 +29,7 @@ type Attribute = {
     'highlight-siblings-fade-out': boolean;
     'item-height': string;
     'large-content-position': GalleryItemContentPosition;
+    'manual-format'?: boolean;
     'max-rows': string;
     navigation: 'both' | 'arrows' | 'pagination';
     orientation: Orientation;

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

@@ -32,6 +32,8 @@ type Attribute = {
     'highlight-border'?: CxImage['highlightBorder'];
     'highlight-color-overlay'?: CxImage['highlightColorOverlay'];
     'highlight-drop-shadow'?: CxImage['highlightDropShadow'];
+    'manual-format'?: CxImage['manualFormat'];
+    'manual-format-dark-mode'?: CxImage['manualFormatDarkMode'];
     'object-fit': CxImage['objectFit'];
     'open-in-new-tab'?: CxImage['openInNewTab'];
     'page-url'?: CxImage['pageUrl'];

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

@@ -4,6 +4,7 @@ import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 type Attributes = {
     data: string;
     format: string;
+    'manual-format'?: boolean;
     'min-tab-width': string;
     'multi-language': boolean;
     'navigation-arrows': boolean;

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

@@ -30,6 +30,7 @@ type Attribute = {
     height: CxVideo['height'];
     'height-mode': CxVideo['heightMode'];
     loop: CxVideo['loop'];
+    'manual-thumbnail-format'?: boolean;
     name: CxVideo['name'];
     'name-source-field': CxVideo['nameSourceField'];
     'open-in-new-tab'?: CxVideo['openInNewTab'];

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

@@ -70,6 +70,7 @@ export default class ConfigsController {
         'highlight-drop-shadow': boolean;
         'item-height': string;
         loop: boolean;
+        'manual-format'?: boolean;
         navigation: string;
         orientation: string;
         'peek-slides': boolean;
@@ -204,6 +205,7 @@ export default class ConfigsController {
         'highlight-siblings-fade-out': boolean;
         'item-height': string;
         'large-content-position': import('../../../types/src/highlightable-element').HighlightableElementContentPosition;
+        'manual-format'?: boolean;
         'max-rows': string;
         navigation: "both" | "arrows" | "pagination";
         orientation: import('../../../types/src/index.ts').Orientation;
@@ -264,6 +266,8 @@ export default class ConfigsController {
         'highlight-border'?: import('./blocks/image/image').default["highlightBorder"];
         'highlight-color-overlay'?: import('./blocks/image/image').default["highlightColorOverlay"];
         'highlight-drop-shadow'?: import('./blocks/image/image').default["highlightDropShadow"];
+        'manual-format'?: import('./blocks/image/image').default["manualFormat"];
+        'manual-format-dark-mode'?: import('./blocks/image/image').default["manualFormatDarkMode"];
         'object-fit': import('./blocks/image/image').default["objectFit"];
         'open-in-new-tab'?: import('./blocks/image/image').default["openInNewTab"];
         'page-url'?: import('./blocks/image/image').default["pageUrl"];
@@ -299,6 +303,7 @@ export default class ConfigsController {
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         data: string;
         format: string;
+        'manual-format'?: boolean;
         'min-tab-width': string;
         'multi-language': boolean;
         'navigation-arrows': boolean;
@@ -332,6 +337,7 @@ export default class ConfigsController {
         height: import('./blocks/video/video').default["height"];
         'height-mode': import('./blocks/video/video').default["heightMode"];
         loop: import('./blocks/video/video').default["loop"];
+        'manual-thumbnail-format'?: boolean;
         name: import('./blocks/video/video').default["name"];
         'name-source-field': import('./blocks/video/video').default["nameSourceField"];
         'open-in-new-tab'?: import('./blocks/video/video').default["openInNewTab"];
@@ -412,6 +418,7 @@ export default class ConfigsController {
         'highlight-drop-shadow': boolean;
         'item-height': string;
         loop: boolean;
+        'manual-format'?: boolean;
         navigation: string;
         orientation: string;
         'peek-slides': boolean;
@@ -543,6 +550,7 @@ export default class ConfigsController {
         'highlight-siblings-fade-out': boolean;
         'item-height': string;
         'large-content-position': import('../../../types/src/highlightable-element').HighlightableElementContentPosition;
+        'manual-format'?: boolean;
         'max-rows': string;
         navigation: "both" | "arrows" | "pagination";
         orientation: import('../../../types/src/index.ts').Orientation;
@@ -575,6 +583,7 @@ export default class ConfigsController {
     } | {
         data: string;
         format: string;
+        'manual-format'?: boolean;
         'min-tab-width': string;
         'multi-language': boolean;
         'navigation-arrows': boolean;
@@ -608,6 +617,7 @@ export default class ConfigsController {
         height: import('./blocks/video/video').default["height"];
         'height-mode': import('./blocks/video/video').default["heightMode"];
         loop: import('./blocks/video/video').default["loop"];
+        'manual-thumbnail-format'?: boolean;
         name: import('./blocks/video/video').default["name"];
         'name-source-field': import('./blocks/video/video').default["nameSourceField"];
         'open-in-new-tab'?: import('./blocks/video/video').default["openInNewTab"];

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

@@ -59,6 +59,7 @@ export default class StyleController {
             defaultFormat?: string;
             dialogLabel?: string;
             formatKey?: string;
+            manualFormatKey?: string;
             multiple?: boolean;
             noCrop?: boolean;
             noResize?: boolean;
@@ -102,6 +103,7 @@ export default class StyleController {
         galleryPickerConfigs?: {
             dialog: import('../../../types/src/content-builder').DialogType;
             formatKey?: string;
+            manualFormatKey?: string;
             transformationRecordIdKey?: string;
             transformationsKey?: string;
         };