@orangelogic/design-system 4.50.0 → 4.51.0

package/library/chunks/{block-width.BiCAGZxV.js → block-width.B8m9MQM3.js}

@@ -79,7 +79,7 @@ import { t as jt } from "./padding-input-group.CGDq3Cct.js";
 import { t as Mt } from "./position-picker.DzRyAx7a.js";
 import { t as Nt } from "./shadow-input-group.Zt8zKRxQ.js";
 import { t as Pt } from "./size-input-group.Cxo0uCXM.js";
-import { C as Ft, S as It, T as Lt, _ as Rt, b as zt, c as Bt, f as Vt, g as Ht, h as Ut, i as Wt, l as Gt, n as Kt, o as qt, p as Jt, r as Yt, s as P, t as Xt, u as Zt, v as Qt, w as $t, x as en, y as tn } from "./asset-link-format.Ca8KxyCV.js";
+import { C as Ft, S as It, T as Lt, _ as Rt, b as zt, c as Bt, f as Vt, g as Ht, h as Ut, i as Wt, l as Gt, n as Kt, o as qt, p as Jt, r as Yt, s as P, t as Xt, u as Zt, v as Qt, w as $t, x as en, y as tn } from "./asset-link-format.CV-Jw-hk.js";
 import { c as nn, d as rn, f as an, n as on, u as sn } from "./color-swatch-group.BdYLfI59.js";
 import { $ as cn, B as F, G as ln, O as un, P as dn, Q as fn, T as pn, X as mn, Y as hn, Z as gn, _ as _n, at as vn, ct as I, et as yn, lt as bn, ot as L, st as xn, v as Sn, w as Cn, x as wn } from "./configs-controller.Cc-Lt6BH.js";
 import { a as Tn } from "./cloneDeep.C6x5LNv3.js";

package/library/chunks/{config-manager.Bwkq7ll7.js → config-manager.OCrUXBER.js}

@@ -14,7 +14,7 @@ import { t as b } from "./style-map.DPGQIxip.js";
 import { t as x } from "./button.DnOMjl_G.js";
 import { t as ee } from "./tooltip.DJl5qcTx.js";
 import { t as te } from "./line-clamp.BFh7eXXl.js";
-import { S as ne, _ as re, a as ie, b as ae, c as oe, d as se, f as ce, g as le, h as ue, i as de, l as fe, m as pe, n as me, o as he, p as ge, s as S, t as C, u as w, v as T, x as E, y as D } from "./block-width.BiCAGZxV.js";
+import { S as ne, _ as re, a as ie, b as ae, c as oe, d as se, f as ce, g as le, h as ue, i as de, l as fe, m as pe, n as me, o as he, p as ge, s as S, t as C, u as w, v as T, x as E, y as D } from "./block-width.B8m9MQM3.js";
 import { t as O } from "./typography.B0mkhqTB.js";
 import { t as k } from "./button-group.CPfXrqyq.js";
 import { t as A } from "./card.3c-X4hqR.js";
@@ -59,7 +59,7 @@ import { t as Je } from "./padding-input-group.CGDq3Cct.js";
 import { t as Ye } from "./position-picker.DzRyAx7a.js";
 import { t as Xe } from "./shadow-input-group.Zt8zKRxQ.js";
 import { t as Ze } from "./size-input-group.Cxo0uCXM.js";
-import { T as K } from "./asset-link-format.Ca8KxyCV.js";
+import { T as K } from "./asset-link-format.CV-Jw-hk.js";
 import { n as Qe } from "./_baseXor.Ca5K0ORC.js";
 import { n as $e, s as et, t as q } from "./isArrayLikeObject.Da3IzQeH.js";
 import { i as tt } from "./_baseClone.CnI5Vpqn.js";
@@ -575,7 +575,7 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, X = g(class extends h {
 		return t`<cx-space direction="vertical" spacing="medium" wrap="nowrap"><cx-typography variant="body2">${this.localize.term("contentBuilderBlockSettingsHelpText")}</cx-typography><cx-grid columns="3" use-flex-gap spacing="var(--cx-spacing-small)" column-spacing="0" wrap="nowrap"><cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.localize.term("templateName")}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2"><cx-input name="name" value=${this.name ?? ""} can-show-length maxlength="200" required @cx-change=${this.handleNameInputChange} type="text"></cx-input></cx-grid-item></cx-grid><cx-grid columns="3" use-flex-gap spacing="var(--cx-spacing-small)" column-spacing="0" wrap="nowrap"><cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.localize.term("description")}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2"><cx-textarea name="description" value=${this.description ?? ""} can-show-length maxlength="200" resize="none" @cx-change=${this.handleDescriptionInputChange} type="text"></cx-textarea></cx-grid-item></cx-grid></cx-space>`;
 	}
 	render() {
-		return t`<cx-dialog class="config-form" use-overlay-scrollbar divider-position=${B.Footer} .boundary=${this.boundary} @cx-after-show=${this.handleAfterShow} @cx-after-hide=${this.handleAfterHide} @cx-request-close=${this.handleRequestClose} @cx-asset-request-status=${this.handleAssetRequestStatus}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${v(this.dialogTitle, () => t`<cx-line-clamp lines="1">${this.dialogTitle}</cx-line-clamp>`, () => t`${this.localize.term("settingsTitle", this.blockName)}`)}</cx-typography>${v(this.templateName, () => t`<cx-typography variant="body3"><cx-line-clamp lines="1">${this.templateName}</cx-line-clamp></cx-typography>`)}</cx-space>${Fe(this.formKey, t`<form id="config-form" @submit=${this.handleFormSubmit}>${X(v(this.isEditingTemplateSettings, () => v(this.isTemplateEditable, () => t`<cx-tab-group class="config-form__tab-group" placement="top"><cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel></cx-tab-group>`), () => v(!at(this.traits) && this.tabs.length >= 1, () => t`<cx-tab-group class="config-form__tab-group" placement="top">${v(this.showTemplateTab, () => t`<cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel>`)}
+		return t`<cx-dialog class="config-form" use-overlay-scrollbar divider-position=${B.Footer} .boundary=${this.boundary} @cx-after-show=${this.handleAfterShow} @cx-after-hide=${this.handleAfterHide} @cx-request-close=${this.handleRequestClose} @cx-asset-request-status=${this.handleAssetRequestStatus}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${v(this.dialogTitle, () => t`<cx-line-clamp lines="1">${this.dialogTitle}</cx-line-clamp>`, () => t`${this.localize.term("settingsTitle", this.blockName)}`)}</cx-typography>${v(this.templateName, () => t`<cx-typography variant="body3"><cx-line-clamp lines="1">${`${this.localize.term("template")}: ${this.templateName}`}</cx-line-clamp></cx-typography>`)}</cx-space>${Fe(this.formKey, t`<form id="config-form" @submit=${this.handleFormSubmit}>${X(v(this.isEditingTemplateSettings, () => v(this.isTemplateEditable, () => t`<cx-tab-group class="config-form__tab-group" placement="top"><cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel></cx-tab-group>`), () => v(!at(this.traits) && this.tabs.length >= 1, () => t`<cx-tab-group class="config-form__tab-group" placement="top">${v(this.showTemplateTab, () => t`<cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel>`)}
                     ${R(this.tabs.filter((e) => !this.showTemplateTab || e === "appearance" || e === "effects" || e === "sidePanels" || e === "styling"), (e) => e, (e, n) => t`<cx-tab slot="nav" panel=${e} ?active=${!this.showTemplateTab && n === 0}>${this.localize.term(e)}</cx-tab><cx-tab-panel name=${e} ?active=${!this.showTemplateTab && n === 0}><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderBasicControls(this.traits, void 0, e)}</cx-space></cx-tab-panel>`)}
                     ${v(this.translatableControls.length > 0, () => t`<cx-tab slot="nav" panel="Translation">${this.localize.term("translation")}</cx-tab><cx-tab-panel name="Translation"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderTranslationControls()}</cx-space></cx-tab-panel>`)}</cx-tab-group>`, () => t`<cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderBasicControls(this.traits, void 0, this.tabs[0])}</cx-space>`)))}</form>`)}<cx-space slot="footer" spacing="x-small" wrap="nowrap" justify-content="end"><cx-button variant="default" size="medium" @click=${this.handleCancelClick}>${this.localize.term("cancel")}</cx-button><cx-button-group><cx-button type="submit" variant="primary" size="medium" ?loading=${this.loading} @click=${this.handleSaveClick}>${this.localize.term("save")}</cx-button>${v(this.isTemplateEditable && !this.isEditingTemplateSettings && !this.showTemplateTab, () => t`<cx-dropdown class="config-form__dropdown" placement="bottom-end" hoist @cx-select=${this.handleDropdownSelect}><cx-button slot="trigger" type="submit" variant="primary" caret><cx-visually-hidden>${this.localize.term("moreOptions")}</cx-visually-hidden></cx-button><cx-menu class="config-form__dropdown-menu"><cx-menu-item value="save-as-new-template"><cx-button type="submit" variant="text">${this.localize.term("saveAsNewTemplate")}</cx-button></cx-menu-item>${v(this.templateId, () => t`<cx-menu-item value="detach-template"><cx-button type="submit" variant="text">${this.localize.term("detachTemplate")}</cx-button></cx-menu-item>`)}</cx-menu></cx-dropdown>`)}</cx-button-group></cx-space></cx-dialog><cx-confirm-popover class="config-form__confirm-popover" divider-position=${B.Both} buttons-direction=${We.HorizontalReverse} dialog-label=${this.localize.term("dismissChanges")} confirm-text=${this.localize.term("dismissChanges")} .boundary=${this.boundary} variant="dialog" @cx-confirm=${this.hide}><cx-typography variant="body2" slot="footer" class="confirm-popover__footer">${this.localize.term("doYouWantToCloseThisDialogChangesWillBeDismissed")}</cx-typography></cx-confirm-popover>`;
 	}

package/library/components/asset-link-format.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/asset-link-format.Ca8KxyCV.js";
+import { t as e } from "../chunks/asset-link-format.CV-Jw-hk.js";
 export { e as default };

package/library/components/organisms.js

@@ -1,4 +1,4 @@
-import { t as e } from "../chunks/asset-link-format.Ca8KxyCV.js";
+import { t as e } from "../chunks/asset-link-format.CV-Jw-hk.js";
 import { t } from "../chunks/color-swatch-group.BdYLfI59.js";
 import { t as n } from "../chunks/file-on-demand.B4KUSqtB.js";
 export { e as CxAssetLinkFormat, t as CxColorSwatchGroup, n as CxFileOnDemand };

package/library/components/types.js

@@ -38,7 +38,7 @@ import { t as kt } from "../chunks/resize-observer.D9EHlnZI.js";
 import { t as At } from "../chunks/line-clamp.BFh7eXXl.js";
 import { t as jt } from "../chunks/tag.Dj8VrFFk.js";
 import { t as Mt } from "../chunks/array-line-clamp.HGGPocNC.js";
-import { C as Nt, S as Pt, _ as Ft, b as It, g as Lt, h as Rt, o as zt, r as Bt, s as Vt, t as Ht, v as Ut, w as Wt, x as Gt, y as Kt } from "../chunks/block-width.BiCAGZxV.js";
+import { C as Nt, S as Pt, _ as Ft, b as It, g as Lt, h as Rt, o as zt, r as Bt, s as Vt, t as Ht, v as Ut, w as Wt, x as Gt, y as Kt } from "../chunks/block-width.B8m9MQM3.js";
 import { n as qt, t as Jt } from "../chunks/position-picker.dY_vgF_H.js";
 import { a as Yt, i as Xt, n as Zt, o as Qt, r as $t, s as en, t as tn } from "../chunks/src.BJhIYoMP.js";
 import { a as nn, c as rn, i as an, n as on, o as sn, r as cn, t as ln, u as un } from "../chunks/time.p1t0NCwj.js";
@@ -165,7 +165,7 @@ import { t as Xs } from "../chunks/sidebar.CwAW3KaC.js";
 import { t as Zs } from "../chunks/size-input-group.Cxo0uCXM.js";
 import { t as Qs } from "../chunks/stepper-wizard.BJARESIb.js";
 import { t as $s } from "../chunks/typeface.BLblmcP7.js";
-import { T as ec, _ as tc, a as nc, b as rc, c as ic, d as ac, l as oc, m as sc, n as cc, o as lc, r as uc, s as dc, t as fc, v as pc } from "../chunks/asset-link-format.Ca8KxyCV.js";
+import { T as ec, _ as tc, a as nc, b as rc, c as ic, d as ac, l as oc, m as sc, n as cc, o as lc, r as uc, s as dc, t as fc, v as pc } from "../chunks/asset-link-format.CV-Jw-hk.js";
 import { c as mc, h as hc, l as gc, m as _c, p as vc, t as yc, u as bc } from "../chunks/color-swatch-group.BdYLfI59.js";
 import { n as xc } from "../chunks/isArrayLikeObject.Da3IzQeH.js";
 import { t as Sc } from "../chunks/file-on-demand.B4KUSqtB.js";
@@ -95207,7 +95207,7 @@ var j5 = class extends d {
 		return this.mappedSupportedLanguages.length > 1;
 	}
 	ensureConfigUi() {
-		return this.configUiPromise ??= Promise.all([import("../chunks/config-manager.Bwkq7ll7.js"), import("../chunks/configs-controller.Cc-Lt6BH.js").then((e) => e.n)]).then(async ([, e]) => {
+		return this.configUiPromise ??= Promise.all([import("../chunks/config-manager.OCrUXBER.js"), import("../chunks/configs-controller.Cc-Lt6BH.js").then((e) => e.n)]).then(async ([, e]) => {
 			this.configsController ??= new e.default(this.localize), await customElements.whenDefined("cx-config-manager"), await this.configManager?.updateComplete;
 		});
 	}

package/library/package.json

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

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

@@ -43,6 +43,7 @@ type ImageSizeBound = {
  * @slot footer - Additional content rendered in normal flow after the transformation controls.
  */
 export default class CxAssetLinkFormat extends CortexElement {
+    #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-asset-link-format-crop': typeof CxAssetLinkFormatCrop;
@@ -100,6 +101,11 @@ export default class CxAssetLinkFormat extends CortexElement {
     private sortable?;
     private sortableRevision;
     private dragPreviousSibling;
+    /**
+     * The crop step last edited in this formatter. Any other crop step came from outside (a saved
+     * format, Undo, Reset), even one of the size the Crop panel shows.
+     */
+    private editedCrop?;
     /**
      * The base URL for the asset service.
      * This URL is used to fetch the asset link and apply transformations.
@@ -454,8 +460,8 @@ export default class CxAssetLinkFormat extends CortexElement {
     private freezeTransformations;
     private upsertTransformation;
     /**
-     * Whether `crop` holds the size the Crop panel shows: the panel's own Apply, not a crop from
-     * outside (restored transformations, Undo, Reset).
+     * Whether `crop` holds the size the Crop panel shows. A crop from outside can hold it too (the
+     * initial 1x1), so only `editedCrop` tells the panel's own Apply apart.
      */
     private isCropPanelSize;
     /**

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

@@ -53,6 +53,7 @@ export type CxAssetLinkFormatCropPositionChangeEvent = CustomEvent<{
  * @property {string} position - The selected anchor position from the position picker (e.g. top-left, center-center).
  */
 export default class CxAssetLinkFormatCrop extends CortexElement {
+    #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
@@ -67,6 +68,11 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
         'cx-space': typeof CxSpace;
         'cx-typography': typeof CxTypography;
     };
+    /**
+     * The size of a `widthRatio`:`heightRatio` crop in `unit`: the ratio itself, or in pixels the largest
+     * box of that ratio inside `maxWidth` x `maxHeight` (the bare ratio while that size is unknown).
+     */
+    private static getRatioSize;
     private readonly localize;
     /**
      * The base element for the details section.
@@ -202,6 +208,8 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
      */
     aspectRatio: number;
     get selectedMode(): CropMode | undefined;
+    /** Whether the max size is known, so a ratio has a pixel size: the largest box of it inside. */
+    private get hasMaxSize();
     handleCropModeChange(): Promise<void>;
     handleOpenChange(): Promise<void>;
     private handleWidthChange;
@@ -211,9 +219,9 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
     private onPositionChange;
     /**
      * Handles the change of the unit of measurement for the crop settings.
-     * When the unit is changed to Aspect Ratio, it emits an event with the last applied settings for Aspect Ratio.
-     * When the unit is changed to Pixels, it emits an event with the last applied settings for Pixels.
-     * This allows the parent component to update the crop settings accordingly.
+     * Inline (every change is saved) carries the crop over to the new unit and keeps the mode, unless it
+     * is an auto mode. Otherwise it emits the last applied settings for the new unit and resets the mode
+     * to Free.
      */
     private onUnitChange;
     private handleInputChange;

package/package.json

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