@orangelogic/design-system 2.149.0 → 2.150.0

package/library/chunks/{asset-link-format.Cfj8l9X6.js → asset-link-format.CrSdl1zX.js}

@@ -1,14 +1,14 @@
 import "../components/cropper.js";
-import { C as G } from "./button.Dxb7AACZ.js";
+import { C as G } from "./button.BHIyGIB2.js";
 import D from "../components/space.js";
 import { C as N } from "./typography.IqHbnd3C.js";
 import { n, C as O } from "./lib-cortex-element.CVMmyPMC.js";
 import { h as _, a as Ht, C as Et, S as Nt, b as Ot, c as Lt, d as Ut } from "./endpoints.Bn_YviaU.js";
-import { M as vt, U as o, T as p } from "./asset-link-format.QzzboHHE.js";
+import { M as At, U as o, T as p } from "./asset-link-format.QzzboHHE.js";
 import "./browser.BHOCIF_A.js";
-import { i as L, x as v, E as qt } from "./lit-element.jLBm65_O.js";
+import { i as L, x as S, E as qt } from "./lit-element.jLBm65_O.js";
 import "./form.BSqXLytJ.js";
-import { L as U } from "./i18n.S781IU3H.js";
+import { L as U } from "./i18n.BwXikn4k.js";
 import { a as Bt } from "./string.BmBJ_BLT.js";
 import "./date-picker.BGHn6qg8.js";
 import "./content-builder.DZRw6hpX.js";
@@ -17,16 +17,16 @@ import { b as jt } from "./_baseUniq.CoXu-orP.js";
 import { c as q } from "./component.styles.CRO4Odto.js";
 import { c as B } from "./custom-element.L4WJXn1j.js";
 import { w as $ } from "./watch.K-dbDP6P.js";
-import { s as At, c as et } from "./number.CtCaI0T_.js";
+import { s as vt, c as et } from "./number.CtCaI0T_.js";
 import { b as it } from "./transformation.DGzjBg6V.js";
 import { r as b } from "./state.CSDxrqLd.js";
-import { n as F } from "./when.Dr1es41R.js";
+import { n as M } from "./when.Dr1es41R.js";
 import Z from "../components/details.js";
 import Vt from "../components/divider.js";
 import { C as Y } from "./icon.CsF1BoUl.js";
-import { C as mt } from "./icon-button.B-GBGmBo.js";
-import { C as ft } from "./input.eQ-tc3ew.js";
-import { C as ht } from "./option.Bo4ryyg8.js";
+import { C as mt } from "./icon-button.Bwv0pBA9.js";
+import { C as ft } from "./input.D28SuP1Z.js";
+import { C as ht } from "./option.BQt-5Vdg.js";
 import nt from "../components/select.js";
 import { c as Gt } from "./image.QVlPFadX.js";
 import { e as J } from "./query.BBf1UFkC.js";
@@ -128,7 +128,7 @@ function st(t) {
   }
   return ee(t);
 }
-const ut = "CoreField.LargeSizePreview", bt = "CoreField.DocType", ie = "Document.Title", se = "Document.CaptionLong", kt = "Document.FileExtension", Ct = "CoreField.FileSize", Rt = "CoreField.Identifier", $t = "CoreField.Keywords", _t = "CoreField.MaxHeight", Pt = "CoreField.MaxWidth", at = "Document.RecordID", Mt = "CoreField.DocSubType", Wt = "CoreField.TitleWithFallback", ot = "CoreField.OriginalFileName", rt = "CoreField.UpdatedFileName", X = "CoreField.OriginalPreview", pt = {
+const ut = "CoreField.LargeSizePreview", bt = "CoreField.DocType", ie = "Document.Title", se = "Document.CaptionLong", Ct = "Document.FileExtension", kt = "CoreField.FileSize", Rt = "CoreField.Identifier", $t = "CoreField.Keywords", _t = "CoreField.MaxHeight", Mt = "CoreField.MaxWidth", at = "Document.RecordID", Pt = "CoreField.DocSubType", Wt = "CoreField.TitleWithFallback", ot = "CoreField.OriginalFileName", rt = "CoreField.UpdatedFileName", X = "CoreField.OriginalPreview", pt = {
   DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
   FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
   ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
@@ -280,17 +280,17 @@ async function xi({
       originalUrl: w(f, X),
       recordId: w(f, at),
       ...h.reduce(
-        (E, z) => (E[z] = w(f, z), E),
+        (E, A) => (E[A] = w(f, A), E),
         {}
       )
     };
   }).sort(
     (f, R) => (c.get(f.recordId) ?? 1 / 0) - (c.get(R.recordId) ?? 1 / 0)
-  ), k = x.reduce(
+  ), C = x.reduce(
     (f, R) => f + R.totalCount,
     0
   );
-  return { facets: [], items: y, totalCount: k };
+  return { facets: [], items: y, totalCount: C };
 }
 function w(t, e) {
   const i = t[e];
@@ -312,25 +312,25 @@ async function yi({
 }) {
   if (!e && !l)
     return { facets: [], items: [], totalCount: 0 };
-  const k = (i?.filter((z) => z && typeof z == "string") ?? []).map((z) => z.replace("%20", " ")), f = {
+  const C = (i?.filter((A) => A && typeof A == "string") ?? []).map((A) => A.replace("%20", " ")), f = {
     directParentFolderIdentifier: e,
     parentFolderIdentifier: l,
-    ...r.length > 0 ? { docType: [vt.Image, vt.Audio] } : {}
+    ...r.length > 0 ? { docType: [At.Image, At.Audio] } : {}
   }, R = await Dt({
     countPerPage: t,
     fields: [
-      ...k,
+      ...C,
       Wt,
       ut,
       X,
       $t,
-      Pt,
+      Mt,
       _t,
-      Ct,
+      kt,
       bt,
-      Mt,
+      Pt,
       Rt,
-      kt,
+      Ct,
       at,
       ot,
       rt
@@ -342,26 +342,26 @@ async function yi({
     securityByPassToken: x,
     sort: void 0,
     token: y
-  }), E = R.items.map((z) => {
-    let K = w(z, kt), ct = w(z, rt), xt = w(z, ut);
-    K && !K.startsWith(".") && (K = "." + K), ct === "" && (ct = w(z, ot)), K.toLowerCase() === ".gif" && (xt = w(z, X));
-    const yt = w(z, at);
+  }), E = R.items.map((A) => {
+    let K = w(A, Ct), ct = w(A, rt), xt = w(A, ut);
+    K && !K.startsWith(".") && (K = "." + K), ct === "" && (ct = w(A, ot)), K.toLowerCase() === ".gif" && (xt = w(A, X));
+    const yt = w(A, at);
     return {
-      docSubType: w(z, Mt),
-      docType: w(z, bt) || "",
+      docSubType: w(A, Pt),
+      docType: w(A, bt) || "",
       extension: K,
-      height: w(z, _t) || "0",
+      height: w(A, _t) || "0",
       id: yt,
-      identifier: w(z, Rt),
+      identifier: w(A, Rt),
       imageUrl: xt,
       name: ct,
-      originalUrl: w(z, X),
+      originalUrl: w(A, X),
       recordId: yt,
-      size: w(z, Ct) || "0 MB",
-      tags: w(z, $t),
-      width: w(z, Pt) || "0",
-      ...k.reduce(
-        (St, zt) => (St[zt] = w(z, zt), St),
+      size: w(A, kt) || "0 MB",
+      tags: w(A, $t),
+      width: w(A, Mt) || "0",
+      ...C.reduce(
+        (St, zt) => (St[zt] = w(A, zt), St),
         {}
       )
     };
@@ -471,7 +471,7 @@ async function zi({
     return { formatsByDocType: {} };
   }
 }
-async function vi({
+async function Ai({
   recordIds: t,
   rightsToCheck: e
 }) {
@@ -495,7 +495,7 @@ async function vi({
   }
 }
 const ce = L`.asset-link-format__details{--header-padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__details::part(icon){width:var(--cx-font-size-3x-large);height:var(--cx-font-size-3x-large);background-color:var(--cx-color-neutral-100);border-radius:var(--cx-border-radius-large);color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-large);justify-content:center;align-items:center;display:flex}.asset-link-format__details::part(input-label){color:var(--cx-color-neutral-400);margin-inline-start:var(--cx-spacing-small)}.asset-link-format__header{padding:var(--cx-spacing-medium)}.asset-link-format__section-header{padding:0 var(--cx-spacing-medium);border-top:var(--section-header-border-width,1px) solid var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-50)}.asset-link-format__undo,.asset-link-format__reset{--color:var(--cx-color-primary);--background-color:transparent}`, pe = L`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.crop__unit-select{width:120px}.crop__input-group{flex:1;display:flex}`;
-var de = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, S = (t, e, i, s) => {
+var de = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, z = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? ue(e, i) : e, r = t.length - 1, h; r >= 0; r--)
     (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
   return s && a && de(e, i, a), a;
@@ -724,23 +724,23 @@ let g = class extends O {
   }
   render() {
     const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
-    return v`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small">${F(
+    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small">${M(
       !this.noRatioModes,
-      () => v`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${I({
+      () => S`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${I({
         width: "100%"
       })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${tt(
         t,
         (i) => i.value,
-        ({ label: i, value: s }) => v`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => S`<cx-option value=${s}>${i}</cx-option>`
       )}
-              ${F(
+              ${M(
         e.length > 0,
-        () => v`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
+        () => S`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
       )}
               ${tt(
         e,
         (i) => i.value,
-        ({ label: i, value: s }) => v`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => S`<cx-option value=${s}>${i}</cx-option>`
       )}</cx-select>`
     )}<cx-space spacing="small"><div class="crop__input-group"><cx-input data-testid="cx-asset-link-format-crop-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-change=${this.handleInputChange} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 W
@@ -748,14 +748,17 @@ let g = class extends O {
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
     })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} ?disabled=${this.loading} @cx-change=${this.handleInputChange} @cx-input=${this.handleHeightChange} required><cx-typography slot="prefix" variant="body3" part="input-label">
                 H
-              </cx-typography></cx-input></div><cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${F(
+              </cx-typography></cx-input></div>${M(
+      !this.noRatioModes,
+      () => S`<cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`
+    )}</cx-space>${M(
       this.focusModes.length > 0,
-      () => v`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${I({
+      () => S`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${I({
         width: "100%"
       })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${tt(
         this.focusModes,
         (i) => i.value,
-        ({ label: i, value: s }) => v`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => S`<cx-option value=${s}>${i}</cx-option>`
       )}</cx-select>`
     )}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${I({
       marginLeft: "auto"
@@ -775,85 +778,85 @@ g.dependencies = {
   "cx-space": D,
   "cx-typography": N
 };
-S([
+z([
   J(".details")
 ], g.prototype, "base", 2);
-S([
+z([
   n({ reflect: !0, type: Boolean })
 ], g.prototype, "open", 2);
-S([
+z([
   n({ reflect: !0, type: Number })
 ], g.prototype, "width", 2);
-S([
+z([
   n({ reflect: !0, type: Number })
 ], g.prototype, "height", 2);
-S([
+z([
   n({ attribute: "max-width", reflect: !0, type: Number })
 ], g.prototype, "maxWidth", 2);
-S([
+z([
   n({ attribute: "max-height", reflect: !0, type: Number })
 ], g.prototype, "maxHeight", 2);
-S([
+z([
   n({ attribute: "ratio-width", reflect: !0, type: Number })
 ], g.prototype, "ratioWidth", 2);
-S([
+z([
   n({ attribute: "ratio-height", reflect: !0, type: Number })
 ], g.prototype, "ratioHeight", 2);
-S([
+z([
   n({ attribute: "percentage-width", reflect: !0, type: Number })
 ], g.prototype, "percentageWidth", 2);
-S([
+z([
   n({ attribute: "percentage-height", reflect: !0, type: Number })
 ], g.prototype, "percentageHeight", 2);
-S([
+z([
   n({ reflect: !0, type: String })
 ], g.prototype, "unit", 2);
-S([
+z([
   n({ attribute: "disabled-apply", reflect: !0, type: Boolean })
 ], g.prototype, "disabledApply", 2);
-S([
+z([
   n({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
 ], g.prototype, "noRatioModes", 2);
-S([
+z([
   n({ attribute: "last-applied-setting", reflect: !1, type: Object })
 ], g.prototype, "lastAppliedSetting", 2);
-S([
+z([
   n({ reflect: !0, type: Boolean })
 ], g.prototype, "loading", 2);
-S([
+z([
   n({ attribute: "crop-modes", reflect: !1, type: Array })
 ], g.prototype, "cropModes", 2);
-S([
+z([
   n({ attribute: "focus-modes", reflect: !1, type: Object })
 ], g.prototype, "focusModes", 2);
-S([
+z([
   n({ attribute: "focus-mode", reflect: !0, type: String })
 ], g.prototype, "focusMode", 2);
-S([
+z([
   n({ attribute: "crop-mode", reflect: !0, type: String })
 ], g.prototype, "cropMode", 2);
-S([
+z([
   n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
 ], g.prototype, "keepAspectRatio", 2);
-S([
+z([
   b()
 ], g.prototype, "invalidWidth", 2);
-S([
+z([
   b()
 ], g.prototype, "invalidHeight", 2);
-S([
+z([
   b()
 ], g.prototype, "aspectRatio", 2);
-S([
+z([
   $("cropMode", { waitUntilFirstUpdate: !0 }),
   $("maxWidth", { waitUntilFirstUpdate: !0 }),
   $("maxHeight", { waitUntilFirstUpdate: !0 }),
   $("keepAspectRatio")
 ], g.prototype, "handleCropModeChange", 1);
-S([
+z([
   $("open", { waitUntilFirstUpdate: !0 })
 ], g.prototype, "handleOpenChange", 1);
-g = S([
+g = z([
   B("cx-asset-link-format-crop")
 ], g);
 const me = L`.extension{padding:var(--cx-spacing-small) var(--cx-spacing-medium);border:solid 1px var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-0);& cx-select{flex:1;width:100%}}`;
@@ -873,10 +876,10 @@ let V = class extends O {
     });
   }
   render() {
-    return v`<cx-space direction="vertical" spacing="small" class="extension"><cx-typography variant="body2">${this.localize.term("extension")}</cx-typography><cx-select data-label=${this.localize.term("extension")} data-testid="cx-asset-link-format-extension-select" value=${this.value} hoist @cx-change=${this.handleExtensionChange}>${tt(
+    return S`<cx-space direction="vertical" spacing="small" class="extension"><cx-typography variant="body2">${this.localize.term("extension")}</cx-typography><cx-select data-label=${this.localize.term("extension")} data-testid="cx-asset-link-format-extension-select" value=${this.value} hoist @cx-change=${this.handleExtensionChange}>${tt(
       this.items,
       (t) => t.value,
-      (t) => v`<cx-option value=${t.value}>${t.displayName}</cx-option>`
+      (t) => S`<cx-option value=${t.value}>${t.displayName}</cx-option>`
     )}</cx-select></cx-space>`;
   }
 };
@@ -948,10 +951,10 @@ let P = class extends O {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return v`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("format")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small" class="format"><cx-select data-label=${this.localize.term("imageFormat")} data-testid="cx-asset-link-format-proxy-select" value=${this.scopedValue} hoist @cx-change=${this.handleProxyChange} ?disabled=${this.loading}>${tt(
+    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("format")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small" class="format"><cx-select data-label=${this.localize.term("imageFormat")} data-testid="cx-asset-link-format-proxy-select" value=${this.scopedValue} hoist @cx-change=${this.handleProxyChange} ?disabled=${this.loading}>${tt(
       this.items,
       (t) => t.id,
-      (t) => v`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
+      (t) => S`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
     )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${I({
       "margin-left": "auto"
     })} ?disabled=${this.scopedValue === this.value} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
@@ -995,10 +998,10 @@ P = W([
   B("cx-asset-link-format-proxy")
 ], P);
 const ze = L`cx-details::part(base){border-bottom-width:0}`;
-var ve = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, Q = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ae(e, i) : e, r = t.length - 1, h; r >= 0; r--)
+var Ae = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, Q = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ve(e, i) : e, r = t.length - 1, h; r >= 0; r--)
     (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && ve(e, i, a), a;
+  return s && a && Ae(e, i, a), a;
 };
 let H = class extends O {
   constructor() {
@@ -1046,7 +1049,7 @@ let H = class extends O {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return v`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="blur_on"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("quality")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-quality-tooltip" content=${this.localize.term("qualityHelpText")} hoist><cx-input data-testid="cx-asset-link-format-quality" class="details__checkbox" mask="num" .maskBlocks=${{ num: { mask: Number, max: 100, min: 1 } }} value=${this.scopedValue.toString()} style=${I({
+    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="blur_on"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("quality")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-quality-tooltip" content=${this.localize.term("qualityHelpText")} hoist><cx-input data-testid="cx-asset-link-format-quality" class="details__checkbox" mask="num" .maskBlocks=${{ num: { mask: Number, max: 100, min: 1 } }} value=${this.scopedValue.toString()} style=${I({
       flex: "1"
     })} @cx-input=${this.handleQualityChange}></cx-input></cx-tooltip><cx-button data-testid="cx-asset-link-format-quality-apply" variant="primary" ?disabled=${this.invalidValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
@@ -1083,17 +1086,17 @@ H = Q([
   B("cx-asset-link-format-quality")
 ], H);
 const we = L`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.resize__unit-select{width:120px}.resize__input-group{flex:1;display:flex}`;
-var be = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, C = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ke(e, i) : e, r = t.length - 1, h; r >= 0; r--)
+var be = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, k = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ce(e, i) : e, r = t.length - 1, h; r >= 0; r--)
     (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
   return s && a && be(e, i, a), a;
 };
-let A = class extends O {
+let v = class extends O {
   constructor() {
     super(...arguments), this.localize = new U(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = o.Pixel, this.lastAppliedSetting = {
       [o.Pixel]: { height: 0, width: 0 },
       [o.AspectRatio]: { height: 1, width: 1 }
-    }, this.loading = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
+    }, this.loading = !1, this.noRatioModes = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
   }
   /**
    * A computed property that checks if the current resize settings match the last applied settings.
@@ -1227,19 +1230,22 @@ let A = class extends O {
     });
   }
   render() {
-    return v`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="aspect_ratio"></cx-icon></div><cx-typography variant="body2">${this.localize.term("resize")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-space spacing="small"><div class="resize__input-group"><cx-input data-testid="cx-asset-link-format-resize-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
+    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="aspect_ratio"></cx-icon></div><cx-typography variant="body2">${this.localize.term("resize")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-space spacing="small"><div class="resize__input-group"><cx-input data-testid="cx-asset-link-format-resize-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 W
               </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-resize-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${I({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
     })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} @cx-input=${this.handleHeightChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 H
-              </cx-typography></cx-input></div><cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space><cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${I({
+              </cx-typography></cx-input></div>${M(
+      !this.noRatioModes,
+      () => S`<cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`
+    )}</cx-space><cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${I({
       marginLeft: "auto"
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-A.styles = [q, we];
-A.dependencies = {
+v.styles = [q, we];
+v.dependencies = {
   "cx-button": G,
   "cx-details": Z,
   "cx-icon": Y,
@@ -1250,70 +1256,73 @@ A.dependencies = {
   "cx-space": D,
   "cx-typography": N
 };
-C([
+k([
   J(".details")
-], A.prototype, "base", 2);
-C([
+], v.prototype, "base", 2);
+k([
   n({ reflect: !0, type: Boolean })
-], A.prototype, "open", 2);
-C([
+], v.prototype, "open", 2);
+k([
   n({ reflect: !0, type: Number })
-], A.prototype, "width", 2);
-C([
+], v.prototype, "width", 2);
+k([
   n({ reflect: !0, type: Number })
-], A.prototype, "height", 2);
-C([
+], v.prototype, "height", 2);
+k([
   n({ attribute: "max-width", reflect: !0, type: Number })
-], A.prototype, "maxWidth", 2);
-C([
+], v.prototype, "maxWidth", 2);
+k([
   n({ attribute: "max-height", reflect: !0, type: Number })
-], A.prototype, "maxHeight", 2);
-C([
+], v.prototype, "maxHeight", 2);
+k([
   n({ attribute: "ratio-width", reflect: !0, type: Number })
-], A.prototype, "ratioWidth", 2);
-C([
+], v.prototype, "ratioWidth", 2);
+k([
   n({ attribute: "ratio-height", reflect: !0, type: Number })
-], A.prototype, "ratioHeight", 2);
-C([
+], v.prototype, "ratioHeight", 2);
+k([
   n({ reflect: !0, type: String })
-], A.prototype, "unit", 2);
-C([
+], v.prototype, "unit", 2);
+k([
   n({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], A.prototype, "lastAppliedSetting", 2);
-C([
+], v.prototype, "lastAppliedSetting", 2);
+k([
   n({ reflect: !0, type: Boolean })
-], A.prototype, "loading", 2);
-C([
+], v.prototype, "loading", 2);
+k([
+  n({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
+], v.prototype, "noRatioModes", 2);
+k([
   n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], A.prototype, "keepAspectRatio", 2);
-C([
+], v.prototype, "keepAspectRatio", 2);
+k([
   b()
-], A.prototype, "invalidWidth", 2);
-C([
+], v.prototype, "invalidWidth", 2);
+k([
   b()
-], A.prototype, "invalidHeight", 2);
-C([
+], v.prototype, "invalidHeight", 2);
+k([
   b()
-], A.prototype, "aspectRatio", 2);
-C([
+], v.prototype, "aspectRatio", 2);
+k([
   $("cropMode", { waitUntilFirstUpdate: !0 }),
   $("maxWidth", { waitUntilFirstUpdate: !0 }),
   $("maxHeight", { waitUntilFirstUpdate: !0 }),
   $("keepAspectRatio")
-], A.prototype, "handleCropModeChange", 1);
-C([
+], v.prototype, "handleCropModeChange", 1);
+k([
   $("open", { waitUntilFirstUpdate: !0 })
-], A.prototype, "handleOpenChange", 1);
-A = C([
+], v.prototype, "handleOpenChange", 1);
+v = k([
   B("cx-asset-link-format-resize")
-], A);
-const Ce = L`cx-details::part(base){border-bottom-width:0}`;
+], v);
+const ke = L`cx-details::part(base){border-bottom-width:0}`;
 var Re = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, j = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? $e(e, i) : e, r = t.length - 1, h; r >= 0; r--)
     (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
   return s && a && Re(e, i, a), a;
 };
-let M = class extends O {
+let F = class extends O {
   constructor() {
     super(...arguments), this.localize = new U(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
   }
@@ -1326,14 +1335,14 @@ let M = class extends O {
     const e = t.target.value, i = Number(e);
     if (Number.isNaN(i))
       return;
-    const s = At(i);
+    const s = vt(i);
     (i > 360 || i < -360) && (t.target.value = s.toString()), this.emit("cx-asset-link-format-rotation-change", {
       detail: s
     });
   }
   handleButtonClick(t) {
     this.emit("cx-asset-link-format-rotation-change", {
-      detail: At(t)
+      detail: vt(t)
     });
   }
   handleClockwiseClick() {
@@ -1353,14 +1362,14 @@ let M = class extends O {
     });
   }
   render() {
-    return v`<cx-details class="details" ?open=${this.open}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="rotate_90_degrees_cw"></cx-icon></div><cx-typography variant="body2">Rotate</cx-typography></cx-space><cx-space spacing="small"><cx-button-group label=${this.localize.term("history")}><cx-icon-button data-testid="cx-asset-link-format-rotation-ccw" name="rotate_90_degrees_ccw" label=${this.localize.term("undo")} outline size="small" ?disabled=${this.loading || this.value === -360} @click=${this.handleCounterClockwiseClick}></cx-icon-button><cx-icon-button data-testid="cx-asset-link-format-rotation-cw" name="rotate_90_degrees_cw" label=${this.localize.term("redo")} outline size="small" ?disabled=${this.loading || this.value === 360} @click=${this.handleClockwiseClick}></cx-icon-button></cx-button-group><cx-input data-testid="cx-asset-link-format-rotation" value=${(this.value + this.defaultValue).toString()} placeholder="0" mask="num" .maskBlocks=${{ num: { mask: Number, max: 360, min: -360, signed: !0 } }} ?disabled=${this.loading} style=${I({
+    return S`<cx-details class="details" ?open=${this.open}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="rotate_90_degrees_cw"></cx-icon></div><cx-typography variant="body2">Rotate</cx-typography></cx-space><cx-space spacing="small"><cx-button-group label=${this.localize.term("history")}><cx-icon-button data-testid="cx-asset-link-format-rotation-ccw" name="rotate_90_degrees_ccw" label=${this.localize.term("undo")} outline size="small" ?disabled=${this.loading || this.value === -360} @click=${this.handleCounterClockwiseClick}></cx-icon-button><cx-icon-button data-testid="cx-asset-link-format-rotation-cw" name="rotate_90_degrees_cw" label=${this.localize.term("redo")} outline size="small" ?disabled=${this.loading || this.value === 360} @click=${this.handleClockwiseClick}></cx-icon-button></cx-button-group><cx-input data-testid="cx-asset-link-format-rotation" value=${(this.value + this.defaultValue).toString()} placeholder="0" mask="num" .maskBlocks=${{ num: { mask: Number, max: 360, min: -360, signed: !0 } }} ?disabled=${this.loading} style=${I({
       flex: "none",
       width: "80px"
     })} @cx-input=${this.handleRotationChange}></cx-input><cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === this.lastAppliedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-M.styles = [q, Ce];
-M.dependencies = {
+F.styles = [q, ke];
+F.dependencies = {
   "cx-button": G,
   "cx-button-group": Qt,
   "cx-details": Z,
@@ -1371,33 +1380,33 @@ M.dependencies = {
 };
 j([
   J(".details")
-], M.prototype, "base", 2);
+], F.prototype, "base", 2);
 j([
   n({ reflect: !0, type: Boolean })
-], M.prototype, "open", 2);
+], F.prototype, "open", 2);
 j([
   n({ reflect: !0, type: Number })
-], M.prototype, "value", 2);
+], F.prototype, "value", 2);
 j([
   n({ attribute: "default-value", reflect: !0, type: Number })
-], M.prototype, "defaultValue", 2);
+], F.prototype, "defaultValue", 2);
 j([
   n({ reflect: !0, type: Boolean })
-], M.prototype, "loading", 2);
+], F.prototype, "loading", 2);
 j([
   n({ attribute: "last-applied-value", reflect: !0, type: Number })
-], M.prototype, "lastAppliedValue", 2);
+], F.prototype, "lastAppliedValue", 2);
 j([
   $("open", { waitUntilFirstUpdate: !0 })
-], M.prototype, "handleOpenChange", 1);
-M = j([
+], F.prototype, "handleOpenChange", 1);
+F = j([
   B("cx-asset-link-format-rotation")
-], M);
+], F);
 const _e = L`cx-details::part(base){border-bottom-width:0}`;
-var Pe = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, lt = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Me(e, i) : e, r = t.length - 1, h; r >= 0; r--)
+var Me = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, lt = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Pe(e, i) : e, r = t.length - 1, h; r >= 0; r--)
     (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && Pe(e, i, a), a;
+  return s && a && Me(e, i, a), a;
 };
 let T = class extends O {
   constructor() {
@@ -1425,7 +1434,7 @@ let T = class extends O {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return v`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="short_text"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("metadata")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-metadata-tooltip" content=${this.localize.term("metadataHelpText")} hoist><cx-checkbox data-testid="cx-asset-link-format-metadata" class="details__checkbox" ?checked=${this.value} @cx-change=${this.handleApply}>${this.localize.term("preserveMetadata")}</cx-checkbox></cx-tooltip></cx-space></cx-details>`;
+    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="short_text"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("metadata")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-metadata-tooltip" content=${this.localize.term("metadataHelpText")} hoist><cx-checkbox data-testid="cx-asset-link-format-metadata" class="details__checkbox" ?checked=${this.value} @cx-change=${this.handleApply}>${this.localize.term("preserveMetadata")}</cx-checkbox></cx-tooltip></cx-space></cx-details>`;
   }
 };
 T.styles = [q, _e];
@@ -1568,6 +1577,16 @@ let d = class extends O {
       (e) => e.key === p.Crop
     )?.value.unit ?? o.Pixel;
   }
+  /**
+   * The focus mode of the last applied crop transformation, for the no-asset case only.
+   * Reflects whatever focus mode the last committed Crop transformation used, or 'manual'
+   * when nothing has been applied yet.
+   */
+  get lastAppliedCropFocusMode() {
+    return this.transformations.findLast(
+      (e) => e.key === p.Crop
+    )?.value.focusMode ?? "manual";
+  }
   /**
    * Checks if the crop apply button should be disabled.
    * This is determined by comparing the current crop size with the last crop size.
@@ -1579,8 +1598,10 @@ let d = class extends O {
       return !1;
     if (this.cropSize.unit === o.AspectRatio && !this.asset) {
       const e = this.lastCropSize[o.AspectRatio];
-      return this.cropSize.ratioWidth === e.width && this.cropSize.ratioHeight === e.height;
+      return this.cropSize.ratioWidth === e.width && this.cropSize.ratioHeight === e.height && this.cropSize.focusMode === this.lastAppliedCropFocusMode;
     }
+    if (!this.asset && this.cropSize.focusMode !== this.lastAppliedCropFocusMode)
+      return !1;
     const t = [
       "height",
       "percentageHeight",
@@ -1864,7 +1885,7 @@ let d = class extends O {
         (c) => c.key === p.Crop && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width && c.value.height)
       );
       if (r?.value.unit === o.AspectRatio && r.value.ratioWidth && r.value.ratioHeight) {
-        const { focusMode: c, ratioHeight: y, ratioWidth: k } = r.value;
+        const { focusMode: c, ratioHeight: y, ratioWidth: C } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
@@ -1872,11 +1893,11 @@ let d = class extends O {
           percentageHeight: 100,
           percentageWidth: 100,
           ratioHeight: y,
-          ratioWidth: k,
+          ratioWidth: C,
           unit: o.AspectRatio
         };
       } else if (r) {
-        const { focusMode: c, height: y, unit: k, width: f, x: R = 0, y: E = 0 } = r.value;
+        const { focusMode: c, height: y, unit: C, width: f, x: R = 0, y: E = 0 } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
@@ -1884,7 +1905,7 @@ let d = class extends O {
           height: y,
           percentageHeight: 100,
           percentageWidth: 100,
-          unit: k ?? o.Pixel,
+          unit: C ?? o.Pixel,
           width: f,
           x: R,
           y: E
@@ -1920,12 +1941,12 @@ let d = class extends O {
           unit: o.AspectRatio
         };
       } else if (h) {
-        const { height: c = 0, unit: y, width: k = 0 } = h.value;
+        const { height: c = 0, unit: y, width: C = 0 } = h.value;
         this.resizeSize = {
           ...this.resizeSize,
           height: c,
           unit: y ?? o.Pixel,
-          width: k
+          width: C
         };
       } else
         this.resizeSize = {
@@ -2196,11 +2217,11 @@ let d = class extends O {
       imageUrl: this.selectedFormat.url
     });
     if (y) {
-      let k = a, f = r;
-      i || (k = y.height * 100 / this.selectedFormat.height), c || (f = y.width * 100 / this.selectedFormat.width), this.cropSize = {
+      let C = a, f = r;
+      i || (C = y.height * 100 / this.selectedFormat.height), c || (f = y.width * 100 / this.selectedFormat.width), this.cropSize = {
         ...this.cropSize,
         height: y.height,
-        percentageHeight: k ?? this.cropSize.percentageHeight,
+        percentageHeight: C ?? this.cropSize.percentageHeight,
         percentageWidth: f ?? this.cropSize.percentageWidth,
         width: y.width,
         x: y.x * 100 / this.selectedFormat.width,
@@ -2237,7 +2258,7 @@ let d = class extends O {
     ));
     const c = this.cropSize.focusMode;
     this.focusModes.find(
-      (k) => k.value === c
+      (C) => C.value === c
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
       focusMode: c,
       height: m,
@@ -2387,11 +2408,11 @@ let d = class extends O {
         ratioHeight: x,
         ratioWidth: c,
         unit: y,
-        width: k,
+        width: C,
         x: f,
         y: R
       } = this.cropSize, E = this.focusModes.find(
-        (z) => z.value === l
+        (A) => A.value === l
       )?.auto ?? !1;
       if (y === o.AspectRatio) {
         c && x && this.upsertTransformation({
@@ -2406,14 +2427,14 @@ let d = class extends O {
         });
         return;
       }
-      (m || k) && this.upsertTransformation({
+      (m || C) && this.upsertTransformation({
         key: p.Crop,
         value: {
           focusMode: l,
           height: m,
           isFocusModeAuto: E,
           unit: y,
-          width: k,
+          width: C,
           x: Number.isFinite(f) ? f : void 0,
           y: Number.isFinite(R) ? R : void 0
         }
@@ -2624,33 +2645,33 @@ let d = class extends O {
     this.selectedProxy = t ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "", this.transformations = [], this.frozenIndex = -1, this.syncQuality();
   }
   render() {
-    return v`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${F(
+    return S`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${M(
       !this.hideHeader,
-      () => v`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${F(this.canReset, () => v`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${this.transformations.length === 0} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
+      () => S`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${M(this.canReset, () => S`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${this.transformations.length === 0} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
       () => qt
     )}
-      ${F(
+      ${M(
       !this.noFormat,
-      () => v`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} .items=${this.formats} ?loading=${this.loading && this.lastAction === p.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
+      () => S`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} .items=${this.formats} ?loading=${this.loading && this.lastAction === p.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
     )}
-      ${F(
+      ${M(
       !this.noCrop,
-      () => v`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === p.Crop} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
+      () => S`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === p.Crop} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
     )}
-      ${F(
+      ${M(
       !this.noResize,
-      () => v`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === p.Resize} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
+      () => S`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === p.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
     )}
-      ${F(
+      ${M(
       !this.noRotate,
-      () => v`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === p.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`
-    )}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === p.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${F(
+      () => S`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === p.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`
+    )}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === p.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${M(
       !this.noMetadata,
-      () => v`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`
+      () => S`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`
     )}
-      ${F(
+      ${M(
       this.useCustomExtension,
-      () => v`<cx-asset-link-format-extension .items=${this.extensions} value=${this.selectedFormat?.extension ?? ""} @cx-asset-link-format-extension-change=${this.onExtensionChange}></cx-asset-link-format-extension>`
+      () => S`<cx-asset-link-format-extension .items=${this.extensions} value=${this.selectedFormat?.extension ?? ""} @cx-asset-link-format-extension-change=${this.onExtensionChange}></cx-asset-link-format-extension>`
     )}</div>`;
   }
 };
@@ -2661,8 +2682,8 @@ d.dependencies = {
   "cx-asset-link-format-metadata": T,
   "cx-asset-link-format-proxy": P,
   "cx-asset-link-format-quality": H,
-  "cx-asset-link-format-resize": A,
-  "cx-asset-link-format-rotation": M,
+  "cx-asset-link-format-resize": v,
+  "cx-asset-link-format-rotation": F,
   "cx-button": G,
   "cx-space": D,
   "cx-typography": N
@@ -2787,20 +2808,20 @@ export {
   _t as F,
   X as O,
   yi as a,
-  Pt as b,
+  Mt as b,
   bt as c,
   xi as d,
-  kt as e,
+  Ct as e,
   ie as f,
   Wt as g,
   zi as h,
-  vi as i,
+  Ai as i,
   Si as j,
   Dt as k,
   at as l,
-  Ct as m,
+  kt as m,
   Rt as n,
-  Mt as o,
+  Pt as o,
   Zt as p,
   Xt as u
 };