@orangelogic/design-system 2.145.0 → 2.147.0

package/library/chunks/{asset-link-format.D6XVEha7.js → asset-link-format.DyUDG8er.js}

@@ -1,42 +1,42 @@
 import "../components/cropper.js";
-import { C as V } from "./button.Bx7AnUu4.js";
+import { C as G } from "./button.W0tW1LJ-.js";
 import D from "../components/space.js";
-import { C as T } from "./typography.IqHbnd3C.js";
-import { n as h, C as N } from "./lib-cortex-element.CVMmyPMC.js";
-import { h as P, a as Et, C as It, S as Nt, b as Ot, c as Lt, d as Ut } from "./endpoints.Bn_YviaU.js";
-import { M as At, U as o, T as c } from "./asset-link-format.QzzboHHE.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 "./browser.BHOCIF_A.js";
-import { i as O, x as A, E as qt } from "./lit-element.jLBm65_O.js";
+import { i as L, x as v, E as qt } from "./lit-element.jLBm65_O.js";
 import "./form.BSqXLytJ.js";
-import { L } from "./i18n.DYXys45m.js";
-import { a as jt } from "./string.BmBJ_BLT.js";
+import { L as U } from "./i18n.D07sG_CU.js";
+import { a as Bt } from "./string.BmBJ_BLT.js";
 import "./date-picker.DTUICGb9.js";
 import "./content-builder.DZRw6hpX.js";
 import "./unsafe-html.Dff7-rCx.js";
-import { b as Bt } from "./_baseUniq.CoXu-orP.js";
-import { c as U } from "./component.styles.CRO4Odto.js";
-import { c as q } from "./custom-element.L4WJXn1j.js";
-import { w as R } from "./watch.K-dbDP6P.js";
-import { s as zt, c as et } from "./number.B4PQLJIg.js";
-import { b as it } from "./transformation.c-RS37zA.js";
-import { r as v } from "./state.CSDxrqLd.js";
-import { n as E } from "./when.Dr1es41R.js";
+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 { b as it } from "./transformation.DGzjBg6V.js";
+import { r as b } from "./state.CSDxrqLd.js";
+import { n as F } 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.B0L-_zT9.js";
-import { C as ft } from "./input.CSI9KLz7.js";
-import { C as nt } from "./option.BweUpygr.js";
-import ht from "../components/select.js";
-import { c as Gt } from "./image.BzmclWBR.js";
+import { C as mt } from "./icon-button.CaUkGny9.js";
+import { C as ft } from "./input.CtpPKmen.js";
+import { C as ht } from "./option.DoCfNbP9.js";
+import nt from "../components/select.js";
+import { c as Gt } from "./image.QVlPFadX.js";
 import { e as J } from "./query.BBf1UFkC.js";
 import { c as tt } from "./repeat.CFjcER6_.js";
 import { o as I } from "./style-map.llVFPd__.js";
-import Ht from "../components/tooltip.js";
+import It from "../components/tooltip.js";
 import Qt from "../components/button-group.js";
 import { C as Kt } from "./checkbox.aQnF4Zc3.js";
 function Xt(t) {
-  return t && t.length ? Bt(t) : [];
+  return t && t.length ? jt(t) : [];
 }
 function Zt(t) {
   return typeof t == "object" && t !== null && "URI" in t;
@@ -81,10 +81,10 @@ function ee(t) {
     if (a == null)
       continue;
     if (s === "custom") {
-      for (const [n, l] of Object.entries(
+      for (const [h, l] of Object.entries(
         a
       ))
-        e.push(wt(n, l));
+        e.push(wt(h, l));
       continue;
     }
     const r = Yt[s];
@@ -100,12 +100,12 @@ function ee(t) {
         continue;
       }
       if (s === "parentFolderIdentifier") {
-        const n = Array.isArray(a) ? a : [a];
-        if (n.length === 0)
+        const h = Array.isArray(a) ? a : [a];
+        if (h.length === 0)
           continue;
         const l = [
-          ...n.map((f) => `ParentFolderIdentifier:${dt(String(f))}`),
-          ...n.map((f) => `ParentAlbumIdentifier:${dt(String(f))}`)
+          ...h.map((m) => `ParentFolderIdentifier:${dt(String(m))}`),
+          ...h.map((m) => `ParentAlbumIdentifier:${dt(String(m))}`)
         ];
         e.push(`(${l.join(" OR ")})`);
         continue;
@@ -128,22 +128,22 @@ function st(t) {
   }
   return ee(t);
 }
-const ut = "CoreField.LargeSizePreview", vt = "CoreField.DocType", ie = "Document.Title", se = "Document.CaptionLong", kt = "Document.FileExtension", Ct = "CoreField.FileSize", Rt = "CoreField.Identifier", $t = "CoreField.Keywords", Pt = "CoreField.MaxHeight", _t = "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", 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 = {
   DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
   FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
   ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
-}, Dt = {
+}, Tt = {
   [ut]: pt.DEFAULT_VIEW_SIZE,
   [Wt]: pt.FIELD_TITLE_WITH_FALLBACK,
   [X]: pt.ORIGINAL_VIEW_SIZE
 }, ae = Object.fromEntries(
-  Object.entries(Dt).map(([t, e]) => [
+  Object.entries(Tt).map(([t, e]) => [
     e,
     t
   ])
 );
 function oe(t) {
-  return Dt[t] ?? t;
+  return Tt[t] ?? t;
 }
 function Ft(t) {
   const e = {};
@@ -153,51 +153,51 @@ function Ft(t) {
   }
   return e;
 }
-async function Tt({
+async function Dt({
   countPerPage: t,
   fields: e,
   getPermanentAssetsPaths: i,
   isSiteBuilder: s,
   pageNumber: a,
   query: r,
-  securityByPassToken: n,
+  securityByPassToken: h,
   siteUrl: l,
-  sort: f,
-  token: y,
-  useSession: m
+  sort: m,
+  token: x,
+  useSession: c
 }) {
-  const S = e?.map(oe);
+  const y = e?.map(oe);
   try {
-    return (await P.request({
+    return (await _.request({
       baseURL: l,
-      headers: y ? { Authorization: `Bearer ${y}` } : void 0,
+      headers: x ? { Authorization: `Bearer ${x}` } : void 0,
       method: "GET",
       params: {
         CountPerPage: t,
-        Fields: Xt(S),
+        Fields: Xt(y),
         Format: "json",
         GetPermanentAssetsPaths: i || void 0,
         PageNumber: a,
         Query: st(r),
-        SecurityByPassToken: n || void 0,
-        Sort: f || void 0,
-        UseSession: m || void 0
+        SecurityByPassToken: h || void 0,
+        Sort: m || void 0,
+        UseSession: c || void 0
       },
       paramsSerializer: { indexes: null },
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [],
-        s ? (u) => ({
-          items: (u.results?.Items ?? []).map(Ft),
-          sort: u.results?.GlobalInfo?.Sort ?? "",
-          totalCount: u.results?.GlobalInfo?.TotalCount ?? 0
-        }) : (u) => ({
-          items: (u.APIResponse?.Items ?? []).map(Ft),
-          sort: u.APIResponse?.GlobalInfo?.Sort ?? "",
-          totalCount: u.APIResponse?.GlobalInfo?.TotalCount ?? 0
+        ...Array.isArray(_.defaults.transformResponse) ? _.defaults.transformResponse : [],
+        s ? (f) => ({
+          items: (f.results?.Items ?? []).map(Ft),
+          sort: f.results?.GlobalInfo?.Sort ?? "",
+          totalCount: f.results?.GlobalInfo?.TotalCount ?? 0
+        }) : (f) => ({
+          items: (f.APIResponse?.Items ?? []).map(Ft),
+          sort: f.APIResponse?.GlobalInfo?.Sort ?? "",
+          totalCount: f.APIResponse?.GlobalInfo?.TotalCount ?? 0
         })
       ],
-      url: s ? It.SEARCH_ASSETS : Nt["4.0"]
+      url: s ? Et.SEARCH_ASSETS : Nt["4.0"]
     })).data;
   } catch {
     return { items: [], sort: "", totalCount: 0 };
@@ -210,33 +210,33 @@ async function re({
   siteUrl: s,
   token: a,
   transformations: r,
-  useSession: n
+  useSession: h
 }) {
   try {
-    return (await P.request({
+    return (await _.request({
       baseURL: s,
       method: "GET",
       params: {
         SourceAssetFormat: i,
         SourceAssetRecordID: t,
-        TargetExtension: jt(e),
+        TargetExtension: Bt(e),
         Token: a || void 0,
         Transformations: r,
-        UseSession: n || void 0
+        UseSession: h || void 0
       },
       /**
        * https://link.orangelogic.com/Tasks/41S1XH
        */
       timeout: 3e5,
       // 5 minutes
-      url: Et.GET_TRANSFORM_ASSET_LINK
+      url: Ht.GET_TRANSFORM_ASSET_LINK
     })).data;
   } catch {
     return null;
   }
 }
-const ne = 50;
-function he(t, e) {
+const he = 50;
+function ne(t, e) {
   const i = [];
   for (let s = 0; s < t.length; s += e)
     i.push(t.slice(s, s + e));
@@ -252,45 +252,45 @@ async function xi({
 }) {
   if (!Array.isArray(s) || s.length === 0)
     return { facets: [], items: [], totalCount: 0 };
-  const n = t?.filter((u) => u && typeof u == "string") ?? [], l = [
-    ...n,
+  const h = t?.filter((f) => f && typeof f == "string") ?? [], l = [
+    ...h,
     X,
     rt,
     ot,
     ie,
     se,
     at
-  ], f = he(s, ne), y = await Promise.all(
-    f.map(
-      (u) => Tt({
-        countPerPage: u.length,
+  ], m = ne(s, he), x = await Promise.all(
+    m.map(
+      (f) => Dt({
+        countPerPage: f.length,
         fields: l,
         getPermanentAssetsPaths: e,
         isSiteBuilder: i,
         pageNumber: 1,
-        query: { recordId: u },
+        query: { recordId: f },
         securityByPassToken: a,
         token: r
       })
     )
-  ), m = new Map(s.map((u, $) => [u, $])), S = y.flatMap((u) => u.items).map((u) => {
-    let $ = w(u, rt);
-    return $ === "" && ($ = w(u, ot)), {
-      name: $,
-      originalUrl: w(u, X),
-      recordId: w(u, at),
-      ...n.reduce(
-        (Q, b) => (Q[b] = w(u, b), Q),
+  ), c = new Map(s.map((f, R) => [f, R])), y = x.flatMap((f) => f.items).map((f) => {
+    let R = w(f, rt);
+    return R === "" && (R = w(f, ot)), {
+      name: R,
+      originalUrl: w(f, X),
+      recordId: w(f, at),
+      ...h.reduce(
+        (E, z) => (E[z] = w(f, z), E),
         {}
       )
     };
   }).sort(
-    (u, $) => (m.get(u.recordId) ?? 1 / 0) - (m.get($.recordId) ?? 1 / 0)
-  ), C = y.reduce(
-    (u, $) => u + $.totalCount,
+    (f, R) => (c.get(f.recordId) ?? 1 / 0) - (c.get(R.recordId) ?? 1 / 0)
+  ), k = x.reduce(
+    (f, R) => f + R.totalCount,
     0
   );
-  return { facets: [], items: S, totalCount: C };
+  return { facets: [], items: y, totalCount: k };
 }
 function w(t, e) {
   const i = t[e];
@@ -303,31 +303,31 @@ async function yi({
   getPermanentAssetsPaths: s,
   isSiteBuilder: a,
   limitedDocTypes: r,
-  pageNumber: n,
+  pageNumber: h,
   parentFolderIdentifier: l,
-  searchTerm: f,
-  securityByPassToken: y,
-  sortOrder: m,
-  token: S
+  searchTerm: m,
+  securityByPassToken: x,
+  sortOrder: c,
+  token: y
 }) {
   if (!e && !l)
     return { facets: [], items: [], totalCount: 0 };
-  const C = (i?.filter((b) => b && typeof b == "string") ?? []).map((b) => b.replace("%20", " ")), u = {
+  const k = (i?.filter((z) => z && typeof z == "string") ?? []).map((z) => z.replace("%20", " ")), f = {
     directParentFolderIdentifier: e,
     parentFolderIdentifier: l,
-    ...r.length > 0 ? { docType: [At.Image, At.Audio] } : {}
-  }, $ = await Tt({
+    ...r.length > 0 ? { docType: [vt.Image, vt.Audio] } : {}
+  }, R = await Dt({
     countPerPage: t,
     fields: [
-      ...C,
+      ...k,
       Wt,
       ut,
       X,
       $t,
-      _t,
       Pt,
+      _t,
       Ct,
-      vt,
+      bt,
       Mt,
       Rt,
       kt,
@@ -337,39 +337,39 @@ async function yi({
     ],
     getPermanentAssetsPaths: s,
     isSiteBuilder: a,
-    pageNumber: n,
-    query: u,
-    securityByPassToken: y,
+    pageNumber: h,
+    query: f,
+    securityByPassToken: x,
     sort: void 0,
-    token: S
-  }), Q = $.items.map((b) => {
-    let K = w(b, kt), ct = w(b, rt), xt = w(b, ut);
-    K && !K.startsWith(".") && (K = "." + K), ct === "" && (ct = w(b, ot)), K.toLowerCase() === ".gif" && (xt = w(b, X));
-    const yt = w(b, at);
+    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);
     return {
-      docSubType: w(b, Mt),
-      docType: w(b, vt) || "",
+      docSubType: w(z, Mt),
+      docType: w(z, bt) || "",
       extension: K,
-      height: w(b, Pt) || "0",
+      height: w(z, _t) || "0",
       id: yt,
-      identifier: w(b, Rt),
+      identifier: w(z, Rt),
       imageUrl: xt,
       name: ct,
-      originalUrl: w(b, X),
+      originalUrl: w(z, X),
       recordId: yt,
-      size: w(b, Ct) || "0 MB",
-      tags: w(b, $t),
-      width: w(b, _t) || "0",
-      ...C.reduce(
-        (St, bt) => (St[bt] = w(b, bt), St),
+      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),
         {}
       )
     };
   });
   return {
     facets: [],
-    items: Q,
-    totalCount: $.totalCount
+    items: E,
+    totalCount: R.totalCount
   };
 }
 async function le({
@@ -380,7 +380,7 @@ async function le({
   useSession: a
 }) {
   try {
-    return (await P.request({
+    return (await _.request({
       method: "GET",
       params: {
         AutoCropMode: t,
@@ -393,15 +393,15 @@ async function le({
       timeout: 3e5,
       // 5 minutes
       transformResponse: [
-        ...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [],
-        (n) => ({
-          height: n.cropHeight,
-          width: n.cropWidth,
-          x: n.cropX,
-          y: n.cropY
+        ...Array.isArray(_.defaults.transformResponse) ? _.defaults.transformResponse : [],
+        (h) => ({
+          height: h.cropHeight,
+          width: h.cropWidth,
+          x: h.cropX,
+          y: h.cropY
         })
       ],
-      url: Et.GET_CROP_ZONE_SUGGESTION
+      url: Ht.GET_CROP_ZONE_SUGGESTION
     })).data;
   } catch {
     return null;
@@ -415,7 +415,7 @@ async function Si({
   useSession: a
 }) {
   try {
-    return (await P.request({
+    return (await _.request({
       baseURL: i,
       method: "GET",
       params: {
@@ -425,8 +425,8 @@ async function Si({
       },
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [],
-        (n) => !n || typeof n != "object" ? [] : n.proxies?.map((l) => ({
+        ...Array.isArray(_.defaults.transformResponse) ? _.defaults.transformResponse : [],
+        (h) => !h || typeof h != "object" ? [] : h.proxies?.map((l) => ({
           cdnName: l.cdnName,
           extension: l.extension,
           formatHeight: l.formatHeight,
@@ -438,22 +438,22 @@ async function Si({
           width: l.width
         })) ?? []
       ],
-      url: e ? It.GET_AVAILABLE_PROXIES : Ut
+      url: e ? Et.GET_AVAILABLE_PROXIES : Ut
     })).data;
   } catch {
     return [];
   }
 }
-async function bi({
+async function zi({
   siteUrl: t
 } = {}) {
   try {
-    return (await P.request({
+    return (await _.request({
       baseURL: t,
       method: "GET",
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [],
+        ...Array.isArray(_.defaults.transformResponse) ? _.defaults.transformResponse : [],
         (i) => !i || typeof i != "object" ? {
           formatsByDocType: {
             Audio: {},
@@ -471,7 +471,7 @@ async function bi({
     return { formatsByDocType: {} };
   }
 }
-async function Ai({
+async function vi({
   recordIds: t,
   rightsToCheck: e
 }) {
@@ -482,7 +482,7 @@ async function Ai({
     invalidObjects: []
   };
   try {
-    const { data: s } = await P.request({
+    const { data: s } = await _.request({
       method: "GET",
       params: { RecordIDs: t, RightsToCheck: e },
       paramsSerializer: { indexes: null },
@@ -494,15 +494,15 @@ async function Ai({
     return i;
   }
 }
-const ce = O`.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 = O`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, x = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ue(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+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) => {
+  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;
 };
-let g = class extends N {
+let g = class extends O {
   constructor() {
-    super(...arguments), this.localize = new L(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.lastAppliedSetting = {
+    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.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.lastAppliedSetting = {
       [o.Pixel]: {
         height: 0,
         percentageHeight: 100,
@@ -548,14 +548,17 @@ let g = class extends N {
     this.aspectRatio = 1;
   }
   async handleOpenChange() {
-    this.cropMode = "free", await this.updateComplete, this.open || (this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-crop-change", {
-      detail: {
-        height: this.lastAppliedSetting[o.Pixel].height,
-        keepAspectRatio: this.keepAspectRatio,
-        unit: o.Pixel,
-        width: this.lastAppliedSetting[o.Pixel].width
-      }
-    }));
+    if (this.cropMode = "free", await this.updateComplete, !this.open) {
+      const t = this.lastAppliedSetting[this.unit];
+      (t.width || t.height) && (this.width = t.width, this.height = t.height, this.emit("cx-asset-link-format-crop-change", {
+        detail: {
+          height: t.height,
+          keepAspectRatio: this.keepAspectRatio,
+          unit: this.unit,
+          width: t.width
+        }
+      }));
+    }
   }
   handleWidthChange(t) {
     if (!t.target.value) {
@@ -610,15 +613,15 @@ let g = class extends N {
     else if (!i) {
       const [s, a] = e.split(":").map(Number);
       if (this.unit === o.Pixel) {
-        let r = s, n = a;
-        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: n, width: r } = Gt(
+        let r = s, h = a;
+        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: h, width: r } = Gt(
           this.maxWidth,
           this.maxHeight,
           s,
           a
         )), this.emit("cx-asset-link-format-crop-change", {
           detail: {
-            height: n,
+            height: h,
             keepAspectRatio: !0,
             silent: !0,
             unit: o.Pixel,
@@ -721,141 +724,147 @@ let g = class extends N {
   }
   render() {
     const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
-    return A`<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"><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 }) => A`<cx-option value=${s}>${i}</cx-option>`
-    )}
-          ${E(
-      e.length > 0,
-      () => A`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
-    )}
-          ${tt(
-      e,
-      (i) => i.value,
-      ({ label: i, value: s }) => A`<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">
+    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(
+      !this.noRatioModes,
+      () => v`<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>`
+      )}
+              ${F(
+        e.length > 0,
+        () => v`<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>`
+      )}</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
               </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-crop-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-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>${E(
+              </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(
       this.focusModes.length > 0,
-      () => A`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${I({
+      () => v`<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 }) => A`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => v`<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"
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-g.styles = [U, pe];
+g.styles = [q, pe];
 g.dependencies = {
-  "cx-button": V,
+  "cx-button": G,
   "cx-details": Z,
   "cx-divider": Vt,
   "cx-icon": Y,
   "cx-icon-button": mt,
   "cx-input": ft,
-  "cx-option": nt,
-  "cx-select": ht,
+  "cx-option": ht,
+  "cx-select": nt,
   "cx-space": D,
-  "cx-typography": T
+  "cx-typography": N
 };
-x([
+S([
   J(".details")
 ], g.prototype, "base", 2);
-x([
-  h({ reflect: !0, type: Boolean })
+S([
+  n({ reflect: !0, type: Boolean })
 ], g.prototype, "open", 2);
-x([
-  h({ reflect: !0, type: Number })
+S([
+  n({ reflect: !0, type: Number })
 ], g.prototype, "width", 2);
-x([
-  h({ reflect: !0, type: Number })
+S([
+  n({ reflect: !0, type: Number })
 ], g.prototype, "height", 2);
-x([
-  h({ attribute: "max-width", reflect: !0, type: Number })
+S([
+  n({ attribute: "max-width", reflect: !0, type: Number })
 ], g.prototype, "maxWidth", 2);
-x([
-  h({ attribute: "max-height", reflect: !0, type: Number })
+S([
+  n({ attribute: "max-height", reflect: !0, type: Number })
 ], g.prototype, "maxHeight", 2);
-x([
-  h({ attribute: "ratio-width", reflect: !0, type: Number })
+S([
+  n({ attribute: "ratio-width", reflect: !0, type: Number })
 ], g.prototype, "ratioWidth", 2);
-x([
-  h({ attribute: "ratio-height", reflect: !0, type: Number })
+S([
+  n({ attribute: "ratio-height", reflect: !0, type: Number })
 ], g.prototype, "ratioHeight", 2);
-x([
-  h({ attribute: "percentage-width", reflect: !0, type: Number })
+S([
+  n({ attribute: "percentage-width", reflect: !0, type: Number })
 ], g.prototype, "percentageWidth", 2);
-x([
-  h({ attribute: "percentage-height", reflect: !0, type: Number })
+S([
+  n({ attribute: "percentage-height", reflect: !0, type: Number })
 ], g.prototype, "percentageHeight", 2);
-x([
-  h({ reflect: !0, type: String })
+S([
+  n({ reflect: !0, type: String })
 ], g.prototype, "unit", 2);
-x([
-  h({ attribute: "disabled-apply", reflect: !0, type: Boolean })
+S([
+  n({ attribute: "disabled-apply", reflect: !0, type: Boolean })
 ], g.prototype, "disabledApply", 2);
-x([
-  h({ attribute: "last-applied-setting", reflect: !1, type: Object })
+S([
+  n({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
+], g.prototype, "noRatioModes", 2);
+S([
+  n({ attribute: "last-applied-setting", reflect: !1, type: Object })
 ], g.prototype, "lastAppliedSetting", 2);
-x([
-  h({ reflect: !0, type: Boolean })
+S([
+  n({ reflect: !0, type: Boolean })
 ], g.prototype, "loading", 2);
-x([
-  h({ attribute: "crop-modes", reflect: !1, type: Array })
+S([
+  n({ attribute: "crop-modes", reflect: !1, type: Array })
 ], g.prototype, "cropModes", 2);
-x([
-  h({ attribute: "focus-modes", reflect: !1, type: Object })
+S([
+  n({ attribute: "focus-modes", reflect: !1, type: Object })
 ], g.prototype, "focusModes", 2);
-x([
-  h({ attribute: "focus-mode", reflect: !0, type: String })
+S([
+  n({ attribute: "focus-mode", reflect: !0, type: String })
 ], g.prototype, "focusMode", 2);
-x([
-  h({ attribute: "crop-mode", reflect: !0, type: String })
+S([
+  n({ attribute: "crop-mode", reflect: !0, type: String })
 ], g.prototype, "cropMode", 2);
-x([
-  h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+S([
+  n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
 ], g.prototype, "keepAspectRatio", 2);
-x([
-  v()
+S([
+  b()
 ], g.prototype, "invalidWidth", 2);
-x([
-  v()
+S([
+  b()
 ], g.prototype, "invalidHeight", 2);
-x([
-  v()
+S([
+  b()
 ], g.prototype, "aspectRatio", 2);
-x([
-  R("cropMode", { waitUntilFirstUpdate: !0 }),
-  R("maxWidth", { waitUntilFirstUpdate: !0 }),
-  R("maxHeight", { waitUntilFirstUpdate: !0 }),
-  R("keepAspectRatio")
+S([
+  $("cropMode", { waitUntilFirstUpdate: !0 }),
+  $("maxWidth", { waitUntilFirstUpdate: !0 }),
+  $("maxHeight", { waitUntilFirstUpdate: !0 }),
+  $("keepAspectRatio")
 ], g.prototype, "handleCropModeChange", 1);
-x([
-  R("open")
+S([
+  $("open", { waitUntilFirstUpdate: !0 })
 ], g.prototype, "handleOpenChange", 1);
-g = x([
-  q("cx-asset-link-format-crop")
+g = S([
+  B("cx-asset-link-format-crop")
 ], g);
-const me = O`.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%}}`;
+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%}}`;
 var fe = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, gt = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ge(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  for (var a = s > 1 ? void 0 : s ? ge(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 && fe(e, i, a), a;
 };
-let B = class extends N {
+let V = class extends O {
   constructor() {
-    super(...arguments), this.localize = new L(this), this.value = "", this.items = [];
+    super(...arguments), this.localize = new U(this), this.value = "", this.items = [];
   }
   handleExtensionChange(t) {
     const e = t.target.value;
@@ -864,38 +873,38 @@ let B = class extends N {
     });
   }
   render() {
-    return A`<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 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(
       this.items,
       (t) => t.value,
-      (t) => A`<cx-option value=${t.value}>${t.displayName}</cx-option>`
+      (t) => v`<cx-option value=${t.value}>${t.displayName}</cx-option>`
     )}</cx-select></cx-space>`;
   }
 };
-B.styles = [U, me];
-B.dependencies = {
-  "cx-option": nt,
-  "cx-select": ht,
+V.styles = [q, me];
+V.dependencies = {
+  "cx-option": ht,
+  "cx-select": nt,
   "cx-space": D,
-  "cx-typography": T
+  "cx-typography": N
 };
 gt([
-  h({ reflect: !0, type: String })
-], B.prototype, "value", 2);
+  n({ reflect: !0, type: String })
+], V.prototype, "value", 2);
 gt([
-  h({ reflect: !1, type: Array })
-], B.prototype, "items", 2);
-B = gt([
-  q("cx-asset-link-format-extension")
-], B);
-const xe = O`cx-details::part(base){border-bottom-width:0}`;
-var ye = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, H = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Se(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  n({ reflect: !1, type: Array })
+], V.prototype, "items", 2);
+V = gt([
+  B("cx-asset-link-format-extension")
+], V);
+const xe = L`cx-details::part(base){border-bottom-width:0}`;
+var ye = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, W = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Se(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 && ye(e, i, a), a;
 };
-let _ = class extends N {
+let P = class extends O {
   constructor() {
-    super(...arguments), this.localize = new L(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
+    super(...arguments), this.localize = new U(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
   }
   handleValueChange() {
     this.scopedValue = this.value;
@@ -939,61 +948,61 @@ let _ = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return A`<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 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(
       this.items,
       (t) => t.id,
-      (t) => A`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
+      (t) => v`<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>`;
   }
 };
-_.styles = [U, xe];
-_.dependencies = {
-  "cx-button": V,
+P.styles = [q, xe];
+P.dependencies = {
+  "cx-button": G,
   "cx-details": Z,
   "cx-icon": Y,
-  "cx-option": nt,
-  "cx-select": ht,
+  "cx-option": ht,
+  "cx-select": nt,
   "cx-space": D,
-  "cx-typography": T
+  "cx-typography": N
 };
-H([
+W([
   J(".details")
-], _.prototype, "base", 2);
-H([
-  h({ reflect: !0, type: Boolean })
-], _.prototype, "open", 2);
-H([
-  h({ reflect: !0, type: String })
-], _.prototype, "value", 2);
-H([
-  h({ reflect: !1, type: Array })
-], _.prototype, "items", 2);
-H([
-  h({ reflect: !0, type: Boolean })
-], _.prototype, "loading", 2);
-H([
-  v()
-], _.prototype, "scopedValue", 2);
-H([
-  R("value")
-], _.prototype, "handleValueChange", 1);
-H([
-  R("open", { waitUntilFirstUpdate: !0 })
-], _.prototype, "handleOpenChange", 1);
-_ = H([
-  q("cx-asset-link-format-proxy")
-], _);
-const be = O`cx-details::part(base){border-bottom-width:0}`;
-var Ae = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, G = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ze(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
-  return s && a && Ae(e, i, a), a;
+], P.prototype, "base", 2);
+W([
+  n({ reflect: !0, type: Boolean })
+], P.prototype, "open", 2);
+W([
+  n({ reflect: !0, type: String })
+], P.prototype, "value", 2);
+W([
+  n({ reflect: !1, type: Array })
+], P.prototype, "items", 2);
+W([
+  n({ reflect: !0, type: Boolean })
+], P.prototype, "loading", 2);
+W([
+  b()
+], P.prototype, "scopedValue", 2);
+W([
+  $("value")
+], P.prototype, "handleValueChange", 1);
+W([
+  $("open", { waitUntilFirstUpdate: !0 })
+], P.prototype, "handleOpenChange", 1);
+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--)
+    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
+  return s && a && ve(e, i, a), a;
 };
-let F = class extends N {
+let H = class extends O {
   constructor() {
-    super(...arguments), this.localize = new L(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+    super(...arguments), this.localize = new U(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
   }
   /**
    * A computed property that checks if the current quality value is invalid.
@@ -1037,51 +1046,51 @@ let F = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return A`<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 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({
       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>`;
   }
 };
-F.styles = [U, be];
-F.dependencies = {
-  "cx-button": V,
+H.styles = [q, ze];
+H.dependencies = {
+  "cx-button": G,
   "cx-details": Z,
   "cx-icon": Y,
   "cx-input": ft,
   "cx-space": D,
-  "cx-tooltip": Ht,
-  "cx-typography": T
+  "cx-tooltip": It,
+  "cx-typography": N
 };
-G([
+Q([
   J(".details")
-], F.prototype, "base", 2);
-G([
-  h({ reflect: !0, type: Boolean })
-], F.prototype, "open", 2);
-G([
-  h({ reflect: !0, type: Number })
-], F.prototype, "value", 2);
-G([
-  h({ reflect: !0, type: Boolean })
-], F.prototype, "loading", 2);
-G([
-  v()
-], F.prototype, "scopedValue", 2);
-G([
-  R("value")
-], F.prototype, "handleValueChange", 1);
-F = G([
-  q("cx-asset-link-format-quality")
-], F);
-const we = O`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 ve = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, k = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ke(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
-  return s && a && ve(e, i, a), a;
+], H.prototype, "base", 2);
+Q([
+  n({ reflect: !0, type: Boolean })
+], H.prototype, "open", 2);
+Q([
+  n({ reflect: !0, type: Number })
+], H.prototype, "value", 2);
+Q([
+  n({ reflect: !0, type: Boolean })
+], H.prototype, "loading", 2);
+Q([
+  b()
+], H.prototype, "scopedValue", 2);
+Q([
+  $("value")
+], H.prototype, "handleValueChange", 1);
+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--)
+    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
+  return s && a && be(e, i, a), a;
 };
-let z = class extends N {
+let A = class extends O {
   constructor() {
-    super(...arguments), this.localize = new L(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 = {
+    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;
@@ -1111,14 +1120,17 @@ let z = class extends N {
     this.aspectRatio = 1;
   }
   async handleOpenChange() {
-    await this.updateComplete, this.open || (this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-resize-change", {
-      detail: {
-        height: this.lastAppliedSetting[o.Pixel].height,
-        keepAspectRatio: this.keepAspectRatio,
-        unit: o.Pixel,
-        width: this.lastAppliedSetting[o.Pixel].width
-      }
-    }));
+    if (await this.updateComplete, !this.open) {
+      const t = this.lastAppliedSetting[this.unit];
+      (t.width || t.height) && (this.width = t.width, this.height = t.height, this.emit("cx-asset-link-format-resize-change", {
+        detail: {
+          height: t.height,
+          keepAspectRatio: this.keepAspectRatio,
+          unit: this.unit,
+          width: t.width
+        }
+      }));
+    }
   }
   handleWidthChange(t) {
     if (!t.target.value) {
@@ -1215,7 +1227,7 @@ let z = class extends N {
     });
   }
   render() {
-    return A`<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 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">
                 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
@@ -1226,84 +1238,84 @@ let z = class extends N {
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-z.styles = [U, we];
-z.dependencies = {
-  "cx-button": V,
+A.styles = [q, we];
+A.dependencies = {
+  "cx-button": G,
   "cx-details": Z,
   "cx-icon": Y,
   "cx-icon-button": mt,
   "cx-input": ft,
-  "cx-option": nt,
-  "cx-select": ht,
+  "cx-option": ht,
+  "cx-select": nt,
   "cx-space": D,
-  "cx-typography": T
+  "cx-typography": N
 };
-k([
+C([
   J(".details")
-], z.prototype, "base", 2);
-k([
-  h({ reflect: !0, type: Boolean })
-], z.prototype, "open", 2);
-k([
-  h({ reflect: !0, type: Number })
-], z.prototype, "width", 2);
-k([
-  h({ reflect: !0, type: Number })
-], z.prototype, "height", 2);
-k([
-  h({ attribute: "max-width", reflect: !0, type: Number })
-], z.prototype, "maxWidth", 2);
-k([
-  h({ attribute: "max-height", reflect: !0, type: Number })
-], z.prototype, "maxHeight", 2);
-k([
-  h({ attribute: "ratio-width", reflect: !0, type: Number })
-], z.prototype, "ratioWidth", 2);
-k([
-  h({ attribute: "ratio-height", reflect: !0, type: Number })
-], z.prototype, "ratioHeight", 2);
-k([
-  h({ reflect: !0, type: String })
-], z.prototype, "unit", 2);
-k([
-  h({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], z.prototype, "lastAppliedSetting", 2);
-k([
-  h({ reflect: !0, type: Boolean })
-], z.prototype, "loading", 2);
-k([
-  h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], z.prototype, "keepAspectRatio", 2);
-k([
-  v()
-], z.prototype, "invalidWidth", 2);
-k([
-  v()
-], z.prototype, "invalidHeight", 2);
-k([
-  v()
-], z.prototype, "aspectRatio", 2);
-k([
-  R("cropMode", { waitUntilFirstUpdate: !0 }),
-  R("maxWidth", { waitUntilFirstUpdate: !0 }),
-  R("maxHeight", { waitUntilFirstUpdate: !0 }),
-  R("keepAspectRatio")
-], z.prototype, "handleCropModeChange", 1);
-k([
-  R("open")
-], z.prototype, "handleOpenChange", 1);
-z = k([
-  q("cx-asset-link-format-resize")
-], z);
-const Ce = O`cx-details::part(base){border-bottom-width:0}`;
+], A.prototype, "base", 2);
+C([
+  n({ reflect: !0, type: Boolean })
+], A.prototype, "open", 2);
+C([
+  n({ reflect: !0, type: Number })
+], A.prototype, "width", 2);
+C([
+  n({ reflect: !0, type: Number })
+], A.prototype, "height", 2);
+C([
+  n({ attribute: "max-width", reflect: !0, type: Number })
+], A.prototype, "maxWidth", 2);
+C([
+  n({ attribute: "max-height", reflect: !0, type: Number })
+], A.prototype, "maxHeight", 2);
+C([
+  n({ attribute: "ratio-width", reflect: !0, type: Number })
+], A.prototype, "ratioWidth", 2);
+C([
+  n({ attribute: "ratio-height", reflect: !0, type: Number })
+], A.prototype, "ratioHeight", 2);
+C([
+  n({ reflect: !0, type: String })
+], A.prototype, "unit", 2);
+C([
+  n({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], A.prototype, "lastAppliedSetting", 2);
+C([
+  n({ reflect: !0, type: Boolean })
+], A.prototype, "loading", 2);
+C([
+  n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], A.prototype, "keepAspectRatio", 2);
+C([
+  b()
+], A.prototype, "invalidWidth", 2);
+C([
+  b()
+], A.prototype, "invalidHeight", 2);
+C([
+  b()
+], A.prototype, "aspectRatio", 2);
+C([
+  $("cropMode", { waitUntilFirstUpdate: !0 }),
+  $("maxWidth", { waitUntilFirstUpdate: !0 }),
+  $("maxHeight", { waitUntilFirstUpdate: !0 }),
+  $("keepAspectRatio")
+], A.prototype, "handleCropModeChange", 1);
+C([
+  $("open", { waitUntilFirstUpdate: !0 })
+], A.prototype, "handleOpenChange", 1);
+A = C([
+  B("cx-asset-link-format-resize")
+], A);
+const Ce = 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, n; r >= 0; r--)
-    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  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 N {
+let M = class extends O {
   constructor() {
-    super(...arguments), this.localize = new L(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
+    super(...arguments), this.localize = new U(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
   }
   handleOpenChange() {
     this.open || this.emit("cx-asset-link-format-rotation-change", {
@@ -1311,14 +1323,17 @@ let M = class extends N {
     });
   }
   handleRotationChange(t) {
-    const e = t.target.value, i = zt(Number(e));
-    (Number(e) > 360 || Number(e) < -360) && (t.target.value = i.toString()), this.emit("cx-asset-link-format-rotation-change", {
-      detail: i
+    const e = t.target.value, i = Number(e);
+    if (Number.isNaN(i))
+      return;
+    const s = At(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: zt(t)
+      detail: At(t)
     });
   }
   handleClockwiseClick() {
@@ -1338,55 +1353,55 @@ let M = class extends N {
     });
   }
   render() {
-    return A`<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 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({
       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 = [U, Ce];
+M.styles = [q, Ce];
 M.dependencies = {
-  "cx-button": V,
+  "cx-button": G,
   "cx-button-group": Qt,
   "cx-details": Z,
   "cx-icon": Y,
   "cx-icon-button": mt,
   "cx-space": D,
-  "cx-typography": T
+  "cx-typography": N
 };
 j([
   J(".details")
 ], M.prototype, "base", 2);
 j([
-  h({ reflect: !0, type: Boolean })
+  n({ reflect: !0, type: Boolean })
 ], M.prototype, "open", 2);
 j([
-  h({ reflect: !0, type: Number })
+  n({ reflect: !0, type: Number })
 ], M.prototype, "value", 2);
 j([
-  h({ attribute: "default-value", reflect: !0, type: Number })
+  n({ attribute: "default-value", reflect: !0, type: Number })
 ], M.prototype, "defaultValue", 2);
 j([
-  h({ reflect: !0, type: Boolean })
+  n({ reflect: !0, type: Boolean })
 ], M.prototype, "loading", 2);
 j([
-  h({ attribute: "last-applied-value", reflect: !0, type: Number })
+  n({ attribute: "last-applied-value", reflect: !0, type: Number })
 ], M.prototype, "lastAppliedValue", 2);
 j([
-  R("open", { waitUntilFirstUpdate: !0 })
+  $("open", { waitUntilFirstUpdate: !0 })
 ], M.prototype, "handleOpenChange", 1);
 M = j([
-  q("cx-asset-link-format-rotation")
+  B("cx-asset-link-format-rotation")
 ], M);
-const Pe = O`cx-details::part(base){border-bottom-width:0}`;
-var _e = 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, n; r >= 0; r--)
-    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
-  return s && a && _e(e, i, a), a;
+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--)
+    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
+  return s && a && Pe(e, i, a), a;
 };
-let W = class extends N {
+let T = class extends O {
   constructor() {
-    super(...arguments), this.localize = new L(this), this.open = !1, this.value = !1;
+    super(...arguments), this.localize = new U(this), this.open = !1, this.value = !1;
   }
   handleApply(t) {
     this.emit("cx-asset-link-format-metadata-change", {
@@ -1410,39 +1425,39 @@ let W = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return A`<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 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>`;
   }
 };
-W.styles = [U, Pe];
-W.dependencies = {
-  "cx-button": V,
+T.styles = [q, _e];
+T.dependencies = {
+  "cx-button": G,
   "cx-checkbox": Kt,
   "cx-details": Z,
   "cx-icon": Y,
   "cx-space": D,
-  "cx-tooltip": Ht,
-  "cx-typography": T
+  "cx-tooltip": It,
+  "cx-typography": N
 };
 lt([
   J(".details")
-], W.prototype, "base", 2);
+], T.prototype, "base", 2);
 lt([
-  h({ reflect: !0, type: Boolean })
-], W.prototype, "open", 2);
+  n({ reflect: !0, type: Boolean })
+], T.prototype, "open", 2);
 lt([
-  h({ reflect: !0, type: Boolean })
-], W.prototype, "value", 2);
-W = lt([
-  q("cx-asset-link-format-metadata")
-], W);
-var Fe = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, d = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ee(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  n({ reflect: !0, type: Boolean })
+], T.prototype, "value", 2);
+T = lt([
+  B("cx-asset-link-format-metadata")
+], T);
+var Fe = Object.defineProperty, He = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? He(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 && Fe(e, i, a), a;
 };
-let p = class extends N {
+let d = class extends O {
   constructor() {
-    super(), this.localize = new L(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
+    super(), this.localize = new U(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
       {
         label: "Free",
         value: "free"
@@ -1505,23 +1520,33 @@ let p = class extends N {
       height: 0,
       width: 0
     }, this.hideHeader = !1, this.canReset = !1, this.queryElement = null, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
-      height: 0,
+      /**
+       * Matches the width/height input mask's `min: 1` in cx-asset-link-format-resize, so
+       * Apply still commits a meaningful 1x1 resize instead of a silent no-op when the user
+       * opens the panel and clicks Apply before typing into either input.
+       */
+      height: 1,
       keepAspectRatio: !0,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
-      width: 0
+      width: 1
     }, this.cropSize = {
       cropMode: "free",
       focusMode: "manual",
-      height: 0,
+      /**
+       * Matches the width/height input mask's `min: 1` in cx-asset-link-format-crop, so
+       * Apply still commits a meaningful 1x1 crop instead of a silent no-op when the user
+       * opens the panel and clicks Apply before typing into either input.
+       */
+      height: 1,
       keepAspectRatio: !0,
       percentageHeight: 0,
       percentageWidth: 0,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
-      width: 0,
+      width: 1,
       x: 0,
       y: 0
     }, this.rotation = 0, this.defaultSize = {
@@ -1533,6 +1558,16 @@ let p = class extends N {
   get hasUnfrozenTransformations() {
     return !(this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1);
   }
+  /**
+   * The unit of the last applied crop transformation, for the no-asset case only. Reflects
+   * whatever unit the last committed Crop transformation used, or Pixel when nothing has
+   * been applied yet.
+   */
+  get lastAppliedCropUnit() {
+    return this.transformations.findLast(
+      (e) => e.key === p.Crop
+    )?.value.unit ?? o.Pixel;
+  }
   /**
    * Checks if the crop apply button should be disabled.
    * This is determined by comparing the current crop size with the last crop size.
@@ -1540,17 +1575,22 @@ let p = class extends N {
    * @return {boolean} - Returns true if the crop apply button should be disabled, false otherwise.
    */
   get disabledCropApply() {
+    if (!this.asset && this.cropSize.unit !== this.lastAppliedCropUnit)
+      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;
+    }
     const t = [
       "height",
       "percentageHeight",
       "percentageWidth",
-      "unit",
       "width",
       "x",
       "y"
     ];
     for (const e of t)
-      if (this.cropSize[e] !== this.lastCropSize[this.cropSize.unit][e])
+      if (this.cropSize[e] !== this.lastCropSize[o.Pixel][e])
         return !1;
     return !0;
   }
@@ -1575,39 +1615,44 @@ let p = class extends N {
   get lastCropSize() {
     if (!this.asset) {
       const e = this.transformations.findLast(
-        (i) => i.key === c.Crop
+        (i) => i.key === p.Crop
       );
+      if (e?.value.unit === o.AspectRatio && e.value.ratioWidth && e.value.ratioHeight)
+        return {
+          [o.AspectRatio]: {
+            height: e.value.ratioHeight,
+            percentageHeight: 100,
+            percentageWidth: 100,
+            unit: o.AspectRatio,
+            width: e.value.ratioWidth,
+            x: 0,
+            y: 0
+          },
+          /**
+           * The last applied crop has no pixel size (only a ratio was ever committed, since
+           * there is no asset). Fall back to 1x1 (matching the width/height input mask's
+           * `min: 1`) instead of 0x0, so switching the unit selector back to Pixel and
+           * clicking Apply immediately still commits a meaningful crop instead of a no-op.
+           */
+          [o.Pixel]: {
+            height: 1,
+            percentageHeight: 100,
+            percentageWidth: 100,
+            unit: o.Pixel,
+            width: 1,
+            x: 0,
+            y: 0
+          }
+        };
       if (e?.value.width && e?.value.height) {
-        const { height: i, unit: s, width: a, x: r = 0, y: n = 0 } = e.value;
-        if (s === o.AspectRatio)
-          return {
-            [o.AspectRatio]: {
-              height: i,
-              percentageHeight: 100,
-              percentageWidth: 100,
-              unit: o.AspectRatio,
-              width: a,
-              x: 0,
-              y: 0
-            },
-            [o.Pixel]: {
-              height: 0,
-              percentageHeight: 100,
-              percentageWidth: 100,
-              unit: o.Pixel,
-              width: 0,
-              x: 0,
-              y: 0
-            }
-          };
-        const l = et(a, i);
+        const { height: i, width: s, x: a = 0, y: r = 0 } = e.value, h = et(s, i);
         return {
           [o.AspectRatio]: {
-            height: l.height,
+            height: h.height,
             percentageHeight: 100,
             percentageWidth: 100,
             unit: o.AspectRatio,
-            width: l.width,
+            width: h.width,
             x: 0,
             y: 0
           },
@@ -1616,17 +1661,14 @@ let p = class extends N {
             percentageHeight: 100,
             percentageWidth: 100,
             unit: o.Pixel,
-            width: a,
-            x: r,
-            y: n
+            width: s,
+            x: a,
+            y: r
           }
         };
       }
     }
-    const t = et(
-      this.lastImageSize.width,
-      this.lastImageSize.height
-    );
+    const t = this.lastImageSize.width && this.lastImageSize.height ? et(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
     return {
       [o.AspectRatio]: {
         height: t.height,
@@ -1656,42 +1698,39 @@ let p = class extends N {
   get lastResizeSize() {
     if (!this.asset) {
       const e = this.transformations.findLast(
-        (i) => i.key === c.Resize
+        (i) => i.key === p.Resize
       );
+      if (e?.value.unit === o.AspectRatio && e.value.ratioWidth && e.value.ratioHeight)
+        return {
+          [o.AspectRatio]: {
+            height: e.value.ratioHeight,
+            unit: o.AspectRatio,
+            width: e.value.ratioWidth
+          },
+          // See lastCropSize's equivalent branch for why this falls back to 1x1, not 0x0.
+          [o.Pixel]: {
+            height: 1,
+            unit: o.Pixel,
+            width: 1
+          }
+        };
       if (e?.value.width && e?.value.height) {
-        const { height: i, unit: s, width: a } = e.value;
-        if (s === o.AspectRatio)
-          return {
-            [o.AspectRatio]: {
-              height: i,
-              unit: o.AspectRatio,
-              width: a
-            },
-            [o.Pixel]: {
-              height: 0,
-              unit: o.Pixel,
-              width: 0
-            }
-          };
-        const r = et(a, i);
+        const { height: i, width: s } = e.value, a = et(s, i);
         return {
           [o.AspectRatio]: {
-            height: r.height,
+            height: a.height,
             unit: o.AspectRatio,
-            width: r.width
+            width: a.width
           },
           [o.Pixel]: {
             height: i,
             unit: o.Pixel,
-            width: a
+            width: s
           }
         };
       }
     }
-    const t = et(
-      this.lastImageSize.width,
-      this.lastImageSize.height
-    );
+    const t = this.lastImageSize.width && this.lastImageSize.height ? et(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
     return {
       [o.AspectRatio]: {
         height: t.height,
@@ -1715,7 +1754,7 @@ let p = class extends N {
    */
   get lastRotation() {
     return this.asset ? 0 : this.transformations.findLast(
-      (e) => e.key === c.Rotate
+      (e) => e.key === p.Rotate
     )?.value.rotation ?? 0;
   }
   /**
@@ -1763,7 +1802,7 @@ let p = class extends N {
         token: this.token,
         transformations: this.transformationString
       }).then((s) => {
-        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === c.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === p.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
           height: s.height,
           width: s.width
         }, this.selectedFormat = {
@@ -1822,66 +1861,97 @@ let p = class extends N {
         }).replace(/\/t\//g, "")
       });
       const r = this.transformations.findLast(
-        (m) => m.key === c.Crop && m.value.width && m.value.height
+        (c) => c.key === p.Crop && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width && c.value.height)
       );
-      if (r) {
-        const { focusMode: m, height: S, unit: C, width: u, x: $ = 0, y: Q = 0 } = r.value;
+      if (r?.value.unit === o.AspectRatio && r.value.ratioWidth && r.value.ratioHeight) {
+        const { focusMode: c, ratioHeight: y, ratioWidth: k } = r.value;
+        this.cropSize = {
+          ...this.cropSize,
+          cropMode: "free",
+          focusMode: c ?? "manual",
+          percentageHeight: 100,
+          percentageWidth: 100,
+          ratioHeight: y,
+          ratioWidth: k,
+          unit: o.AspectRatio
+        };
+      } else if (r) {
+        const { focusMode: c, height: y, unit: k, width: f, x: R = 0, y: E = 0 } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
-          focusMode: m ?? "manual",
-          height: S,
+          focusMode: c ?? "manual",
+          height: y,
           percentageHeight: 100,
           percentageWidth: 100,
-          unit: C ?? o.Pixel,
-          width: u,
-          x: $,
-          y: Q
+          unit: k ?? o.Pixel,
+          width: f,
+          x: R,
+          y: E
         };
       } else
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: "manual",
-          height: 0,
+          /**
+           * Matches the width/height input mask's `min: 1` in cx-asset-link-format-crop —
+           * resetting to 0 here (no crop transformation committed yet) would make an
+           * immediate Apply (before typing into either input) a silent no-op, since
+           * onCropApply guards on `height || width`.
+           */
+          height: 1,
           percentageHeight: 0,
           percentageWidth: 0,
           unit: o.Pixel,
-          width: 0,
+          width: 1,
           x: 0,
           y: 0
         };
-      const n = this.transformations.findLast(
-        (m) => m.key === c.Resize && (m.value.width || m.value.height)
+      const h = this.transformations.findLast(
+        (c) => c.key === p.Resize && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width || c.value.height)
       );
-      if (n) {
-        const { height: m = 0, unit: S, width: C = 0 } = n.value;
+      if (h?.value.unit === o.AspectRatio && h.value.ratioWidth && h.value.ratioHeight) {
+        const { ratioHeight: c, ratioWidth: y } = h.value;
         this.resizeSize = {
           ...this.resizeSize,
-          height: m,
-          unit: S ?? o.Pixel,
-          width: C
+          ratioHeight: c,
+          ratioWidth: y,
+          unit: o.AspectRatio
+        };
+      } else if (h) {
+        const { height: c = 0, unit: y, width: k = 0 } = h.value;
+        this.resizeSize = {
+          ...this.resizeSize,
+          height: c,
+          unit: y ?? o.Pixel,
+          width: k
         };
       } else
         this.resizeSize = {
           ...this.resizeSize,
-          height: 0,
+          /**
+           * Matches the width/height input mask's `min: 1` in cx-asset-link-format-resize
+           * — see the equivalent cropSize reset above for why 0 would make an immediate
+           * Apply silently no-op.
+           */
+          height: 1,
           unit: o.Pixel,
-          width: 0
+          width: 1
         };
       const l = this.transformations.findLast(
-        (m) => m.key === c.Rotate
+        (c) => c.key === p.Rotate
       );
       this.rotation = l?.value.rotation ?? 0;
-      const f = this.transformations.findLast((m) => m.key === c.Quality)?.value.quality ?? 100, y = this.transformations.some(
-        (m) => m.key === c.Metadata
+      const m = this.transformations.findLast((c) => c.key === p.Quality)?.value.quality ?? 100, x = this.transformations.some(
+        (c) => c.key === p.Metadata
       );
-      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: y, quality: f } : this.selectedFormat = {
+      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: x, quality: m } : this.selectedFormat = {
         extension: "",
         height: 0,
-        keepMetadata: y,
+        keepMetadata: x,
         originalUrl: "",
-        quality: f,
+        quality: m,
         rotation: 0,
         url: "",
         width: 0,
@@ -1929,11 +1999,11 @@ let p = class extends N {
       width: e.width,
       x: 0,
       y: 0
-    }, this.lastAction === c.Rotate && (this.rotation = 0), this.lastAction = void 0;
+    }, this.lastAction === p.Rotate && (this.rotation = 0), this.lastAction = void 0;
     const i = this.transformations.some(
-      (r) => r.key === c.Metadata
+      (r) => r.key === p.Metadata
     ), s = this.transformations.findLast(
-      (r) => r.key === c.Quality
+      (r) => r.key === p.Quality
     );
     this.selectedFormat = {
       ...this.selectedFormat,
@@ -1979,7 +2049,7 @@ let p = class extends N {
       width: Number.parseInt(this.asset.width, 10)
     });
     const t = this.transformations.findLast(
-      (e) => e.key === c.Quality
+      (e) => e.key === p.Quality
     );
     this.selectedFormat = {
       extension: this.asset.extension,
@@ -2025,25 +2095,25 @@ let p = class extends N {
     e.proxyName === "TRX" && (e.formatHeight = Number(this.asset.height), e.formatWidth = Number(this.asset.width));
     const i = this.proxies?.find((s) => s.id === t);
     i && (this.asset && i.proxyName === "TRX" && (i.formatHeight = Number(this.asset.height), i.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((s) => {
-      if (s.key === c.Crop) {
-        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight, l = a.x / i.formatWidth * e.formatWidth, f = a.y / i.formatHeight * e.formatHeight;
+      if (s.key === p.Crop) {
+        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, h = a.height / i.formatHeight * e.formatHeight, l = a.x / i.formatWidth * e.formatWidth, m = a.y / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
             ...s.value,
-            height: n,
+            height: h,
             width: r,
             x: l,
-            y: f
+            y: m
           }
         };
       }
-      if (s.key === c.Resize) {
-        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight;
+      if (s.key === p.Resize) {
+        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, h = a.height / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
-            height: n,
+            height: h,
             width: r
           }
         };
@@ -2110,32 +2180,32 @@ let p = class extends N {
     keepAspectRatio: s,
     percentageHeight: a,
     percentageWidth: r,
-    ratioHeight: n,
+    ratioHeight: h,
     ratioWidth: l,
-    unit: f,
-    useCropMode: y,
-    width: m
+    unit: m,
+    useCropMode: x,
+    width: c
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
-    this.loading = !0, this.lastAction = c.Crop;
-    const S = await this.apiGetCropFocusMode({
+    this.loading = !0, this.lastAction = p.Crop;
+    const y = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
-      cropWidth: m,
+      cropWidth: c,
       imageUrl: this.selectedFormat.url
     });
-    if (S) {
-      let C = a, u = r;
-      i || (C = S.height * 100 / this.selectedFormat.height), m || (u = S.width * 100 / this.selectedFormat.width), this.cropSize = {
+    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 = {
         ...this.cropSize,
-        height: S.height,
-        percentageHeight: C ?? this.cropSize.percentageHeight,
-        percentageWidth: u ?? this.cropSize.percentageWidth,
-        width: S.width,
-        x: S.x * 100 / this.selectedFormat.width,
-        y: S.y * 100 / this.selectedFormat.height,
-        ...y ? {
+        height: y.height,
+        percentageHeight: k ?? this.cropSize.percentageHeight,
+        percentageWidth: f ?? this.cropSize.percentageWidth,
+        width: y.width,
+        x: y.x * 100 / this.selectedFormat.width,
+        y: y.y * 100 / this.selectedFormat.height,
+        ...x ? {
           cropMode: e,
           focusMode: "manual",
           keepAspectRatio: !1
@@ -2144,9 +2214,9 @@ let p = class extends N {
           focusMode: e
         },
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
-        ratioHeight: n ?? this.cropSize.ratioHeight,
+        ratioHeight: h ?? this.cropSize.ratioHeight,
         ratioWidth: l ?? this.cropSize.ratioWidth,
-        unit: f ?? this.cropSize.unit
+        unit: m ?? this.cropSize.unit
       };
     }
     this.loading = !1, this.lastAction = void 0;
@@ -2160,26 +2230,26 @@ let p = class extends N {
     } = e;
     if (s === 0 || i === 0)
       return;
-    const n = this.cropSize.percentageWidth !== s, l = this.cropSize.percentageHeight !== i;
-    let f = this.cropSize.height, y = this.cropSize.width;
-    n && (y = Math.round(s * this.selectedFormat.width / 100)), l && (f = Math.round(
+    const h = this.cropSize.percentageWidth !== s, l = this.cropSize.percentageHeight !== i;
+    let m = this.cropSize.height, x = this.cropSize.width;
+    h && (x = Math.round(s * this.selectedFormat.width / 100)), l && (m = Math.round(
       i * this.selectedFormat.height / 100
     ));
-    const m = this.cropSize.focusMode;
+    const c = this.cropSize.focusMode;
     this.focusModes.find(
-      (C) => C.value === m
+      (k) => k.value === c
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
-      focusMode: m,
-      height: f,
+      focusMode: c,
+      height: m,
       percentageHeight: i,
       percentageWidth: s,
-      width: y
+      width: x
     }) : this.cropSize = {
       ...this.cropSize,
-      height: f,
+      height: m,
       percentageHeight: i,
       percentageWidth: s,
-      width: y,
+      width: x,
       x: a,
       y: r
     };
@@ -2204,7 +2274,7 @@ let p = class extends N {
   }
   onProxyChange(t) {
     const e = t.detail;
-    this.lastAction = c.Proxy, this.selectedProxy = e.id;
+    this.lastAction = p.Proxy, this.selectedProxy = e.id;
   }
   async onCropModeChange(t) {
     const { mode: e } = t.detail;
@@ -2215,10 +2285,10 @@ let p = class extends N {
       });
     else {
       const s = this.focusModes.find(
-        (f) => f.value === this.cropSize.focusMode
+        (m) => m.value === this.cropSize.focusMode
       )?.auto;
-      let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, n = this.cropSize.x, l = this.cropSize.y;
-      e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (n = 0, l = 0), s ? await this.handleRequestAutoCropSuggestion({
+      let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, h = this.cropSize.x, l = this.cropSize.y;
+      e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (h = 0, l = 0), s ? await this.handleRequestAutoCropSuggestion({
         cropMode: e,
         focusMode: r,
         height: this.cropSize.height,
@@ -2229,7 +2299,7 @@ let p = class extends N {
         cropMode: e,
         focusMode: r,
         keepAspectRatio: a,
-        x: n,
+        x: h,
         y: l
       };
     }
@@ -2248,43 +2318,43 @@ let p = class extends N {
   async onCropChange(t) {
     const e = this.cropSize.unit;
     if (t.detail.unit === o.AspectRatio) {
-      const i = t.detail.width / t.detail.height, s = Math.min(
+      const i = t.detail.width / t.detail.height, s = this.asset ? Math.min(
         Math.max(Math.round(this.cropSize.height * i), 0),
         this.resizeSize.width
-      ), a = Math.min(
+      ) : 0, a = this.asset ? Math.min(
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
-      ), r = a * 100 / this.selectedFormat.height, n = s * 100 / this.selectedFormat.width;
-      let l = this.cropSize.x, f = this.cropSize.y;
-      l + n > 100 && (l = 100 - n), f + r > 100 && (f = 100 - r);
-      let y = this.cropSize.cropMode;
+      ) : 0, r = this.asset ? a * 100 / this.selectedFormat.height : 100, h = this.asset ? s * 100 / this.selectedFormat.width : 100;
+      let l = this.cropSize.x, m = this.cropSize.y;
+      l + h > 100 && (l = 100 - h), m + r > 100 && (m = 100 - r);
+      let x = this.cropSize.cropMode;
       this.cropModes.find(
-        (S) => S.value === y
-      )?.auto && (y = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = n, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
+        (y) => y.value === x
+      )?.auto && (x = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = h, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
         ...this.cropSize,
-        cropMode: y,
+        cropMode: x,
         height: a,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: r,
-        percentageWidth: n,
+        percentageWidth: h,
         ratioHeight: t.detail.height,
         ratioWidth: t.detail.width,
         unit: o.AspectRatio,
         width: s,
         x: l,
-        y: f
+        y: m
       };
     } else {
-      const i = this.selectedFormat ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.selectedFormat ? t.detail.width * 100 / this.selectedFormat.width : 100;
+      const i = this.asset ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.asset ? t.detail.width * 100 / this.selectedFormat.width : 100;
       let a = this.cropSize.x, r = this.cropSize.y;
       a + s > 100 && (a = 100 - s), r + i > 100 && (r = 100 - i);
-      let n = this.cropSize.cropMode;
+      let h = this.cropSize.cropMode;
       const l = this.cropModes.find(
-        (f) => f.value === n
+        (m) => m.value === h
       )?.auto;
-      (t.detail.breakAspectRatio || l) && (n = "free"), t.detail.silent ? (this.cropSize.cropMode = n, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = r) : this.cropSize = {
+      (t.detail.breakAspectRatio || l) && (h = "free"), t.detail.silent ? (this.cropSize.cropMode = h, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = r) : this.cropSize = {
         ...this.cropSize,
-        cropMode: n,
+        cropMode: h,
         height: t.detail.height,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: i,
@@ -2310,20 +2380,42 @@ let p = class extends N {
     });
   }
   onCropApply(t) {
-    if (this.preResetTransformations = void 0, this.lastAction = c.Crop, !this.asset) {
-      const { focusMode: l, height: f, unit: y, width: m, x: S, y: C } = this.cropSize, u = this.focusModes.find(
-        ($) => $.value === l
+    if (this.preResetTransformations = void 0, this.lastAction = p.Crop, !this.asset) {
+      const {
+        focusMode: l,
+        height: m,
+        ratioHeight: x,
+        ratioWidth: c,
+        unit: y,
+        width: k,
+        x: f,
+        y: R
+      } = this.cropSize, E = this.focusModes.find(
+        (z) => z.value === l
       )?.auto ?? !1;
-      (f || m) && this.upsertTransformation({
-        key: c.Crop,
+      if (y === o.AspectRatio) {
+        c && x && this.upsertTransformation({
+          key: p.Crop,
+          value: {
+            focusMode: l,
+            isFocusModeAuto: E,
+            ratioHeight: x,
+            ratioWidth: c,
+            unit: y
+          }
+        });
+        return;
+      }
+      (m || k) && this.upsertTransformation({
+        key: p.Crop,
         value: {
           focusMode: l,
-          height: f,
-          isFocusModeAuto: u,
+          height: m,
+          isFocusModeAuto: E,
           unit: y,
-          width: m,
-          x: Number.isFinite(S) ? S : void 0,
-          y: Number.isFinite(C) ? C : void 0
+          width: k,
+          x: Number.isFinite(f) ? f : void 0,
+          y: Number.isFinite(R) ? R : void 0
         }
       });
       return;
@@ -2331,39 +2423,39 @@ let p = class extends N {
     const { height: e, mode: i, unit: s, width: a } = t.detail;
     if (!this.cropperElement || !this.selectedFormat)
       return;
-    const r = this.cropSize.focusMode, n = this.focusModes.find(
+    const r = this.cropSize.focusMode, h = this.focusModes.find(
       (l) => l.value === r
     )?.auto ?? !1;
     if (e && a && s) {
-      let l = a, f = e;
-      if (s === o.AspectRatio && (l = this.cropSize.percentageWidth * this.selectedFormat.width / 100, f = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
+      let l = a, m = e;
+      if (s === o.AspectRatio && (l = this.cropSize.percentageWidth * this.selectedFormat.width / 100, m = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
         this.transformations = [
           ...this.transformations,
           {
-            key: c.Crop,
+            key: p.Crop,
             value: {
               focusMode: r,
-              height: f,
-              isFocusModeAuto: n,
+              height: m,
+              isFocusModeAuto: h,
               mode: i,
               width: l
             }
           }
         ];
       else {
-        const y = this.cropSize.x / 100 * this.selectedFormat.width, m = this.cropSize.y / 100 * this.selectedFormat.height;
+        const x = this.cropSize.x / 100 * this.selectedFormat.width, c = this.cropSize.y / 100 * this.selectedFormat.height;
         this.transformations = [
           ...this.transformations,
           {
-            key: c.Crop,
+            key: p.Crop,
             value: {
               focusMode: r,
-              height: f,
-              isFocusModeAuto: n,
+              height: m,
+              isFocusModeAuto: h,
               unit: s,
               width: l,
-              x: y,
-              y: m
+              x,
+              y: c
             }
           }
         ];
@@ -2371,10 +2463,10 @@ let p = class extends N {
     } else i && (this.transformations = [
       ...this.transformations,
       {
-        key: c.Crop,
+        key: p.Crop,
         value: {
           focusMode: r,
-          isFocusModeAuto: n,
+          isFocusModeAuto: h,
           mode: i
         }
       }
@@ -2406,9 +2498,21 @@ let p = class extends N {
   }
   onResizeApply(t) {
     const { height: e, unit: i, width: s } = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = c.Resize, !this.asset) {
+    if (this.preResetTransformations = void 0, this.lastAction = p.Resize, !this.asset) {
+      if (i === o.AspectRatio) {
+        const { ratioHeight: m, ratioWidth: x } = this.resizeSize;
+        x && m && this.upsertTransformation({
+          key: p.Resize,
+          value: {
+            ratioHeight: m,
+            ratioWidth: x,
+            unit: i
+          }
+        });
+        return;
+      }
       (e || s) && this.upsertTransformation({
-        key: c.Resize,
+        key: p.Resize,
         value: {
           height: e,
           unit: i,
@@ -2420,15 +2524,15 @@ let p = class extends N {
     if (!this.selectedFormat)
       return;
     const a = this.selectedFormat.width || this.defaultSize.width, r = this.selectedFormat.height || this.defaultSize.height;
-    let n = s, l = e;
-    this.resizeSize.unit !== i ? (n = a, l = r) : i === o.AspectRatio && (n = Math.round(s / e * r), l = r), this.transformations = [
+    let h = s, l = e;
+    this.resizeSize.unit !== i ? (h = a, l = r) : i === o.AspectRatio && (h = Math.round(s / e * r), l = r), this.transformations = [
       ...this.transformations,
       {
-        key: c.Resize,
+        key: p.Resize,
         value: {
           height: l,
           unit: i,
-          width: n
+          width: h
         }
       }
     ];
@@ -2438,21 +2542,21 @@ let p = class extends N {
   }
   onRotationApply(t) {
     const e = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = c.Rotate, !this.asset) {
+    if (this.preResetTransformations = void 0, this.lastAction = p.Rotate, !this.asset) {
       e ? this.upsertTransformation({
-        key: c.Rotate,
+        key: p.Rotate,
         value: {
           rotation: e
         }
       }) : this.transformations = this.transformations.filter(
-        (i) => i.key !== c.Rotate
+        (i) => i.key !== p.Rotate
       );
       return;
     }
     this.selectedFormat && (this.transformations = [
       ...this.transformations,
       {
-        key: c.Rotate,
+        key: p.Rotate,
         value: {
           rotation: e
         }
@@ -2461,9 +2565,9 @@ let p = class extends N {
   }
   onQualityChange(t) {
     const e = t.detail;
-    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = c.Quality;
+    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = p.Quality;
     const i = {
-      key: c.Quality,
+      key: p.Quality,
       value: {
         quality: e
       }
@@ -2477,27 +2581,22 @@ let p = class extends N {
       keepMetadata: e
     }), !this.asset) {
       e ? this.upsertTransformation({
-        key: c.Metadata,
+        key: p.Metadata,
         value: {
           keepMetadata: e
         }
       }) : this.transformations = this.transformations.filter(
-        (i) => i.key !== c.Metadata
+        (i) => i.key !== p.Metadata
       );
       return;
     }
-    e ? this.transformations = [
-      ...this.transformations.filter(
-        (i) => i.key !== c.Metadata
-      ),
-      {
-        key: c.Metadata,
-        value: {
-          keepMetadata: e
-        }
+    e ? this.upsertTransformation({
+      key: p.Metadata,
+      value: {
+        keepMetadata: e
       }
-    ] : this.transformations = this.transformations.filter(
-      (i) => i.key !== c.Metadata
+    }) : this.transformations = this.transformations.filter(
+      (i) => i.key !== p.Metadata
     );
   }
   onExtensionChange(t) {
@@ -2509,7 +2608,7 @@ let p = class extends N {
   }
   syncQuality() {
     const t = this.transformations.findLast(
-      (e) => e.key === c.Quality
+      (e) => e.key === p.Quality
     )?.value?.quality;
     this.selectedFormat && (this.selectedFormat = {
       ...this.selectedFormat,
@@ -2525,179 +2624,179 @@ let p = class extends N {
     this.selectedProxy = t ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "", this.transformations = [], this.frozenIndex = -1, this.syncQuality();
   }
   render() {
-    return A`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${E(
+    return v`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${F(
       !this.hideHeader,
-      () => A`<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>${E(this.canReset, () => A`<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>`,
+      () => 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>`,
       () => qt
     )}
-      ${E(
+      ${F(
       !this.noFormat,
-      () => A`<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 === c.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
+      () => 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>`
     )}
-      ${E(
+      ${F(
       !this.noCrop,
-      () => A`<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 === c.Crop} ?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>`
+      () => 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>`
     )}
-      ${E(
+      ${F(
       !this.noResize,
-      () => A`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === c.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>`
+      () => 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>`
     )}
-      ${E(
+      ${F(
       !this.noRotate,
-      () => A`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === c.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 === c.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>${E(
+      () => 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(
       !this.noMetadata,
-      () => A`<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>`
+      () => 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>`
     )}
-      ${E(
+      ${F(
       this.useCustomExtension,
-      () => A`<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>`
+      () => 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>`
     )}</div>`;
   }
 };
-p.styles = [U, ce];
-p.dependencies = {
+d.styles = [q, ce];
+d.dependencies = {
   "cx-asset-link-format-crop": g,
-  "cx-asset-link-format-extension": B,
-  "cx-asset-link-format-metadata": W,
-  "cx-asset-link-format-proxy": _,
-  "cx-asset-link-format-quality": F,
-  "cx-asset-link-format-resize": z,
+  "cx-asset-link-format-extension": V,
+  "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-button": V,
+  "cx-button": G,
   "cx-space": D,
-  "cx-typography": T
+  "cx-typography": N
 };
-d([
-  h({ attribute: "base-url", type: String })
-], p.prototype, "baseUrl", 2);
-d([
-  h({ attribute: "token", type: String })
-], p.prototype, "token", 2);
-d([
-  h({ reflect: !1, type: Object })
-], p.prototype, "asset", 2);
-d([
-  h({ attribute: "crop-modes", reflect: !1, type: Array })
-], p.prototype, "cropModes", 2);
-d([
-  h({ attribute: "focus-modes", reflect: !1, type: Object })
-], p.prototype, "focusModes", 2);
-d([
-  h({ reflect: !1, type: Array })
-], p.prototype, "extensions", 2);
-d([
-  h({ reflect: !1, type: Array })
-], p.prototype, "proxies", 2);
-d([
-  h({ attribute: "for-cropper", reflect: !0, type: String })
-], p.prototype, "forCropper", 2);
-d([
-  h({ attribute: "use-session", reflect: !0, type: String })
-], p.prototype, "useSession", 2);
-d([
-  h({ reflect: !1, type: Array })
-], p.prototype, "transformations", 2);
-d([
-  h({ attribute: "selected-proxy", reflect: !0, type: String })
-], p.prototype, "selectedProxy", 2);
-d([
-  h({ attribute: "default-proxy", reflect: !0, type: String })
-], p.prototype, "defaultProxy", 2);
-d([
-  h({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
-], p.prototype, "useCustomExtension", 2);
-d([
-  h({ attribute: "no-metadata", reflect: !0, type: Boolean })
-], p.prototype, "noMetadata", 2);
-d([
-  h({ attribute: "no-format", reflect: !0, type: Boolean })
-], p.prototype, "noFormat", 2);
-d([
-  h({ attribute: "no-crop", reflect: !0, type: Boolean })
-], p.prototype, "noCrop", 2);
-d([
-  h({ attribute: "no-resize", reflect: !0, type: Boolean })
-], p.prototype, "noResize", 2);
-d([
-  h({ attribute: "no-rotate", reflect: !0, type: Boolean })
-], p.prototype, "noRotate", 2);
-d([
-  h({ attribute: "last-image-size", reflect: !1, type: Object })
-], p.prototype, "lastImageSize", 2);
-d([
-  h({ attribute: "hide-header", reflect: !1, type: Boolean })
-], p.prototype, "hideHeader", 2);
-d([
-  h({ attribute: "can-reset", type: Boolean })
-], p.prototype, "canReset", 2);
-d([
-  h({ attribute: !1, reflect: !1, type: Object })
-], p.prototype, "queryElement", 2);
-d([
-  v()
-], p.prototype, "activeSetting", 2);
-d([
-  v()
-], p.prototype, "selectedFormat", 2);
-d([
-  v()
-], p.prototype, "resizeSize", 2);
-d([
-  v()
-], p.prototype, "cropSize", 2);
-d([
-  v()
-], p.prototype, "rotation", 2);
-d([
-  v()
-], p.prototype, "defaultSize", 2);
-d([
-  v()
-], p.prototype, "cropperElement", 2);
-d([
-  v()
-], p.prototype, "parameters", 2);
-d([
-  v()
-], p.prototype, "loading", 2);
-d([
-  v()
-], p.prototype, "lastAction", 2);
-d([
-  v()
-], p.prototype, "frozenIndex", 2);
-d([
-  v()
-], p.prototype, "preResetTransformations", 2);
-d([
-  R("transformations")
-], p.prototype, "handleTransformationsChange", 1);
-d([
-  R("selectedProxy")
-], p.prototype, "handleSelectedProxyChange", 1);
-d([
-  R("loading")
-], p.prototype, "handleLoadingChange", 1);
-p = d([
-  q("cx-asset-link-format")
-], p);
+u([
+  n({ attribute: "base-url", type: String })
+], d.prototype, "baseUrl", 2);
+u([
+  n({ attribute: "token", type: String })
+], d.prototype, "token", 2);
+u([
+  n({ reflect: !1, type: Object })
+], d.prototype, "asset", 2);
+u([
+  n({ attribute: "crop-modes", reflect: !1, type: Array })
+], d.prototype, "cropModes", 2);
+u([
+  n({ attribute: "focus-modes", reflect: !1, type: Object })
+], d.prototype, "focusModes", 2);
+u([
+  n({ reflect: !1, type: Array })
+], d.prototype, "extensions", 2);
+u([
+  n({ reflect: !1, type: Array })
+], d.prototype, "proxies", 2);
+u([
+  n({ attribute: "for-cropper", reflect: !0, type: String })
+], d.prototype, "forCropper", 2);
+u([
+  n({ attribute: "use-session", reflect: !0, type: String })
+], d.prototype, "useSession", 2);
+u([
+  n({ reflect: !1, type: Array })
+], d.prototype, "transformations", 2);
+u([
+  n({ attribute: "selected-proxy", reflect: !0, type: String })
+], d.prototype, "selectedProxy", 2);
+u([
+  n({ attribute: "default-proxy", reflect: !0, type: String })
+], d.prototype, "defaultProxy", 2);
+u([
+  n({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
+], d.prototype, "useCustomExtension", 2);
+u([
+  n({ attribute: "no-metadata", reflect: !0, type: Boolean })
+], d.prototype, "noMetadata", 2);
+u([
+  n({ attribute: "no-format", reflect: !0, type: Boolean })
+], d.prototype, "noFormat", 2);
+u([
+  n({ attribute: "no-crop", reflect: !0, type: Boolean })
+], d.prototype, "noCrop", 2);
+u([
+  n({ attribute: "no-resize", reflect: !0, type: Boolean })
+], d.prototype, "noResize", 2);
+u([
+  n({ attribute: "no-rotate", reflect: !0, type: Boolean })
+], d.prototype, "noRotate", 2);
+u([
+  n({ attribute: "last-image-size", reflect: !1, type: Object })
+], d.prototype, "lastImageSize", 2);
+u([
+  n({ attribute: "hide-header", reflect: !1, type: Boolean })
+], d.prototype, "hideHeader", 2);
+u([
+  n({ attribute: "can-reset", type: Boolean })
+], d.prototype, "canReset", 2);
+u([
+  n({ attribute: !1, reflect: !1, type: Object })
+], d.prototype, "queryElement", 2);
+u([
+  b()
+], d.prototype, "activeSetting", 2);
+u([
+  b()
+], d.prototype, "selectedFormat", 2);
+u([
+  b()
+], d.prototype, "resizeSize", 2);
+u([
+  b()
+], d.prototype, "cropSize", 2);
+u([
+  b()
+], d.prototype, "rotation", 2);
+u([
+  b()
+], d.prototype, "defaultSize", 2);
+u([
+  b()
+], d.prototype, "cropperElement", 2);
+u([
+  b()
+], d.prototype, "parameters", 2);
+u([
+  b()
+], d.prototype, "loading", 2);
+u([
+  b()
+], d.prototype, "lastAction", 2);
+u([
+  b()
+], d.prototype, "frozenIndex", 2);
+u([
+  b()
+], d.prototype, "preResetTransformations", 2);
+u([
+  $("transformations")
+], d.prototype, "handleTransformationsChange", 1);
+u([
+  $("selectedProxy")
+], d.prototype, "handleSelectedProxyChange", 1);
+u([
+  $("loading")
+], d.prototype, "handleLoadingChange", 1);
+d = u([
+  B("cx-asset-link-format")
+], d);
 export {
-  p as C,
+  d as C,
   ut as D,
-  Pt as F,
+  _t as F,
   X as O,
   yi as a,
-  _t as b,
-  vt as c,
+  Pt as b,
+  bt as c,
   xi as d,
   kt as e,
   ie as f,
   Wt as g,
-  bi as h,
-  Ai as i,
+  zi as h,
+  vi as i,
   Si as j,
-  Tt as k,
+  Dt as k,
   at as l,
   Ct as m,
   Rt as n,