@orangelogic/design-system 4.3.0 → 4.4.0

package/library/package.json

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

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

@@ -69,6 +69,10 @@ export default class CxImage extends ResizableElement {
      * The path to the image to load.
      */
     src: string;
+    /** Intrinsic width / height used to reserve space while loading with Height Auto.
+     * @defaultValue 0
+     */
+    aspectRatio: number;
     /**
      * Candidate sources for the underlying `<img>`, as a standard `srcset` value
      * (e.g. `"…/re_w_400/img.jpg 400w, …/re_w_800/img.jpg 800w"`).
@@ -179,6 +183,18 @@ export default class CxImage extends ResizableElement {
         'highlightable-item': boolean;
         'highlightable-item--effect-text-reveal': boolean;
     };
+    protected get currentAspectRatio(): number;
+    private get loadingAspectRatio();
+    getHighlighterClass(isError?: boolean): {
+        'highlighter--loading-ratio': boolean;
+        highlighter: boolean;
+        'highlighter--background': boolean;
+        'highlighter--border': boolean;
+        'highlighter--centered': boolean;
+        'highlighter--color-overlay': boolean;
+        'highlighter--drop-shadow': boolean;
+        'highlighter--opacity': boolean;
+    };
     get imageClass(): {
         [x: string]: boolean;
         image: boolean;

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

@@ -155,6 +155,11 @@ export default class CxVideo extends ResizableElement {
     protected removeVideoEventListeners(): void;
     attachSeekbar(): void;
     private applyBigPlayButtonVisibility;
+    /**
+     * Keeps the big play button centered in the visible video content rather than
+     * the full player when object-fit leaves empty space around the video.
+     */
+    private updateBigPlayButtonPosition;
     protected setupVideoJsPlayer(src?: string): Promise<void>;
     handleLoopChange(): Promise<void>;
     handleMutedChange(): Promise<void>;
@@ -163,6 +168,7 @@ export default class CxVideo extends ResizableElement {
     handleDisableRemotePlaybackChange(): Promise<void>;
     handleDisableVolumePanelChange(): Promise<void>;
     handleHideBigPlayButtonChange(): Promise<void>;
+    handleVideoPlacementChange(): void;
     handlePosterChange(): Promise<void>;
     handleFormattedPosterChange(): Promise<void>;
     handleSrcChange(): Promise<void>;

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

@@ -1,6 +1,8 @@
 import { Transformation } from '../../types/src/asset-link-format';
 
 export type CxAssetTransformationDialogConfirmEvent = CustomEvent<{
+    /** Width / height from the applied transformation response, when available. */
+    aspectRatio?: number;
     format: string;
     /** False when the format follows the asset's file extension instead of an explicit pick. */
     manualFormat: boolean;

package/library/packages/molecules/src/icon-picker/icon-picker.d.ts

@@ -175,14 +175,13 @@ export default class CxIconPicker extends CortexElement {
      * re-focuses on a timer), so a focus-driven load would re-fire long after
      * the dropdown closed.
      *
-     * The early return matters too: cx-after-show fires on every open, and
-     * chaining onto the already-settled promise would land a requestUpdate()
-     * a microtask into the open sequence, re-rendering the virtualizer while
-     * cx-select is still animating open with its document mousedown/focusin
-     * listeners armed — which intermittently closed the dropdown right after
-     * it appeared.
+     * The virtualizer waits for the first catalog request to settle before it
+     * mounts. Mounting it with an empty item set can leave its visible range
+     * empty until the user scrolls. The open-state guard also prevents a late
+     * request from mounting the list after the control has already closed.
      */
     private ensureIconsData;
+    private showVirtualizerWhenReady;
     private handleSelectShow;
     private handleSelectHide;
     private handleDropdownShow;

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

@@ -212,6 +212,7 @@ export default class CxAssetLinkFormat extends CortexElement {
     /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
     private get hasUnfrozenTransformations();
     private apiGetTransformAssetLink;
+    private transformRequest?;
     private apiGetCropFocusMode;
     /**
      * The unit of the last applied crop transformation, for the no-asset case only. Reflects
@@ -327,6 +328,11 @@ export default class CxAssetLinkFormat extends CortexElement {
         x: number;
         y: number;
     };
+    /** Captures the current request synchronously; later edits cannot change Save's ratio. */
+    getAppliedAspectRatio(): Promise<number | undefined>;
+    private get transformRequestOptions();
+    private getTransformRequest;
+    private requestTransformAsset;
     setActiveSetting(activeSetting: string): void;
     private freezeTransformations;
     private upsertTransformation;

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; 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 {{ detail: { aspectRatio?: number; format: string; manualFormat: boolean; transformations: Transformation[] } }} cx-asset-transformation-dialog-confirm - Emitted when the user saves, with the applied image ratio, resolved proxy id, whether that id was picked by hand, 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 {
@@ -91,6 +91,10 @@ export default class CxAssetTransformationDialog extends CortexElement {
     private proxies;
     /** False while the authorization check is in flight or after it confirms no access. */
     private canAccess;
+    private saving;
+    /** Seeds one editing session; subsequent Apply changes belong to the child. */
+    private initialDraft;
+    private editSession;
     /**
      * Whether the author changed anything away from the block's defaults, which is what the
      * Reset control acts on.

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

@@ -5,7 +5,7 @@ import { Transformation } from '../../../../../types/src/asset-link-format';
 import { TeamSpace } from '../../../../../types/src/content-builder';
 import { ContentType } from '../../../../../types/src/gallery';
 import { HighlightableElementContentPosition } from '../../../../../types/src/highlightable-element';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 
 /**
  * @summary Images are wrappers for img elements with built-in lazy loading, skeleton, and fallback support.
@@ -25,7 +25,7 @@ import { TemplateResult } from 'lit';
  * @cssproperty --border-radius - The border-radius of the image.
  * @cssproperty --border - The border of the image.
  *
- * @event cx-load - Emitted when the image has loaded.
+ * @event cx-load - Emitted on each successful image load, including subsequent srcset candidate loads. May fire multiple times for the same block.
  * @event cx-error - Emitted when the image has failed to load.
  * @event cx-image-zoom-open - Emitted when the image zoom is opened.
  * @event cx-image-zoom-close - Emitted when the image zoom is closed.
@@ -96,6 +96,8 @@ export default class CxSbImage extends CxImage {
     manualFormat: boolean;
     /** Whether `formatDarkMode` was picked by hand. See `manualFormat`. */
     manualFormatDarkMode: boolean;
+    /** Saved intrinsic width / height for the dark image. */
+    aspectRatioDarkMode: number;
     /**
      * Asset transformations applied to the image.
      */
@@ -155,6 +157,7 @@ export default class CxSbImage extends CxImage {
      * delivery URL from the `path_*` fields here rather than searching for one.
      */
     fetchedAssetData: Record<string, unknown>;
+    private renderedImageSrc;
     /**
      * Indicates whether the image is currently zoomed.
      */
@@ -221,7 +224,7 @@ export default class CxSbImage extends CxImage {
      * getters key off this single predicate so alt, recordId, transformations and
      * click handlers stay aligned with whichever image is actually being displayed.
      */
-    private get useDarkVariant();
+    get useDarkVariant(): boolean;
     get currentAltValue(): string;
     get currentRecordId(): string;
     get currentSrc(): string;
@@ -274,6 +277,7 @@ export default class CxSbImage extends CxImage {
         image: boolean;
         'image--hidden': boolean;
     };
+    protected get currentAspectRatio(): number;
     /**
      * Whether the image have zoom action.
      */
@@ -302,6 +306,8 @@ export default class CxSbImage extends CxImage {
      */
     handleRecordIdChangeForExtension(): void;
     handleFetchedAssetDataChange(): void;
+    protected update(changedProps: PropertyValues): void;
+    protected handleLoad(event: Event): void;
     /**
      * Support CMS5 click action for the image.
      */
@@ -356,6 +362,7 @@ export default class CxSbImage extends CxImage {
      */
     private recoverExpiredSources;
     private recoverExpiredSource;
+    private get renderedSrc();
     protected renderContent(): TemplateResult;
     render(): TemplateResult;
 }

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

@@ -16,7 +16,7 @@ type Attribute = {
 };
 declare const _default: {
     configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
-    defaultValue: Attribute;
+    defaultValue: Partial<Attribute>;
     stylable: string[];
 };
 export default _default;

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

@@ -5,6 +5,8 @@ import { default as CxImage } from '../blocks/image/image';
 type Attribute = {
     'additional-fields': string;
     'alt-source-field': CxImage['altSourceField'];
+    'aspect-ratio': CxImage['aspectRatio'];
+    'aspect-ratio-dark-mode': CxImage['aspectRatioDarkMode'];
     'click-action': CxImage['clickAction'];
     'click-link'?: CxImage['clickLink'];
     'click-page'?: CxImage['clickPage'];

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

@@ -310,6 +310,8 @@ export default class ConfigsController {
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'additional-fields': string;
         'alt-source-field': import('./blocks/image/image').default["altSourceField"];
+        'aspect-ratio': import('./blocks/image/image').default["aspectRatio"];
+        'aspect-ratio-dark-mode': import('./blocks/image/image').default["aspectRatioDarkMode"];
         'click-action': import('./blocks/image/image').default["clickAction"];
         'click-link'?: import('./blocks/image/image').default["clickLink"];
         'click-page'?: import('./blocks/image/image').default["clickPage"];
@@ -704,6 +706,17 @@ export default class ConfigsController {
         variant: import('../../../types/src/gallery').GalleryVariant;
         width: string;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
+    }> | Partial<{
+        alignment: import('../../../types/src/header').Alignment;
+        'custom-line-height': boolean;
+        'data-constraints': boolean;
+        'disabled-copy-button': boolean;
+        'font-size': string;
+        'font-size-desktop': string;
+        'font-size-tablet': string;
+        'has-anchor-link': boolean;
+        role: string;
+        variant: import('../../../types/src/header').Variant;
     }> | {
         name: string;
         'page-id': string;

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

@@ -55,6 +55,7 @@ export default class StyleController {
             versionLabelKey?: string;
         };
         assetTransformationConfigs?: {
+            aspectRatioKey?: string;
             assetIdKey?: string;
             defaultFormat?: string;
             dialogLabel?: string;
@@ -144,6 +145,7 @@ export default class StyleController {
         multiple?: boolean;
         pickerConfigs?: {
             accepts?: string[];
+            aspectRatioKey?: string;
             defaultFormat?: string;
             multiple?: boolean;
             nameKey?: string;

package/library/packages/organisms/src/form/control-renderer/control-renderer.d.ts

@@ -157,6 +157,12 @@ export declare class ControlRenderer {
      * `cx-asset-transformation-dialog`.
      */
     private resolveAssetFormatSrc;
+    /** Resolves the URL and intrinsic ratio from the same selected media field. */
+    resolveAssetFormat(recordId: string, format: string): Promise<{
+        aspectRatio: number;
+        src: string;
+    }>;
+    private getResolvedImage;
     renderControl({ blockAttributes, container, currentValue, disabled, handleChange, key, label, trait, }: {
         blockAttributes: Record<string, any>;
         container?: Ref<HTMLElement>;

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

@@ -65,6 +65,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
         versionLabelKey?: string;
     };
     assetTransformationConfigs?: {
+        /** Attribute that stores the transformed image's width / height. */
+        aspectRatioKey?: string;
         assetIdKey?: string;
         defaultFormat?: string;
         dialogLabel?: string;
@@ -185,6 +187,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
     options?: Option[];
     pickerConfigs?: {
         accepts?: string[];
+        /** Attribute that stores the selected image's width / height. */
+        aspectRatioKey?: string;
         /** The format code used to resolve a preview src immediately after picking an image (before the user configures a format). */
         defaultFormat?: string;
         multiple?: boolean;
@@ -400,8 +404,6 @@ export declare enum DataSourceId {
     TranslatableTexts = "TRANSLATABLE_TEXTS"
 }
 export type ConfigsOptions = {
-    enableAssetFormatControls?: boolean;
-    enableFontFamilyControls?: boolean;
     /**
      * Variants of the font the block's container resolves for it — a font kit's
      * rows. Present means the block sits inside such a container, so its font
@@ -409,6 +411,8 @@ export type ConfigsOptions = {
      * styles, and writes every other option explicitly.
      */
     containerFontVariants?: FontFamily[];
+    enableAssetFormatControls?: boolean;
+    enableFontFamilyControls?: boolean;
 };
 /**
  * Well-known editable sections of a content-builder canvas. The page content is the implicit

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -1038,6 +1038,7 @@ export interface Translation extends DefaultTranslation {
     specialCharacters: string;
     specialCharactersEmpty: string;
     specificWidthInPixelsOrPercentage: string;
+    specifiedWidthAsPercentageOfContainer: string;
     specifiedWidthInPixels: string;
     speed: string;
     spellcheck: string;

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

@@ -2914,6 +2914,10 @@
           * The path to the image to load.
         */
         src?: string;
+        /**
+          * Intrinsic width / height used to reserve space while loading with Height Auto. <br/>@defaultValue 0
+        */
+        aspectRatio?: number;
         /**
           * Candidate sources for the underlying `img`, as a standard `srcset` value (e.g. `"…/re_w_400/img.jpg 400w, …/re_w_800/img.jpg 800w"`). <br/> Lets the browser fetch and decode only the pixels the layout needs, which is what bounds memory on image-heavy pages — a large original decodes to `naturalWidth × naturalHeight × 4` bytes regardless of its display size. Pair with `sizes`; without it the browser assumes the image is `100vw` wide.
         */

package/library/utils.js

@@ -13,7 +13,7 @@ import { d as Xe } from "./chunks/drag.DenOh3AE.js";
 import { f as Be } from "./chunks/focus-when-visible.jWSw9ks0.js";
 import { f as U } from "./chunks/form.LpappO1d.js";
 import { F as $e, c as ze, g as qe, v as Qe, a as je } from "./chunks/form.LpappO1d.js";
-import { L as Je, r as Ke } from "./chunks/i18n.Q5_2aVLU.js";
+import { L as Je, r as Ke } from "./chunks/i18n.BSPmBQ73.js";
 import { c as er, q as rr } from "./chunks/math.DuKzLacZ.js";
 import { g as sr } from "./chunks/modal.Ct0bJBSe.js";
 import { g as nr, l as ir, s as lr, u as cr } from "./chunks/scroll.xtO5yojm.js";

package/package.json

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