@orangelogic/design-system 4.38.0 → 4.40.0

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

@@ -1,12 +1,17 @@
 import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.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 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 { default as CxCropper } from '../../../molecules/src/cropper/cropper.ts';
-import { Asset, CropMode, FocusMode, Parameter, Proxy, Transformation, Unit } from '../../../types/src/asset-link-format';
+import { Asset, AssetLinkFormatLayout, AssetLinkFormatPart, CropMode, DimensionsItem, DimensionsValue, FocusMode, Parameter, Proxy, QualityItem, Transformation, Unit } from '../../../types/src/asset-link-format';
 import { PositionPickerValue } from '../../../types/src/position-picker';
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { default as CxAssetLinkFormatCrop } from './components/asset-link-format-crop/asset-link-format-crop';
+import { default as CxAssetLinkFormatDimensions } from './components/asset-link-format-dimensions/asset-link-format-dimensions';
 import { default as CxAssetLinkFormatExtension } from './components/asset-link-format-extension/asset-link-format-extension';
 import { default as CxAssetLinkFormatProxy } from './components/asset-link-format-proxy/asset-link-format-proxy';
 import { default as CxAssetLinkFormatQuality } from './components/asset-link-format-quality/asset-link-format-quality';
@@ -14,16 +19,26 @@ import { default as CxAssetLinkFormatResize } from './components/asset-link-form
 import { default as CxAssetLinkFormatRotation } from './components/asset-link-format-rotation/asset-link-format-rotation';
 import { default as CxAssetLinkFormatMetadata } from './components/asset-link-metadata/asset-link-format-metadata';
 export type CxAssetLinkFormatChangeEvent = CustomEvent<string>;
+type ImageSizeBound = {
+    height: number;
+    width: number;
+};
 /**
  * @summary The `cx-asset-link-format` component is used to format an asset link with various transformations such as cropping, resizing, rotating, and applying quality settings.
  *
+ * Dimensions is a step like the others: its own segment
+ * (`re_w_<width>,re_h_<height>,re_rm_Fit,re_allowupscale_false`) at its place in the chain.
+ * A `Resize` entry stays a Resize.
+ *
+ * Without an asset, the crop's pixel size is capped by the steps above it.
+ *
  * @event `cx-asset-link-format-change` - Emitted when the asset link format is changed.
+ * @event cx-asset-link-format-reorder - Emitted with parts and transformations after a user reorder, Undo or Reset of order.
+ * @event cx-asset-link-format-crop-toggle - Emitted with the enabled state of Crop in the Formats layout.
  *
- * @property {boolean} no-format - When true, hides the format proxy (format selection) panel.
- * @property {boolean} no-metadata - When true, hides the metadata panel.
- * @property {boolean} no-crop - When true, hides the crop panel.
- * @property {boolean} no-resize - When true, hides the resize panel.
- * @property {boolean} no-rotate - When true, hides the rotation panel.
+ * @property {AssetLinkFormatPart[]} parts - Panels to show, in display order (attribute is a
+ * space-separated string, e.g. "proxy crop resize"). Valid tokens: proxy, crop, resize,
+ * rotate, quality, metadata, dimensions.
  *
  * @slot footer - Additional content rendered in normal flow after the transformation controls.
  */
@@ -31,6 +46,7 @@ export default class CxAssetLinkFormat extends CortexElement {
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-asset-link-format-crop': typeof CxAssetLinkFormatCrop;
+        'cx-asset-link-format-dimensions': typeof CxAssetLinkFormatDimensions;
         'cx-asset-link-format-extension': typeof CxAssetLinkFormatExtension;
         'cx-asset-link-format-metadata': typeof CxAssetLinkFormatMetadata;
         'cx-asset-link-format-proxy': typeof CxAssetLinkFormatProxy;
@@ -38,8 +54,12 @@ export default class CxAssetLinkFormat extends CortexElement {
         'cx-asset-link-format-resize': typeof CxAssetLinkFormatResize;
         'cx-asset-link-format-rotation': typeof CxAssetLinkFormatRotation;
         'cx-button': typeof CxButton;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
         'cx-space': typeof CxSpace;
+        'cx-switch': typeof CxSwitch;
         'cx-typography': typeof CxTypography;
+        'cx-visually-hidden': typeof CxVisuallyHidden;
     };
     /**
      * Transform requests must resolve to a web-displayable image (the browser renders the
@@ -48,7 +68,38 @@ export default class CxAssetLinkFormat extends CortexElement {
      * extension fallback in asset-transformation-dialog.
      */
     private static getTransformExtension;
+    /**
+     * Keep the last value for each type, at that type's first position.
+     */
+    static uniqueTransformations(transformations: Transformation[]): Transformation[];
+    /**
+     * Reorder visible operations only; hidden operations and fixed types keep their slots.
+     */
+    static orderTransformations(transformations: Transformation[], parts: AssetLinkFormatPart[]): Transformation[];
+    /**
+     * The size of a `<width>_<height>` or `<width>x<height>` preset; undefined for others (`original`).
+     */
+    static getDimensionsPresetSize(presetValue: string): {
+        height: number;
+        width: number;
+    } | undefined;
+    /**
+     * The pixel size a Dimensions choice fits into; undefined for a sizeless preset or a percent size.
+     */
+    static getDimensionsSize(dimensionsChoice?: DimensionsValue): {
+        height: number;
+        width: number;
+    } | undefined;
+    /**
+     * The largest image size after `step` (undefined: unknown). A pixel Resize sets it, Dimensions caps
+     * it, Rotate turns it (bounding box), an aspect-ratio Resize makes it unknown.
+     */
+    static getSizeBoundAfterStep(bound: ImageSizeBound | undefined, step: Transformation): ImageSizeBound | undefined;
     private readonly localize;
+    private readonly initialParts;
+    private sortable?;
+    private sortableRevision;
+    private dragPreviousSibling;
     /**
      * The base URL for the asset service.
      * This URL is used to fetch the asset link and apply transformations.
@@ -125,17 +176,47 @@ export default class CxAssetLinkFormat extends CortexElement {
      */
     autoFormat: boolean;
     useCustomExtension: boolean;
-    noMetadata: boolean;
-    noFormat: boolean;
-    noCrop: boolean;
-    noResize: boolean;
-    noRotate: boolean;
+    /**
+     * Space-separated list of panels to show, in display order (e.g. "proxy crop resize").
+     * Valid tokens: proxy, dimensions, crop, resize, rotate, quality, metadata.
+     */
+    parts: AssetLinkFormatPart[];
+    /**
+     * The accordion UI (default) or the always-visible Formats UI.
+     */
+    layout: AssetLinkFormatLayout;
+    /**
+     * Whether the inline Crop controls are enabled in the Formats layout.
+     */
+    cropEnabled: boolean;
+    /**
+     * Allow reordering Crop, Resize, Rotate and Quality. Only effective without an asset.
+     */
+    reorderable: boolean;
+    /**
+     * Dimensions presets in display order, with unique values; items of one group share a heading.
+     * A `<width>_<height>` or `<width>x<height>` value is a pixel size; others (`original`) set none.
+     */
+    dimensionsItems: DimensionsItem[];
+    /**
+     * Optional Quality presets. An empty list preserves the numeric input UI.
+     * In the Formats layout, a preset applies on selection and Custom applies on the input's `cx-change`,
+     * with no Apply button; in the Accordion layout, both apply through the Apply button.
+     */
+    qualityItems: QualityItem[];
+    /**
+     * Include Custom (a width and height in pixels or percent) in the Dimensions dropdown.
+     * A percent size writes no segment.
+     */
+    canCustomDimensions: boolean;
     lastImageSize: {
         height: number;
         width: number;
     };
     hideHeader: boolean;
-    /** Show a Reset button in the header that clears all transformations. Supports one Undo step after reset. */
+    /**
+     * Show a Reset button in the header that clears all transformations. Supports one Undo step after reset.
+     */
     canReset: boolean;
     queryElement: HTMLElement | null;
     /**
@@ -204,13 +285,29 @@ export default class CxAssetLinkFormat extends CortexElement {
      */
     private lastAction;
     private frozenIndex;
-    /** Snapshot saved on Reset to allow one Undo step back to the pre-reset state. */
+    /**
+     * 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. */
+    /**
+     * The `Auto` state saved alongside `preResetTransformations`, restored by the same Undo.
+     */
     private preResetAutoFormat;
-    /** The proxy saved alongside `preResetAutoFormat`, so Undo restores the pair together. */
+    /**
+     * 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 reorderAnnouncement;
+    /**
+     * The Dimensions dropdown's choice, kept in step with the Dimensions transformation.
+     */
+    private selectedDimensions?;
+    private orderUndo;
+    private get canReorder();
+    private get isFormatsLayout();
+    /**
+     * True when there are transformations beyond the frozen index (i.e. user has added new ones).
+     */
     private get hasUnfrozenTransformations();
     private apiGetTransformAssetLink;
     private transformRequest?;
@@ -245,10 +342,23 @@ export default class CxAssetLinkFormat extends CortexElement {
      * This is derived from the `proxies` property, filtering out any proxies that have a `cdnName`.
      */
     get formats(): Proxy[];
+    /**
+     * Parses `parts` into the ordered, de-duplicated list of valid panel tokens to render.
+     * Unknown tokens are filtered out.
+     */
+    private get activeParts();
     get imageSize(): {
         height: number;
         width: number;
     };
+    /**
+     * The steps before the crop, or before where a new crop would be inserted.
+     */
+    private get stepsBeforeCrop();
+    /**
+     * Without an asset, the largest crop the image can take; Infinity when unknown.
+     */
+    private get cropMaxSize();
     /**
      * Returns the last crop size based on the transformations applied to the asset link.
      * This is calculated by iterating through the transformations and applying the last crop, resize, or rotate transformation to the default size of the asset.
@@ -291,6 +401,9 @@ export default class CxAssetLinkFormat extends CortexElement {
             unit: Unit;
             width: number;
         };
+        /**
+         * See lastCropSize's equivalent branch for why this falls back to 1x1, not 0x0.
+         */
         px: {
             height: number;
             unit: Unit;
@@ -313,6 +426,7 @@ export default class CxAssetLinkFormat extends CortexElement {
     constructor();
     runConnectedCallback(): void;
     disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
     updated(changedProperties: PropertyValues): void;
     getCropSize(): {
         cropMode: string;
@@ -329,7 +443,9 @@ export default class CxAssetLinkFormat extends CortexElement {
         x: number;
         y: number;
     };
-    /** Captures the current request synchronously; later edits cannot change Save's ratio. */
+    /**
+     * Captures the current request synchronously; later edits cannot change Save's ratio.
+     */
     getAppliedAspectRatio(): Promise<number | undefined>;
     private get transformRequestOptions();
     private getTransformRequest;
@@ -337,7 +453,18 @@ export default class CxAssetLinkFormat extends CortexElement {
     setActiveSetting(activeSetting: string): void;
     private freezeTransformations;
     private upsertTransformation;
-    handleTransformationsChange(): Promise<void>;
+    /**
+     * Whether `crop` holds the size the Crop panel shows: the panel's own Apply, not a crop from
+     * outside (restored transformations, Undo, Reset).
+     */
+    private isCropPanelSize;
+    /**
+     * Caps the applied pixel crop at `cropMaxSize`, as the crop inputs do, after a step above it shrank
+     * that size. Otherwise the inputs show the capped size while the saved crop keeps the larger one.
+     * The Crop panel follows, keeping its ratio mode only when both sides shrink by the same factor.
+     */
+    private capCropToMaxSize;
+    handleTransformationsChange(previous?: unknown): Promise<void>;
     private handleCropperElementChange;
     private handleCropperSelectorChange;
     private handleAssetChange;
@@ -355,6 +482,13 @@ export default class CxAssetLinkFormat extends CortexElement {
     private handleResizeSizeChange;
     private handleCropSizeChange;
     private handleRotationChange;
+    handlePartsChange(): void;
+    handleReorderableChange(): void;
+    private syncSortable;
+    private rememberOrder;
+    private emitReorder;
+    private movePart;
+    private handleReorderKeyDown;
     private handleActiveSettingChange;
     private handleRequestAutoCropSuggestion;
     private onCropComplete;
@@ -376,14 +510,21 @@ export default class CxAssetLinkFormat extends CortexElement {
     private onCropChange;
     private onCropChanged;
     private onCropApply;
+    private applyCropTransformation;
     private onResizeChange;
     private onResizeApply;
     private onRotationChange;
     private onRotationApply;
+    private applyRotationTransformation;
     private onQualityChange;
     private onMetadataChange;
     private onExtensionChange;
     private syncQuality;
+    /**
+     * Points the Dimensions dropdown at the Dimensions step: its preset, else Custom. A same-size
+     * choice is kept, except when the presets change: Cortex assigns them after the first render.
+     */
+    private syncSelectedDimensions;
     /**
      * Whether there is anything for Reset to undo.
      *
@@ -400,6 +541,22 @@ export default class CxAssetLinkFormat extends CortexElement {
     private clearResetSnapshot;
     private handleUndo;
     private handleReset;
+    /**
+     * A sized choice writes the Dimensions step; a sizeless one (Original) removes it.
+     */
+    private onDimensionsChange;
+    private onCropToggle;
+    private renderDimensionsPart;
+    private renderHeader;
+    private renderOrderHint;
+    private renderProxyPart;
+    private renderCropEditor;
+    private renderCropPart;
+    private renderResizePart;
+    private renderRotatePart;
+    private renderQualityPart;
+    private renderMetadataPart;
+    private renderPart;
     render(): TemplateResult;
 }
 declare global {
@@ -410,3 +567,4 @@ declare global {
         'cx-asset-link-format-change': CxAssetLinkFormatChangeEvent;
     }
 }
+export {};

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

@@ -49,6 +49,7 @@ export type CxAssetLinkFormatCropPositionChangeEvent = CustomEvent<{
  *
  * @property {boolean} no-ratio-modes - When true, hides the ratio mode select (Free, Widescreen, Square, etc.) and the unit select (Pixels / Aspect Ratio).
  * @property {boolean} show-position-picker - When true, shows the position picker grid right after the focus mode select, while `focusMode` is 'manual'.
+ * @property {boolean} inline - When true, keeps the controls visible without an accordion header or Apply button.
  * @property {string} position - The selected anchor position from the position picker (e.g. top-left, center-center).
  */
 export default class CxAssetLinkFormatCrop extends CortexElement {
@@ -82,6 +83,10 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
      * The open state of the details section.
      */
     open: boolean;
+    /**
+     * Render the controls as always-visible content without an Apply button.
+     */
+    inline: boolean;
     /**
      * The width of the asset to be cropped.
      */
@@ -226,6 +231,11 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
      */
     private onHideDetails;
     private handleAspectRatioClick;
+    /**
+     * The mask of a size input: whole numbers from 1. In pixels it also stops at `max`, and `autofix`
+     * turns a larger number into `max` as it is typed. Ratio values and an unknown (0) max have no cap.
+     */
+    private getSizeMaskBlocks;
     render(): TemplateResult;
 }
 declare global {

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

@@ -0,0 +1,103 @@
+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 CxInput } from '../../../../../atoms/src/components/input/input.ts';
+import { default as CxMenuLabel } from '../../../../../atoms/src/components/menu-label/menu-label.ts';
+import { default as CxOption } from '../../../../../atoms/src/components/option/option.ts';
+import { default as CxSelect } from '../../../../../atoms/src/components/select/select.ts';
+import { default as CxSpace } from '../../../../../atoms/src/components/space/space.ts';
+import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
+import { AssetLinkFormatApplyBehavior, DimensionsItem, DimensionsValue } from '../../../../../types/src/asset-link-format';
+import { CSSResultGroup, TemplateResult } from 'lit';
+export type CxAssetLinkFormatDimensionsChangeEvent = CustomEvent<DimensionsValue>;
+/**
+ * @summary Select a dimensions preset or a custom maximum width and height, in pixels or percent.
+ * @event cx-asset-link-format-dimensions-change - Emitted with the selected dimensions value.
+ * `cx-asset-link-format` turns it into its Dimensions transformation.
+ * @csspart icon - The summary icon.
+ * @csspart input-label - The width and height prefixes.
+ */
+export default class CxAssetLinkFormatDimensions extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-details': typeof CxDetails;
+        'cx-divider': typeof CxDivider;
+        'cx-icon': typeof CxIcon;
+        'cx-input': typeof CxInput;
+        'cx-menu-label': typeof CxMenuLabel;
+        'cx-option': typeof CxOption;
+        'cx-select': typeof CxSelect;
+        'cx-space': typeof CxSpace;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    /**
+     * Expand the settings panel.
+     */
+    open: boolean;
+    /**
+     * Render the section as always-visible content instead of an accordion.
+     */
+    inline: boolean;
+    /**
+     * Controls whether edits emit immediately or wait for an explicit Apply action.
+     * Legacy preserves the original immediate Dimensions behavior.
+     */
+    applyBehavior: AssetLinkFormatApplyBehavior;
+    /**
+     * Disable editing while processing.
+     */
+    loading: boolean;
+    /**
+     * Presets in display order, with unique values and optional groups.
+     */
+    items: DimensionsItem[];
+    /**
+     * Offer custom width and height controls.
+     */
+    canCustom: boolean;
+    /**
+     * Selected preset or custom size. Undefined means no selection.
+     */
+    value?: DimensionsValue;
+    /**
+     * The custom unit the user picked.
+     */
+    private customDimensionsUnit;
+    /**
+     * The dropdown's selection: `preset:<value>`, `custom`, or empty.
+     */
+    private dimensionsSelection;
+    /**
+     * The custom width and height as typed, per unit, kept while another option is selected.
+     */
+    private customDimensionsDrafts;
+    handleDimensionsValueChange(): void;
+    private emitDimensionsValue;
+    private getCustomDimensionsValue;
+    private get pendingValue();
+    private get applyDisabled();
+    private applyPendingValue;
+    private onDimensionsSelectChange;
+    private onDimensionsInput;
+    private onDimensionsCustomChange;
+    private onDimensionsUnitChange;
+    private onApply;
+    private onDimensionsShow;
+    private onDimensionsHide;
+    private renderCustomDimensions;
+    private renderSummary;
+    private renderContent;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-asset-link-format-dimensions': CxAssetLinkFormatDimensions;
+    }
+    interface GlobalEventHandlersEventMap {
+        'cx-asset-link-format-dimensions-change': CxAssetLinkFormatDimensionsChangeEvent;
+    }
+}

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

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

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

@@ -1,11 +1,15 @@
 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 CxInput } from '../../../../../atoms/src/components/input/input.ts';
+import { default as CxOption } from '../../../../../atoms/src/components/option/option.ts';
+import { default as CxSelect } from '../../../../../atoms/src/components/select/select.ts';
 import { default as CxSpace } from '../../../../../atoms/src/components/space/space.ts';
 import { default as CxTooltip } from '../../../../../atoms/src/components/tooltip/tooltip.ts';
 import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
+import { AssetLinkFormatApplyBehavior, QualityItem } from '../../../../../types/src/asset-link-format';
 import { CSSResultGroup, TemplateResult } from 'lit';
 export type CxAssetLinkFormatQualityChangeEvent = CustomEvent<number>;
 /**
@@ -18,8 +22,11 @@ export default class CxAssetLinkFormatQuality extends CortexElement {
     static readonly dependencies: {
         'cx-button': typeof CxButton;
         'cx-details': typeof CxDetails;
+        'cx-divider': typeof CxDivider;
         'cx-icon': typeof CxIcon;
         'cx-input': typeof CxInput;
+        'cx-option': typeof CxOption;
+        'cx-select': typeof CxSelect;
         'cx-space': typeof CxSpace;
         'cx-tooltip': typeof CxTooltip;
         'cx-typography': typeof CxTypography;
@@ -35,12 +42,29 @@ export default class CxAssetLinkFormatQuality extends CortexElement {
      * @default false
      */
     open: boolean;
+    /**
+     * Render the section as always-visible content instead of an accordion.
+     */
+    inline: boolean;
+    /**
+     * Controls whether edits emit immediately or wait for an explicit Apply action.
+     * Automatic: a preset emits on selection; Custom has no Apply button and emits on the input's `cx-change`.
+     * Manual: nothing emits until the Apply button below the controls.
+     * Legacy: a preset emits on selection; Custom keeps the Apply button beside the input.
+     */
+    applyBehavior: AssetLinkFormatApplyBehavior;
     /**
      * The value of the input quality.
      * This value represents the quality of the asset link format, ranging from 1 to 100.
      * @default 100
      */
     value: number;
+    /**
+     * Optional presets with unique values. Custom always offers the existing input.
+     * An empty list preserves the input-only UI.
+     */
+    items: QualityItem[];
+    private customSelected;
     /**
      * The loading state of the component.
      * This is used to indicate that an operation is in progress, such as applying a new quality value.
@@ -55,7 +79,9 @@ export default class CxAssetLinkFormatQuality extends CortexElement {
      */
     get invalidValue(): boolean;
     handleValueChange(): void;
+    private handlePresetChange;
     private handleQualityChange;
+    private handleQualityCommit;
     /**
      * Handles the application of the input quality.
      * This method emits a custom event with the input quality when the "Apply" button is clicked.
@@ -74,6 +100,10 @@ export default class CxAssetLinkFormatQuality extends CortexElement {
      * This ensures that the details section is only hidden when the user interacts with the base element.
      */
     private onHideDetails;
+    private renderPresets;
+    private renderSummary;
+    private renderApplyButton;
+    private renderContent;
     render(): TemplateResult;
 }
 declare global {

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

@@ -37,6 +37,10 @@ export default class CxAssetLinkFormatRotation extends CortexElement {
      * @default false
      */
     open: boolean;
+    /**
+     * Render the section as always-visible content without an Apply button.
+     */
+    inline: boolean;
     /**
      * The value of the defined quality.
      * This value represents the quality of the asset link format, ranging from 1 to 100.
@@ -73,6 +77,8 @@ export default class CxAssetLinkFormatRotation extends CortexElement {
      * It prevents further actions if the component is currently loading.
      */
     private handleApply;
+    private renderSummary;
+    private renderControls;
     render(): TemplateResult;
 }
 declare global {

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

@@ -9,7 +9,7 @@ import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tool
 import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { default as CxCropper } from '../../../molecules/src/cropper/cropper.ts';
-import { Transformation } from '../../../types/src/asset-link-format';
+import { AssetLinkFormatPart, Transformation } from '../../../types/src/asset-link-format';
 import { default as CxAssetLinkFormat } from '../asset-link-format/asset-link-format';
 /**
  * @summary Dialog that wraps `cx-cropper` and `cx-asset-link-format` side by side,
@@ -74,12 +74,12 @@ export default class CxAssetTransformationDialog extends CortexElement {
     transformations: Transformation[];
     /** Show stack of layers indicating the transformations will be applied to multiple assets. */
     multiple: boolean;
-    /** Hide the crop panel inside cx-asset-link-format. */
-    noCrop: boolean;
-    /** Hide the resize panel inside cx-asset-link-format. */
-    noResize: boolean;
-    /** Hide the rotate panel inside cx-asset-link-format. */
-    noRotate: boolean;
+    /**
+     * Panels to show inside cx-asset-link-format, in display order. Forwarded directly to its
+     * `parts` property. The metadata panel is omitted from the default, matching this dialog's
+     * previous hardcoded `no-metadata` behavior.
+     */
+    parts: AssetLinkFormatPart[];
     /** Show a Reset button inside cx-asset-link-format that clears all transformations. */
     canReset: boolean;
     /** When true, uses the Site Builder search endpoint for asset fetching. */

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

@@ -61,9 +61,7 @@ export default class StyleController {
             formatKey?: string;
             manualFormatKey?: string;
             multiple?: boolean;
-            noCrop?: boolean;
-            noResize?: boolean;
-            noRotate?: boolean;
+            parts?: import('../../../types/src/asset-link-format').AssetLinkFormatPart[];
             recordsKey?: string;
             srcKey?: string;
         };