@orangelogic/design-system 4.38.0 → 4.40.0

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

@@ -63,6 +63,11 @@ export type Asset = {
 };
 export declare enum TransformationAction {
     Crop = "Crop",
+    /**
+     * Fits the image inside `width` x `height` pixels, keeping its aspect ratio and never
+     * scaling it up.
+     */
+    Dimensions = "Dimensions",
     Metadata = "Metadata",
     Proxy = "Proxy",
     Quality = "Quality",
@@ -105,3 +110,61 @@ export type FocusMode = {
     value: string;
 };
 export type DefaultFocusMode = 'manual' | 'center';
+export declare enum AssetLinkFormatPart {
+    Crop = "crop",
+    Dimensions = "dimensions",
+    Metadata = "metadata",
+    Proxy = "proxy",
+    Quality = "quality",
+    Resize = "resize",
+    Rotate = "rotate"
+}
+export declare enum AssetLinkFormatLayout {
+    Accordion = "accordion",
+    Formats = "formats"
+}
+export declare enum AssetLinkFormatApplyBehavior {
+    Automatic = "automatic",
+    Legacy = "legacy",
+    Manual = "manual"
+}
+export declare enum DimensionsUnit {
+    Percent = "percent",
+    Pixel = "px"
+}
+export declare enum DimensionsMode {
+    Custom = "custom",
+    Preset = "preset"
+}
+/**
+ * A Dimensions preset. A `value` of `<width>_<height>` or `<width>x<height>` (pixels) is the
+ * size it fits into; any other value, such as `original`, sets no size.
+ */
+export type DimensionsItem = {
+    disabled?: boolean;
+    group?: string;
+    label: string;
+    value: string;
+};
+/**
+ * Quality presets use unique numeric values from 1 to 100.
+ */
+export type QualityItem = {
+    description?: string;
+    disabled?: boolean;
+    label: string;
+    value: number;
+};
+/**
+ * The Dimensions dropdown's choice: a preset, or a custom size. Percent is only offered when
+ * the panel allows it.
+ */
+export type DimensionsValue = {
+    mode: DimensionsMode.Preset;
+    value: string;
+} | {
+    height: number;
+    mode: DimensionsMode.Custom;
+    unit: DimensionsUnit;
+    width: number;
+};

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

@@ -1,6 +1,7 @@
 import { Component, Editor as GrapesjsEditor, TraitProperties } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { StyleInfo } from 'lit/directives/style-map.js';
+import { AssetLinkFormatPart } from './asset-link-format';
 import { DownloadDocType } from './download-format-picker';
 import { FolderSelectApi, FolderSelectVariant } from './folder-select';
 import { FontFamily, FontTypeface } from './font-picker';
@@ -78,9 +79,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
          */
         manualFormatKey?: string;
         multiple?: boolean;
-        noCrop?: boolean;
-        noResize?: boolean;
-        noRotate?: boolean;
+        /** Panels to show inside cx-asset-transformation-dialog's cx-asset-link-format, in display order. */
+        parts?: AssetLinkFormatPart[];
         /** The block-attribute key that stores the gallery records array to bulk-resolve src URLs after a format change. */
         recordsKey?: string;
         /** The block-attribute key that stores the resolved image source URL. */

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

@@ -357,6 +357,7 @@ export interface Translation extends DefaultTranslation {
     details: string;
     detailsSourceField: string;
     dimensions: string;
+    dimensionsPercent?: string;
     directRelationOnRelation: (label: string) => string;
     disabledHeightInputHelpText: string;
     discardAllPendingEffects: string;
@@ -902,6 +903,7 @@ export interface Translation extends DefaultTranslation {
     removeFolder: (num: number) => string;
     removeGradientStop: string;
     renderAudio: string;
+    reorderTransformation?: (name: string) => string;
     replace: string;
     replaceAll: string;
     replaceWith: string;
@@ -1138,6 +1140,7 @@ export interface Translation extends DefaultTranslation {
     topRight: string;
     total: string;
     trackingParameters: string;
+    transformationOrderHint: string;
     transformations: string;
     transitionDuration: string;
     transitionToExisting: string;

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

@@ -34,7 +34,7 @@
             export type CxAssetLinkFormatCropMode = { "auto": boolean; "disabledSize": boolean; "label": string; "value": string; };
             export type CxAssetLinkFormatFocusMode = { "auto": boolean; "label": string; "value": string; };
             export type CxAssetLinkFormatProxy = { "cdnName": string; "extension": string; "formatHeight": number; "formatWidth": number; "height": number; "id": string; "permanentLink": string; "proxyLabel": string; "proxyName": string; "width": number; };
-            export type CxAssetLinkFormatTransformation = { "key": "Crop" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
+            export type CxAssetLinkFormatTransformation = { "key": "Crop" | "Dimensions" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
             export type CxBentoGridGalleryItem = { "additions": string[]; "alt": string; "backgroundColor": string; "cardType": "asset" | "folder" | "link" | "page" | "space"; "className": string; "cropFocus": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "details": string; "docType": "" | "Album" | "Audio" | "Audio segment" | "Image" | "Multimedia" | "ProjectDocument" | "Story" | "Video" | "Widget"; "extension": string; "filler": boolean; "header": string; "id": string; "isClone": boolean; "maxHeight": string; "maxWidth": string; "name": string; "objectFit": "contain" | "cover" | "fill" | "none" | "scale-down"; "openInNewTab": boolean; "pageId": string; "rawId": string; "size": string; "src": string; "srcset": string; "url": string; };
             export type CxCarouselGalleryItem = { "additions": string[]; "alt": string; "backgroundColor": string; "cardType": "asset" | "folder" | "link" | "page" | "space"; "className": string; "cropFocus": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "details": string; "docType": "" | "Album" | "Audio" | "Audio segment" | "Image" | "Multimedia" | "ProjectDocument" | "Story" | "Video" | "Widget"; "extension": string; "filler": boolean; "header": string; "id": string; "isClone": boolean; "maxHeight": string; "maxWidth": string; "name": string; "objectFit": "contain" | "cover" | "fill" | "none" | "scale-down"; "openInNewTab": boolean; "pageId": string; "rawId": string; "size": string; "src": string; "srcset": string; "url": string; };
             export type CxChatbotChatbotEvent = { "event": string; "excludedFromPurposes": string[]; "label": string; };
@@ -52,13 +52,13 @@
             export type CxTablePick = { "value": any; "field": string; };
             export type CxColorSwatchGroupColorSwatchData = { "cmyk": string; "color": string; "hex": string; "id": string; "metadata": dictionary; "name": string; "palette": string; "pms": string; "rgb": string; };
             export type CxColorSwatchGroupColorSwatchCustomColumn = { "alignment": "center" | "left" | "right"; "color": string; "constraints": boolean; "fontFamily": string; "fontSize": string; "fontStyle": string; "fontWeight": string; "id": string; "maxWidth": string; "minWidth": string; "name": string; "width": string; "widthMode": "custom" | "fill-container" | "hug-contents"; };
-            export type CxColumnTransformation = { "key": "Crop" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
-            export type CxColumnGroupTransformation = { "key": "Crop" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
+            export type CxColumnTransformation = { "key": "Crop" | "Dimensions" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
+            export type CxColumnGroupTransformation = { "key": "Crop" | "Dimensions" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
             export type CxDamCustomToolbarButtonsEditorDamCustomToolbarButton = { "accessLevel": string; "action": "create-record" | "execute-workflow" | "open-form" | "open-link" | "open-page" | "open-space"; "appearance": "icon-and-label" | "icon-only" | "label-only"; "completionMessage": string; "formId": string; "icon": string; "id": string; "label": string; "link": string; "name": string; "openInNewTab": boolean; "pageId": string; "pageUrl": string; "recordSubType": string; "recordType": string; "spaceId": string; "tooltip": string; "type": "primary" | "secondary"; "workflowId": string; };
             export type CxGalleryGalleryRecord = { "cropFocus": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "id": string; "objectFit": "contain" | "cover" | "fill" | "none" | "scale-down"; "rawId": string; "src": string; };
-            export type CxGalleryTransformation = { "key": "Crop" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
+            export type CxGalleryTransformation = { "key": "Crop" | "Dimensions" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
             export type CxTimelineTimelineItem = { "cropFocus": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "id": string; "label": string; "objectFit": "contain" | "cover" | "fill" | "none" | "scale-down"; "recordId": string; "srcset": string; "thumbnail": string; };
-            export type CxTimelineTransformation = { "key": "Crop" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
+            export type CxTimelineTransformation = { "key": "Crop" | "Dimensions" | "Metadata" | "Proxy" | "Quality" | "Resize" | "Rotate"; "value": { "disabledSize": boolean; "focusMode": string; "height": number; "isFocusModeAuto": boolean; "keepMetadata": boolean; "mode": string; "position": "bottom-center" | "bottom-left" | "bottom-right" | "center-center" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"; "quality": number; "ratioHeight": number; "ratioWidth": number; "rotation": number; "unit": "%" | "px"; "width": number; "x": number; "y": number; }; };
             export type CxContentBuilderDevice = { "canvasWidth": string; "height": string; "id": string; "maxWidth": string; "name": string; };
             export type CxContentBuilderContentBuilderSection = { "containerSelector": string; "id": string; "initialData": string; };
             export type CxDashboardFilterDashboardFilterControl = { "controlId": string; "controlType": string; "id": string; "label": string; "maxOptionsVisible": number; "optionColumnMapping": CxDashboardFilterPartial; "options": CxDashboardFilterDashboardFilterOption[] | dictionary[]; "placeholder": string; "type": string; };
@@ -8124,7 +8124,7 @@
         preRender?: boolean;
             }
             /**
-              * 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.
+              * 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.<br/> 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.<br/> Without an asset, the crop's pixel size is capped by the steps above it.
             */
             interface CxAssetLinkFormatAttributes extends HTMLAttributes<CxAssetLinkFormat> {
               
@@ -8189,25 +8189,25 @@
         */
         useCustomExtension?: 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.
         */
-        noMetadata?: boolean;
+        parts?: "crop" | "dimensions" | "metadata" | "proxy" | "quality" | "resize" | "rotate"[];
         /**
-          * 
+          * The accordion UI (default) or the always-visible Formats UI.
         */
-        noFormat?: boolean;
+        layout?: "accordion" | "formats";
         /**
-          * 
+          * Whether the inline Crop controls are enabled in the Formats layout.
         */
-        noCrop?: boolean;
+        cropEnabled?: boolean;
         /**
-          * 
+          * Allow reordering Crop, Resize, Rotate and Quality. Only effective without an asset.
         */
-        noResize?: boolean;
+        reorderable?: boolean;
         /**
-          * 
+          * Include Custom (a width and height in pixels or percent) in the Dimensions dropdown. A percent size writes no segment.
         */
-        noRotate?: boolean;
+        canCustomDimensions?: boolean;
         /**
           * 
         */
@@ -8279,17 +8279,9 @@
         */
         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.
+          * 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.
         */
-        noRotate?: boolean;
+        parts?: "crop" | "dimensions" | "metadata" | "proxy" | "quality" | "resize" | "rotate"[];
         /**
           * Show a Reset button inside cx-asset-link-format that clears all transformations.
         */

package/library/utils.js

@@ -1,6 +1,6 @@
 import { a as e, i as t, n, o as r, r as i, t as a } from "./chunks/event.C11S4obG.js";
 import { t as o } from "./chunks/custom-element.BEMYNDK1.js";
-import { r as s, t as c } from "./chunks/i18n.BJ2p4em8.js";
+import { r as s, t as c } from "./chunks/i18n.CQPiI18Q.js";
 import { n as l, r as u, t as d } from "./chunks/slot.CZUlACxT.js";
 import { t as f } from "./chunks/watch.Ub5r8btz.js";
 import { C as p, S as m, _ as h, a as g, b as _, c as v, d as y, f as b, g as x, h as S, i as C, l as w, m as T, n as E, o as D, p as O, r as k, s as A, t as j, u as M, v as N, w as P, x as F, y as I } from "./chunks/string.DAuTpyw8.js";
@@ -23,7 +23,7 @@ import { i as rt, n as it, r as at, t as ot } from "./chunks/scroll.CEH_a4pm.js"
 import { t as st } from "./chunks/user-agent.D2bRhUeS.js";
 import { t as ct } from "./chunks/parse.CDrJ-NY7.js";
 import { S as lt, _ as ut, b as dt, d as ft, f as pt, g as mt, h as ht, m as gt, p as _t, t as vt, u as yt, v as bt, x as xt, y as St } from "./chunks/date.BL4L64Hx.js";
-import { $ as Ct, A as wt, B as Tt, F as Et, G as Dt, H as Ot, I as kt, J as At, K as jt, L as Mt, M as Nt, N as Pt, O as Ft, P as It, Q as Lt, R as Rt, U as zt, V as Bt, W as Vt, X as Ht, Y as Ut, Z as Wt, _ as Gt, a as Kt, at as qt, b as Jt, c as Yt, ct as Xt, d as Zt, dt as Qt, et as $t, f as en, ft as tn, g as nn, h as rn, i as an, it as on, j as sn, k as cn, l as ln, lt as un, m as dn, mt as fn, n as pn, nt as mn, o as hn, ot as gn, p as _n, pt as vn, q as yn, r as bn, rt as xn, s as Sn, st as Cn, t as wn, tt as Tn, u as En, ut as Dn, v as On, y as kn, z as An } from "./chunks/src.CDbx_BKW.js";
+import { $ as Ct, A as wt, B as Tt, F as Et, G as Dt, H as Ot, I as kt, J as At, K as jt, L as Mt, M as Nt, N as Pt, O as Ft, P as It, Q as Lt, R as Rt, U as zt, V as Bt, W as Vt, X as Ht, Y as Ut, Z as Wt, _ as Gt, a as Kt, at as qt, b as Jt, c as Yt, ct as Xt, d as Zt, dt as Qt, et as $t, f as en, ft as tn, g as nn, h as rn, i as an, it as on, j as sn, k as cn, l as ln, lt as un, m as dn, mt as fn, n as pn, nt as mn, o as hn, ot as gn, p as _n, pt as vn, q as yn, r as bn, rt as xn, s as Sn, st as Cn, t as wn, tt as Tn, u as En, ut as Dn, v as On, y as kn, z as An } from "./chunks/src.QIRlv8bQ.js";
 import { n as jn } from "./chunks/modal.775mgCbW.js";
 import { a as Mn, c as Nn, d as Pn, f as Fn, i as In, l as Ln, m as Rn, n as zn, o as Bn, p as Vn, r as Hn, s as Un, t as Wn, u as Gn } from "./chunks/url.BCc06dE7.js";
 import { a as Kn, c as qn, d as Jn, f as Yn, h as Xn, i as Zn, l as Qn, m as $n, n as er, o as tr, p as nr, r as rr, s as ir, t as ar, u as or } from "./chunks/color.CIOzHtLK.js";

package/package.json

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

package/library/chunks/asset-link-format.DhdgEsA0.js

@@ -1,12 +0,0 @@
-//#region ../../packages/types/src/asset-link-format.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.AspectRatio = "%", e.Pixel = "px", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Center = "Center", e.East = "East", e.North = "North", e.Northeast = "Northeast", e.Northwest = "Northwest", e.South = "South", e.Southeast = "Southeast", e.Southwest = "Southwest", e.West = "West", e;
-}({}), n = /* @__PURE__ */ function(e) {
-	return e.Album = "Album", e.Audio = "Audio", e.AudioSegment = "Audio segment", e.Image = "Image", e.Multimedia = "Multimedia", e.ProjectDocument = "ProjectDocument", e.Story = "Story", e.Video = "Video", e.Widget = "Widget", e;
-}({}), r = /* @__PURE__ */ function(e) {
-	return e.Crop = "Crop", e.Metadata = "Metadata", e.Proxy = "Proxy", e.Quality = "Quality", e.Resize = "Resize", e.Rotate = "Rotate", e;
-}({});
-//#endregion
-export { e as i, n, r, t };