@orangelogic/design-system 2.183.0 → 2.185.0

package/library/chunks/{asset-link-format.H5j0gJtQ.js → asset-link-format.D--xQVgR.js}

@@ -1,10 +1,10 @@
 import "../components/cropper.js";
-import { C as Z } from "./button.Dc8L4hcg.js";
+import { C as Z } from "./button.BnkkUqiI.js";
 import L from "../components/space.js";
 import { C as U } from "./typography.IqHbnd3C.js";
 import { n as l, C as B } from "./lib-cortex-element.CVMmyPMC.js";
 import { h as I, a as Nt, C as Ot, S as jt, b as Vt, c as Gt, d as Qt } from "./endpoints.mJ5S-tIs.js";
-import { M as $t, U as o, T as u } from "./asset-link-format.ClaYu_v8.js";
+import { M as $t, U as o, T as m } from "./asset-link-format.ClaYu_v8.js";
 import "./browser.BHOCIF_A.js";
 import { i as q, x as A, E as Xt } from "./lit-element.jLBm65_O.js";
 import "./form.DSsy3Fcy.js";
@@ -18,16 +18,16 @@ import { c as V } from "./component.styles.CRO4Odto.js";
 import { v as Yt } from "./v4.CKZ6klMF.js";
 import { P as W } from "./position-picker.DjnhxIKF.js";
 import { c as G } from "./custom-element.L4WJXn1j.js";
-import { w as M } from "./watch.DJF5K-8U.js";
-import { s as Mt, a as nt } from "./number.Cx2ncfJJ.js";
+import { w as _ } from "./watch.DJF5K-8U.js";
+import { s as _t, a as nt } from "./number.Cx2ncfJJ.js";
 import { r as R } from "./state.CSDxrqLd.js";
-import { n as _ } from "./when.Dr1es41R.js";
+import { n as M } from "./when.Dr1es41R.js";
 import et from "../components/details.js";
 import Jt from "../components/divider.js";
-import { C as it } from "./icon.BTuMIrIm.js";
-import { C as vt } from "./icon-button.CBZkhhs8.js";
-import { C as bt } from "./input.B5AHlTl-.js";
-import { C as gt } from "./option.zUMZKPFe.js";
+import { C as it } from "./icon.CpHbi8tH.js";
+import { C as vt } from "./icon-button.CVrxJcZq.js";
+import { C as bt } from "./input.33UmFGqR.js";
+import { C as gt } from "./option.B6odSlS2.js";
 import xt from "../components/select.js";
 import te from "../components/position-picker.js";
 import { c as ee } from "./image.Y5c_hFx8.js";
@@ -106,8 +106,8 @@ function le(t) {
         if (n.length === 0)
           continue;
         const h = [
-          ...n.map((d) => `ParentFolderIdentifier:${zt(String(d))}`),
-          ...n.map((d) => `ParentAlbumIdentifier:${zt(String(d))}`)
+          ...n.map((p) => `ParentFolderIdentifier:${zt(String(p))}`),
+          ...n.map((p) => `ParentAlbumIdentifier:${zt(String(p))}`)
         ];
         e.push(`(${h.join(" OR ")})`);
         continue;
@@ -130,7 +130,7 @@ function ht(t) {
   }
   return le(t);
 }
-const wt = "CoreField.LargeSizePreview", lt = "CoreField.DocType", ce = "Document.Title", pe = "Document.CaptionLong", ct = "Document.FileExtension", _t = "CoreField.FileSize", It = "CoreField.Identifier", Et = "CoreField.Keywords", pt = "CoreField.MaxHeight", dt = "CoreField.MaxWidth", ut = "Document.RecordID", Ht = "CoreField.DocSubType", Ut = "CoreField.TitleWithFallback", mt = "CoreField.OriginalFileName", ft = "CoreField.UpdatedFileName", tt = "CoreField.OriginalPreview", Ct = {
+const wt = "CoreField.LargeSizePreview", lt = "CoreField.DocType", ce = "Document.Title", pe = "Document.CaptionLong", ct = "Document.FileExtension", Mt = "CoreField.FileSize", It = "CoreField.Identifier", Et = "CoreField.Keywords", pt = "CoreField.MaxHeight", dt = "CoreField.MaxWidth", ut = "Document.RecordID", Tt = "CoreField.DocSubType", Ut = "CoreField.TitleWithFallback", mt = "CoreField.OriginalFileName", ft = "CoreField.UpdatedFileName", tt = "CoreField.OriginalPreview", Fi = "Document.DocSubType", Mi = "Document.InPoint", Ii = "Document.OutPoint", Ct = {
   DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
   FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
   ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
@@ -147,7 +147,7 @@ const wt = "CoreField.LargeSizePreview", lt = "CoreField.DocType", ce = "Documen
 function ue(t) {
   return Bt[t] ?? t;
 }
-function Tt(t) {
+function Ht(t) {
   const e = {};
   for (const [i, s] of Object.entries(t)) {
     const a = de[i] ?? i;
@@ -155,57 +155,65 @@ function Tt(t) {
   }
   return e;
 }
+function me(t) {
+  const e = new URLSearchParams();
+  for (const [i, s] of Object.entries(t))
+    s != null && (Array.isArray(s) ? s.forEach((a) => e.append(i, String(a))) : e.append(i, String(s)));
+  return e;
+}
 async function qt({
   countPerPage: t,
   fields: e,
   getPermanentAssetsPaths: i,
-  isSiteBuilder: s,
-  pageNumber: a,
-  query: r,
-  securityByPassToken: n,
-  siteUrl: h,
-  sort: d,
-  token: m,
-  useSession: c
+  httpMethod: s = "GET",
+  isSiteBuilder: a,
+  pageNumber: r,
+  query: n,
+  securityByPassToken: h,
+  siteUrl: p,
+  sort: f,
+  token: c,
+  useSession: g
 }) {
-  const f = e?.map(ue);
+  const y = e?.map(ue), d = {
+    CountPerPage: t,
+    Fields: ae(y),
+    Format: "json",
+    GetPermanentAssetsPaths: i || void 0,
+    PageNumber: r,
+    Query: ht(n),
+    SecurityByPassToken: h || void 0,
+    Sort: f || void 0,
+    UseSession: g || void 0
+  }, z = s === "POST";
   try {
     return (await I.request({
-      baseURL: h,
-      headers: m ? { Authorization: `Bearer ${m}` } : void 0,
-      method: "GET",
-      params: {
-        CountPerPage: t,
-        Fields: ae(f),
-        Format: "json",
-        GetPermanentAssetsPaths: i || void 0,
-        PageNumber: a,
-        Query: ht(r),
-        SecurityByPassToken: n || void 0,
-        Sort: d || void 0,
-        UseSession: c || void 0
-      },
-      paramsSerializer: { indexes: null },
+      baseURL: p,
+      headers: c ? { Authorization: `Bearer ${c}` } : void 0,
+      method: s,
+      // POST large RecordID queries as a urlencoded body to dodge the ~2KB URL cap;
+      // GET keeps the same fields on the query string.
+      ...z ? { data: me(d) } : { params: d, paramsSerializer: { indexes: null } },
       responseType: "json",
       transformResponse: [
         ...Array.isArray(I.defaults.transformResponse) ? I.defaults.transformResponse : [],
-        s ? (p) => ({
-          items: (p.results?.Items ?? []).map(Tt),
-          sort: p.results?.GlobalInfo?.Sort ?? "",
-          totalCount: p.results?.GlobalInfo?.TotalCount ?? 0
-        }) : (p) => ({
-          items: (p.APIResponse?.Items ?? []).map(Tt),
-          sort: p.APIResponse?.GlobalInfo?.Sort ?? "",
-          totalCount: p.APIResponse?.GlobalInfo?.TotalCount ?? 0
+        a ? (u) => ({
+          items: (u.results?.Items ?? []).map(Ht),
+          sort: u.results?.GlobalInfo?.Sort ?? "",
+          totalCount: u.results?.GlobalInfo?.TotalCount ?? 0
+        }) : (u) => ({
+          items: (u.APIResponse?.Items ?? []).map(Ht),
+          sort: u.APIResponse?.GlobalInfo?.Sort ?? "",
+          totalCount: u.APIResponse?.GlobalInfo?.TotalCount ?? 0
         })
       ],
-      url: s ? Ot.SEARCH_ASSETS : jt["4.0"]
+      url: a ? Ot.SEARCH_ASSETS : jt["4.0"]
     })).data;
   } catch {
     return { items: [], sort: "", totalCount: 0 };
   }
 }
-async function me({
+async function fe({
   assetId: t,
   extension: e,
   format: i,
@@ -237,14 +245,14 @@ async function me({
     return null;
   }
 }
-const fe = 50;
-function ge(t, e) {
+const ge = 50;
+function xe(t, e) {
   const i = [];
   for (let s = 0; s < t.length; s += e)
     i.push(t.slice(s, s + e));
   return i;
 }
-async function xe({
+async function ye({
   extraFields: t,
   getPermanentAssetsPaths: e,
   isSiteBuilder: i,
@@ -254,7 +262,7 @@ async function xe({
 }) {
   if (!Array.isArray(s) || s.length === 0)
     return { facets: [], items: [], totalCount: 0 };
-  const n = t?.filter((p) => p && typeof p == "string") ?? [], h = [
+  const n = t?.filter((d) => d && typeof d == "string") ?? [], h = [
     ...n,
     tt,
     ft,
@@ -262,43 +270,44 @@ async function xe({
     ce,
     pe,
     ut
-  ], d = ge(s, fe), m = await Promise.all(
-    d.map(
-      (p) => qt({
-        countPerPage: p.length,
+  ], p = xe(s, ge), f = await Promise.all(
+    p.map(
+      (d) => qt({
+        countPerPage: d.length,
         fields: h,
         getPermanentAssetsPaths: e,
+        httpMethod: i ? "GET" : "POST",
         isSiteBuilder: i,
         pageNumber: 1,
-        query: { recordId: p },
+        query: { recordId: d },
         securityByPassToken: a,
         token: r
       })
     )
-  ), c = new Map(s.map((p, w) => [p, w])), f = m.flatMap((p) => p.items).map((p) => {
-    let w = k(p, ft);
-    return w === "" && (w = k(p, mt)), {
-      name: w,
-      originalUrl: k(p, tt),
-      recordId: k(p, ut),
+  ), c = new Map(s.map((d, z) => [d, z])), g = f.flatMap((d) => d.items).map((d) => {
+    let z = k(d, ft);
+    return z === "" && (z = k(d, mt)), {
+      name: z,
+      originalUrl: k(d, tt),
+      recordId: k(d, ut),
       ...n.reduce(
-        (b, x) => (b[x] = k(p, x), b),
+        (b, u) => (b[u] = k(d, u), b),
         {}
       )
     };
   }).sort(
-    (p, w) => (c.get(p.recordId) ?? 1 / 0) - (c.get(w.recordId) ?? 1 / 0)
-  ), S = m.reduce(
-    (p, w) => p + w.totalCount,
+    (d, z) => (c.get(d.recordId) ?? 1 / 0) - (c.get(z.recordId) ?? 1 / 0)
+  ), y = f.reduce(
+    (d, z) => d + z.totalCount,
     0
   );
-  return { facets: [], items: f, totalCount: S };
+  return { facets: [], items: g, totalCount: y };
 }
 function k(t, e) {
   const i = t[e];
   return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : oe(i) ? i.URI : "";
 }
-async function ye({
+async function Se({
   countPerPage: t,
   directParentFolderIdentifier: e,
   extraFields: i,
@@ -307,30 +316,30 @@ async function ye({
   limitedDocTypes: r,
   pageNumber: n,
   parentFolderIdentifier: h,
-  searchTerm: d,
-  securityByPassToken: m,
+  searchTerm: p,
+  securityByPassToken: f,
   sortOrder: c,
-  token: f
+  token: g
 }) {
   if (!e && !h)
     return { facets: [], items: [], totalCount: 0 };
-  const S = (i?.filter((x) => x && typeof x == "string") ?? []).map((x) => x.replace("%20", " ")), p = {
+  const y = (i?.filter((u) => u && typeof u == "string") ?? []).map((u) => u.replace("%20", " ")), d = {
     directParentFolderIdentifier: e,
     parentFolderIdentifier: h,
     ...r.length > 0 ? { docType: [$t.Image, $t.Audio] } : {}
-  }, w = await qt({
+  }, z = await qt({
     countPerPage: t,
     fields: [
-      ...S,
+      ...y,
       Ut,
       wt,
       tt,
       Et,
       dt,
       pt,
-      _t,
+      Mt,
       lt,
-      Ht,
+      Tt,
       It,
       ct,
       ut,
@@ -340,30 +349,30 @@ async function ye({
     getPermanentAssetsPaths: s,
     isSiteBuilder: a,
     pageNumber: n,
-    query: p,
-    securityByPassToken: m,
+    query: d,
+    securityByPassToken: f,
     sort: void 0,
-    token: f
-  }), b = w.items.map((x) => {
-    let F = k(x, ct), P = k(x, ft), st = k(x, wt);
-    F && !F.startsWith(".") && (F = "." + F), P === "" && (P = k(x, mt)), F.toLowerCase() === ".gif" && (st = k(x, tt));
-    const St = k(x, ut);
+    token: g
+  }), b = z.items.map((u) => {
+    let F = k(u, ct), P = k(u, ft), st = k(u, wt);
+    F && !F.startsWith(".") && (F = "." + F), P === "" && (P = k(u, mt)), F.toLowerCase() === ".gif" && (st = k(u, tt));
+    const St = k(u, ut);
     return {
-      docSubType: k(x, Ht),
-      docType: k(x, lt) || "",
+      docSubType: k(u, Tt),
+      docType: k(u, lt) || "",
       extension: F,
-      height: k(x, pt) || "0",
+      height: k(u, pt) || "0",
       id: St,
-      identifier: k(x, It),
+      identifier: k(u, It),
       imageUrl: st,
       name: P,
-      originalUrl: k(x, tt),
+      originalUrl: k(u, tt),
       recordId: St,
-      size: k(x, _t) || "0 MB",
-      tags: k(x, Et),
-      width: k(x, dt) || "0",
-      ...S.reduce(
-        (X, at) => (X[at] = k(x, at), X),
+      size: k(u, Mt) || "0 MB",
+      tags: k(u, Et),
+      width: k(u, dt) || "0",
+      ...y.reduce(
+        (X, at) => (X[at] = k(u, at), X),
         {}
       )
     };
@@ -371,10 +380,10 @@ async function ye({
   return {
     facets: [],
     items: b,
-    totalCount: w.totalCount
+    totalCount: z.totalCount
   };
 }
-async function Se({
+async function Ce({
   autoCropMode: t,
   cropHeight: e,
   cropWidth: i,
@@ -409,7 +418,7 @@ async function Se({
     return null;
   }
 }
-async function Mi({
+async function Ei({
   assetRecordId: t,
   isSiteBuilder: e,
   siteUrl: i,
@@ -446,7 +455,7 @@ async function Mi({
     return [];
   }
 }
-async function Fi({
+async function Ti({
   siteUrl: t
 } = {}) {
   try {
@@ -473,7 +482,7 @@ async function Fi({
     return { formatsByDocType: {} };
   }
 }
-async function _i({
+async function Hi({
   recordIds: t,
   rightsToCheck: e
 }) {
@@ -496,7 +505,7 @@ async function _i({
     return i;
   }
 }
-const Wt = 20, Dt = "TR1", Ce = /* @__PURE__ */ new Set([
+const Wt = 20, Dt = "TR1", ze = /* @__PURE__ */ new Set([
   ".avif",
   ".bmp",
   ".gif",
@@ -509,9 +518,9 @@ const Wt = 20, Dt = "TR1", Ce = /* @__PURE__ */ new Set([
 ]);
 function At(t) {
   const e = t.toLowerCase(), i = e.startsWith(".") ? e : `.${e}`;
-  return Ce.has(i);
+  return ze.has(i);
 }
-class Ii {
+class Wi {
   constructor(e, i) {
     this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = 1 / 0, this.pageSize = Wt, this.requestEpoch = 0, this.host = e, this.host.addController?.(this);
     const s = i?.maxEnd;
@@ -539,18 +548,18 @@ class Ii {
     const n = this.requestEpoch;
     if (!this.folderId || n !== this.requestEpoch)
       return this.data;
-    const h = s ? `path_${s}` : void 0, d = s === "TRX", m = `path_${Dt}`, c = h ? d && h !== m ? [h, m] : [h] : [], f = Math.floor(a / this.pageSize) + 1, S = Math.floor(e / this.pageSize) + 1;
-    for (let p = f; p <= S; p++) {
-      if (this.fetchedPages.has(p))
+    const h = s ? `path_${s}` : void 0, p = s === "TRX", f = `path_${Dt}`, c = h ? p && h !== f ? [h, f] : [h] : [], g = Math.floor(a / this.pageSize) + 1, y = Math.floor(e / this.pageSize) + 1;
+    for (let d = g; d <= y; d++) {
+      if (this.fetchedPages.has(d))
         continue;
-      const w = await ye({
+      const z = await Se({
         countPerPage: this.pageSize,
         directParentFolderIdentifier: this.folderId,
         extraFields: [...i, ...c],
         getPermanentAssetsPaths: c.length > 0 || void 0,
         isSiteBuilder: this.isSiteBuilder,
         limitedDocTypes: ["DO_DOCUMENTS.Image_DbBO.*"],
-        pageNumber: p,
+        pageNumber: d,
         searchTerm: "",
         securityByPassToken: this.securityByPassToken,
         sortOrder: "",
@@ -558,21 +567,21 @@ class Ii {
       });
       if (n !== this.requestEpoch)
         return this.data;
-      if (this.fetchedPages.add(p), !this.totalCount && w.totalCount) {
-        const x = Math.min(this.maxEnd, w.totalCount);
-        this.totalCount = x, this.data = Array.from({ length: x }, () => ({
+      if (this.fetchedPages.add(d), !this.totalCount && z.totalCount) {
+        const u = Math.min(this.maxEnd, z.totalCount);
+        this.totalCount = u, this.data = Array.from({ length: u }, () => ({
           alt: "",
           id: `temp-${Yt()}`,
           name: "",
           src: ""
         }));
       }
-      const b = (p - 1) * this.pageSize;
-      for (let x = 0; x < w.items.length; x++) {
-        const F = b + x;
+      const b = (d - 1) * this.pageSize;
+      for (let u = 0; u < z.items.length; u++) {
+        const F = b + u;
         if (F < this.data.length) {
-          const P = w.items[x], st = !P.extension || At(P.extension);
-          let X = h && (!d || st) && P[h] || d && !st && P[m] || P.imageUrl;
+          const P = z.items[u], st = !P.extension || At(P.extension);
+          let X = h && (!p || st) && P[h] || p && !st && P[f] || P.imageUrl;
           X && r && r.length > 0 && (X = Pt(X, r)), this.data[F] = {
             alt: P.name,
             docType: P.docType,
@@ -596,30 +605,30 @@ class Ii {
     format: r,
     minLimit: n = 5,
     noPlaceholders: h = !1,
-    transformations: d
+    transformations: p
   }) {
     (!this.folderId || this.folderId !== s) && (this.folderId = s, this.resetFolderState()), a && this.resetPageCache();
-    const m = Math.max(5, n), c = e, f = e + m, S = [
+    const f = Math.max(5, n), c = e, g = e + f, y = [
       ...i,
       pt,
       dt
     ];
     await this.fetchImages({
-      end: f,
-      extraFields: S.filter((b) => b !== ""),
+      end: g,
+      extraFields: y.filter((b) => b !== ""),
       format: r,
       start: c,
-      transformations: d
+      transformations: p
     });
-    let p = e - m;
-    p < 0 && (this.totalCount === 0 ? p = 0 : p = Math.max(0, this.totalCount + p));
-    const w = p + m;
+    let d = e - f;
+    d < 0 && (this.totalCount === 0 ? d = 0 : d = Math.max(0, this.totalCount + d));
+    const z = d + f;
     return await this.fetchImages({
-      end: w,
-      extraFields: S.filter((b) => b !== ""),
+      end: z,
+      extraFields: y.filter((b) => b !== ""),
       format: r,
-      start: p,
-      transformations: d
+      start: d,
+      transformations: p
     }), h ? this.data.filter((b) => b.id && !b.id.startsWith("temp-")) : this.data;
   }
   async fetchImagesByIDs({
@@ -630,30 +639,30 @@ class Ii {
   }) {
     if (s.length === 0)
       return [];
-    const r = i ? `path_${i}` : void 0, n = i === "TRX", h = `path_${Dt}`, d = r ? n && r !== h ? [r, h] : [r] : [], m = n ? [ct] : [], c = [
+    const r = i ? `path_${i}` : void 0, n = i === "TRX", h = `path_${Dt}`, p = r ? n && r !== h ? [r, h] : [r] : [], f = n ? [ct] : [], c = [
       ...e,
       lt,
       pt,
       dt
     ];
-    return (await xe({
-      extraFields: [...c, ...d, ...m].filter((S) => S !== ""),
-      getPermanentAssetsPaths: d.length > 0 || void 0,
+    return (await ye({
+      extraFields: [...c, ...p, ...f].filter((y) => y !== ""),
+      getPermanentAssetsPaths: p.length > 0 || void 0,
       isSiteBuilder: this.isSiteBuilder,
       recordIds: s,
       securityByPassToken: this.securityByPassToken,
       token: this.authToken
-    })).items.map((S) => {
-      const p = n && S[ct] || "", w = !p || At(p);
-      let x = r && (!n || w) && S[r] || n && !w && S[h] || S.originalUrl;
-      return x && a && a.length > 0 && (x = Pt(x, a)), {
-        alt: S.name,
-        docType: S[lt],
-        id: S.recordId,
-        name: S.name,
-        src: x,
+    })).items.map((y) => {
+      const d = n && y[ct] || "", z = !d || At(d);
+      let u = r && (!n || z) && y[r] || n && !z && y[h] || y.originalUrl;
+      return u && a && a.length > 0 && (u = Pt(u, a)), {
+        alt: y.name,
+        docType: y[lt],
+        id: y.recordId,
+        name: y.name,
+        src: u,
         ...c.reduce(
-          (F, P) => (F[P] = S[P] ?? "", F),
+          (F, P) => (F[P] = y[P] ?? "", F),
           {}
         )
       };
@@ -667,17 +676,17 @@ class Ii {
     noPlaceholders: r = !1,
     page: n,
     pageSize: h = 10,
-    transformations: d
+    transformations: p
   }) {
     (!this.folderId || this.folderId !== i) && (this.folderId = i, this.resetFolderState()), s && this.resetPageCache();
-    const m = n * h, c = m + h - 1;
+    const f = n * h, c = f + h - 1;
     return await this.fetchImages({
       end: c,
       extraFields: e,
       format: a,
-      start: m,
-      transformations: d
-    }), r ? this.data.filter((f) => f.id && !f.id.startsWith("temp-")) : this.data;
+      start: f,
+      transformations: p
+    }), r ? this.data.filter((g) => g.id && !g.id.startsWith("temp-")) : this.data;
   }
   async *fetchImagesInFolderByChunk({
     chunkSize: e = 10,
@@ -687,34 +696,34 @@ class Ii {
     forceRefetch: r = !1,
     format: n,
     start: h = 0,
-    transformations: d
+    transformations: p
   }) {
-    const m = Math.max(1, e);
+    const f = Math.max(1, e);
     if ((!this.folderId || this.folderId !== a) && (this.folderId = a, this.resetFolderState()), r && this.resetPageCache(), i !== -1) {
       await this.fetchImages({
         end: i,
         extraFields: s,
         format: n,
         start: h,
-        transformations: d
+        transformations: p
       }), yield this.data;
       return;
     }
-    let c = h, f = h + m;
+    let c = h, g = h + f;
     if (await this.fetchImages({
-      end: f,
+      end: g,
       extraFields: s,
       format: n,
       start: c,
-      transformations: d
-    }), yield this.data, !(!this.totalCount || this.totalCount <= f))
-      for (; f < this.totalCount; )
-        c = f, f = Math.min(f + m, this.totalCount), await this.fetchImages({
-          end: f,
+      transformations: p
+    }), yield this.data, !(!this.totalCount || this.totalCount <= g))
+      for (; g < this.totalCount; )
+        c = g, g = Math.min(g + f, this.totalCount), await this.fetchImages({
+          end: g,
           extraFields: s,
           format: n,
           start: c,
-          transformations: d
+          transformations: p
         }), yield this.data;
   }
   hostConnected() {
@@ -729,11 +738,11 @@ class Ii {
     this.resetPageCache();
   }
 }
-const ze = q`.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}`, we = q`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 Ae = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, z = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ve(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+const we = q`.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}`, Ae = q`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 ve = Object.defineProperty, be = Object.getOwnPropertyDescriptor, w = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? be(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;
+  return s && a && ve(e, i, a), a;
 };
 let C = class extends B {
   constructor() {
@@ -967,7 +976,7 @@ let C = class extends B {
   }
   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">${_(
+    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">${M(
       !this.noRatioModes,
       () => A`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${D({
         width: "100%"
@@ -976,7 +985,7 @@ let C = class extends B {
         (i) => i.value,
         ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
       )}
-              ${_(
+              ${M(
         e.length > 0,
         () => A`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
       )}
@@ -991,10 +1000,10 @@ let C = class extends B {
       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-typography></cx-input></div>${M(
       !this.noRatioModes,
       () => A`<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>${_(
+    )}</cx-space>${M(
       this.focusModes.length > 0,
       () => A`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${D({
         width: "100%"
@@ -1004,7 +1013,7 @@ let C = class extends B {
         ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
       )}</cx-select>`
     )}
-        ${_(
+        ${M(
       this.showPositionPicker && this.focusMode === "manual",
       () => A`<cx-position-picker data-testid="cx-asset-link-format-crop-position" value=${this.position} @cx-change=${this.onPositionChange}></cx-position-picker>`
     )}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${D({
@@ -1012,7 +1021,7 @@ let C = class extends B {
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-C.styles = [V, we];
+C.styles = [V, Ae];
 C.dependencies = {
   "cx-button": Z,
   "cx-details": et,
@@ -1026,101 +1035,101 @@ C.dependencies = {
   "cx-space": L,
   "cx-typography": U
 };
-z([
+w([
   Y(".details")
 ], C.prototype, "base", 2);
-z([
+w([
   Y("cx-position-picker")
 ], C.prototype, "positionPicker", 2);
-z([
+w([
   l({ reflect: !0, type: Boolean })
 ], C.prototype, "open", 2);
-z([
+w([
   l({ reflect: !0, type: Number })
 ], C.prototype, "width", 2);
-z([
+w([
   l({ reflect: !0, type: Number })
 ], C.prototype, "height", 2);
-z([
+w([
   l({ attribute: "max-width", reflect: !0, type: Number })
 ], C.prototype, "maxWidth", 2);
-z([
+w([
   l({ attribute: "max-height", reflect: !0, type: Number })
 ], C.prototype, "maxHeight", 2);
-z([
+w([
   l({ attribute: "ratio-width", reflect: !0, type: Number })
 ], C.prototype, "ratioWidth", 2);
-z([
+w([
   l({ attribute: "ratio-height", reflect: !0, type: Number })
 ], C.prototype, "ratioHeight", 2);
-z([
+w([
   l({ attribute: "percentage-width", reflect: !0, type: Number })
 ], C.prototype, "percentageWidth", 2);
-z([
+w([
   l({ attribute: "percentage-height", reflect: !0, type: Number })
 ], C.prototype, "percentageHeight", 2);
-z([
+w([
   l({ reflect: !0, type: String })
 ], C.prototype, "unit", 2);
-z([
+w([
   l({ attribute: "disabled-apply", reflect: !0, type: Boolean })
 ], C.prototype, "disabledApply", 2);
-z([
+w([
   l({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
 ], C.prototype, "noRatioModes", 2);
-z([
+w([
   l({ attribute: "show-position-picker", reflect: !0, type: Boolean })
 ], C.prototype, "showPositionPicker", 2);
-z([
+w([
   l({ attribute: "last-applied-setting", reflect: !1, type: Object })
 ], C.prototype, "lastAppliedSetting", 2);
-z([
+w([
   l({ reflect: !0, type: Boolean })
 ], C.prototype, "loading", 2);
-z([
+w([
   l({ attribute: "crop-modes", reflect: !1, type: Array })
 ], C.prototype, "cropModes", 2);
-z([
+w([
   l({ attribute: "focus-modes", reflect: !1, type: Object })
 ], C.prototype, "focusModes", 2);
-z([
+w([
   l({ attribute: "focus-mode", reflect: !0, type: String })
 ], C.prototype, "focusMode", 2);
-z([
+w([
   l({ attribute: "crop-mode", reflect: !0, type: String })
 ], C.prototype, "cropMode", 2);
-z([
+w([
   l({ reflect: !0, type: String })
 ], C.prototype, "position", 2);
-z([
+w([
   l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
 ], C.prototype, "keepAspectRatio", 2);
-z([
+w([
   R()
 ], C.prototype, "invalidWidth", 2);
-z([
+w([
   R()
 ], C.prototype, "invalidHeight", 2);
-z([
+w([
   R()
 ], C.prototype, "aspectRatio", 2);
-z([
-  M("cropMode", { waitUntilFirstUpdate: !0 }),
-  M("maxWidth", { waitUntilFirstUpdate: !0 }),
-  M("maxHeight", { waitUntilFirstUpdate: !0 }),
-  M("keepAspectRatio")
+w([
+  _("cropMode", { waitUntilFirstUpdate: !0 }),
+  _("maxWidth", { waitUntilFirstUpdate: !0 }),
+  _("maxHeight", { waitUntilFirstUpdate: !0 }),
+  _("keepAspectRatio")
 ], C.prototype, "handleCropModeChange", 1);
-z([
-  M("open", { waitUntilFirstUpdate: !0 })
+w([
+  _("open", { waitUntilFirstUpdate: !0 })
 ], C.prototype, "handleOpenChange", 1);
-C = z([
+C = w([
   G("cx-asset-link-format-crop")
 ], C);
-const be = q`.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 ke = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, kt = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Re(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+const ke = q`.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 Re = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, kt = (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);
-  return s && a && ke(e, i, a), a;
+  return s && a && Re(e, i, a), a;
 };
 let K = class extends B {
   constructor() {
@@ -1140,7 +1149,7 @@ let K = class extends B {
     )}</cx-select></cx-space>`;
   }
 };
-K.styles = [V, be];
+K.styles = [V, ke];
 K.dependencies = {
   "cx-option": gt,
   "cx-select": xt,
@@ -1156,11 +1165,11 @@ kt([
 K = kt([
   G("cx-asset-link-format-extension")
 ], K);
-const $e = q`cx-details::part(base){border-bottom-width:0}`;
-var Pe = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, N = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Me(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+const Pe = q`cx-details::part(base){border-bottom-width:0}`;
+var _e = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, N = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Fe(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 && Pe(e, i, a), a;
+  return s && a && _e(e, i, a), a;
 };
 let E = class extends B {
   constructor() {
@@ -1217,7 +1226,7 @@ let E = class extends B {
     })} ?disabled=${this.scopedValue === this.value} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-E.styles = [V, $e];
+E.styles = [V, Pe];
 E.dependencies = {
   "cx-button": Z,
   "cx-details": et,
@@ -1246,21 +1255,21 @@ N([
   R()
 ], E.prototype, "scopedValue", 2);
 N([
-  M("value")
+  _("value")
 ], E.prototype, "handleValueChange", 1);
 N([
-  M("open", { waitUntilFirstUpdate: !0 })
+  _("open", { waitUntilFirstUpdate: !0 })
 ], E.prototype, "handleOpenChange", 1);
 E = N([
   G("cx-asset-link-format-proxy")
 ], E);
-const Fe = q`cx-details::part(base){border-bottom-width:0}`;
-var _e = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, J = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ie(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+const Me = q`cx-details::part(base){border-bottom-width:0}`;
+var Ie = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, J = (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);
-  return s && a && _e(e, i, a), a;
+  return s && a && Ie(e, i, a), a;
 };
-let T = class extends B {
+let H = class extends B {
   constructor() {
     super(...arguments), this.localize = new j(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
   }
@@ -1311,8 +1320,8 @@ let T = class extends B {
     })} @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>`;
   }
 };
-T.styles = [V, Fe];
-T.dependencies = {
+H.styles = [V, Me];
+H.dependencies = {
   "cx-button": Z,
   "cx-details": et,
   "cx-icon": it,
@@ -1323,28 +1332,28 @@ T.dependencies = {
 };
 J([
   Y(".details")
-], T.prototype, "base", 2);
+], H.prototype, "base", 2);
 J([
   l({ reflect: !0, type: Boolean })
-], T.prototype, "open", 2);
+], H.prototype, "open", 2);
 J([
   l({ reflect: !0, type: Number })
-], T.prototype, "value", 2);
+], H.prototype, "value", 2);
 J([
   l({ reflect: !0, type: Boolean })
-], T.prototype, "loading", 2);
+], H.prototype, "loading", 2);
 J([
   R()
-], T.prototype, "scopedValue", 2);
+], H.prototype, "scopedValue", 2);
 J([
-  M("value")
-], T.prototype, "handleValueChange", 1);
-T = J([
+  _("value")
+], H.prototype, "handleValueChange", 1);
+H = J([
   G("cx-asset-link-format-quality")
-], T);
-const Ee = q`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 He = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, $ = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Te(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+], H);
+const Te = q`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 He = Object.defineProperty, We = Object.getOwnPropertyDescriptor, $ = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? We(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 && He(e, i, a), a;
 };
@@ -1495,7 +1504,7 @@ let v = class extends B {
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
     })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} @cx-input=${this.handleHeightChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 H
-              </cx-typography></cx-input></div>${_(
+              </cx-typography></cx-input></div>${M(
       !this.noRatioModes,
       () => A`<cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`
     )}</cx-space><cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${D({
@@ -1503,7 +1512,7 @@ let v = class extends B {
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-v.styles = [V, Ee];
+v.styles = [V, Te];
 v.dependencies = {
   "cx-button": Z,
   "cx-details": et,
@@ -1564,24 +1573,24 @@ $([
   R()
 ], v.prototype, "aspectRatio", 2);
 $([
-  M("cropMode", { waitUntilFirstUpdate: !0 }),
-  M("maxWidth", { waitUntilFirstUpdate: !0 }),
-  M("maxHeight", { waitUntilFirstUpdate: !0 }),
-  M("keepAspectRatio")
+  _("cropMode", { waitUntilFirstUpdate: !0 }),
+  _("maxWidth", { waitUntilFirstUpdate: !0 }),
+  _("maxHeight", { waitUntilFirstUpdate: !0 }),
+  _("keepAspectRatio")
 ], v.prototype, "handleCropModeChange", 1);
 $([
-  M("open", { waitUntilFirstUpdate: !0 })
+  _("open", { waitUntilFirstUpdate: !0 })
 ], v.prototype, "handleOpenChange", 1);
 v = $([
   G("cx-asset-link-format-resize")
 ], v);
-const We = q`cx-details::part(base){border-bottom-width:0}`;
-var De = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, Q = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ne(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+const De = q`cx-details::part(base){border-bottom-width:0}`;
+var Ne = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, Q = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Oe(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 && De(e, i, a), a;
+  return s && a && Ne(e, i, a), a;
 };
-let H = class extends B {
+let T = class extends B {
   constructor() {
     super(...arguments), this.localize = new j(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
   }
@@ -1594,14 +1603,14 @@ let H = class extends B {
     const e = t.target.value, i = Number(e);
     if (Number.isNaN(i))
       return;
-    const s = Mt(i);
+    const s = _t(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: Mt(t)
+      detail: _t(t)
     });
   }
   handleClockwiseClick() {
@@ -1627,8 +1636,8 @@ let H = class extends B {
     })} @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>`;
   }
 };
-H.styles = [V, We];
-H.dependencies = {
+T.styles = [V, De];
+T.dependencies = {
   "cx-button": Z,
   "cx-button-group": ie,
   "cx-details": et,
@@ -1639,33 +1648,33 @@ H.dependencies = {
 };
 Q([
   Y(".details")
-], H.prototype, "base", 2);
+], T.prototype, "base", 2);
 Q([
   l({ reflect: !0, type: Boolean })
-], H.prototype, "open", 2);
+], T.prototype, "open", 2);
 Q([
   l({ reflect: !0, type: Number })
-], H.prototype, "value", 2);
+], T.prototype, "value", 2);
 Q([
   l({ attribute: "default-value", reflect: !0, type: Number })
-], H.prototype, "defaultValue", 2);
+], T.prototype, "defaultValue", 2);
 Q([
   l({ reflect: !0, type: Boolean })
-], H.prototype, "loading", 2);
+], T.prototype, "loading", 2);
 Q([
   l({ attribute: "last-applied-value", reflect: !0, type: Number })
-], H.prototype, "lastAppliedValue", 2);
+], T.prototype, "lastAppliedValue", 2);
 Q([
-  M("open", { waitUntilFirstUpdate: !0 })
-], H.prototype, "handleOpenChange", 1);
-H = Q([
+  _("open", { waitUntilFirstUpdate: !0 })
+], T.prototype, "handleOpenChange", 1);
+T = Q([
   G("cx-asset-link-format-rotation")
-], H);
-const Oe = q`cx-details::part(base){border-bottom-width:0}`;
-var Le = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, yt = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ue(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+], T);
+const Le = q`cx-details::part(base){border-bottom-width:0}`;
+var Ue = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, yt = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Be(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 && Le(e, i, a), a;
+  return s && a && Ue(e, i, a), a;
 };
 let O = class extends B {
   constructor() {
@@ -1696,7 +1705,7 @@ let O = class extends B {
     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>`;
   }
 };
-O.styles = [V, Oe];
+O.styles = [V, Le];
 O.dependencies = {
   "cx-button": Z,
   "cx-checkbox": se,
@@ -1718,12 +1727,12 @@ yt([
 O = yt([
   G("cx-asset-link-format-metadata")
 ], O);
-var Be = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, y = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? qe(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+var qe = Object.defineProperty, je = Object.getOwnPropertyDescriptor, S = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? je(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 && Be(e, i, a), a;
+  return s && a && qe(e, i, a), a;
 };
-let g = class extends B {
+let x = class extends B {
   constructor() {
     super(), this.localize = new j(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
       {
@@ -1821,7 +1830,7 @@ let g = class extends B {
     }, this.rotation = 0, this.defaultSize = {
       height: 0,
       width: 0
-    }, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.preResetTransformations = void 0, this.apiGetTransformAssetLink = me, this.apiGetCropFocusMode = Se, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
+    }, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.preResetTransformations = void 0, this.apiGetTransformAssetLink = fe, this.apiGetCropFocusMode = Ce, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
   }
   /**
    * Transform requests must resolve to a web-displayable image (the browser renders the
@@ -1843,7 +1852,7 @@ let g = class extends B {
    */
   get lastAppliedCropUnit() {
     return this.transformations.findLast(
-      (e) => e.key === u.Crop
+      (e) => e.key === m.Crop
     )?.value.unit ?? o.Pixel;
   }
   /**
@@ -1853,7 +1862,7 @@ let g = class extends B {
    */
   get lastAppliedCropFocusMode() {
     return this.transformations.findLast(
-      (e) => e.key === u.Crop
+      (e) => e.key === m.Crop
     )?.value.focusMode ?? "manual";
   }
   /**
@@ -1863,7 +1872,7 @@ let g = class extends B {
    */
   get lastAppliedCropPosition() {
     return this.transformations.findLast(
-      (e) => e.key === u.Crop
+      (e) => e.key === m.Crop
     )?.value.position ?? W.CenterCenter;
   }
   /**
@@ -1915,7 +1924,7 @@ let g = class extends B {
   get lastCropSize() {
     if (!this.asset) {
       const e = this.transformations.findLast(
-        (i) => i.key === u.Crop
+        (i) => i.key === m.Crop
       );
       if (e?.value.unit === o.AspectRatio && e.value.ratioWidth && e.value.ratioHeight)
         return {
@@ -1998,7 +2007,7 @@ let g = class extends B {
   get lastResizeSize() {
     if (!this.asset) {
       const e = this.transformations.findLast(
-        (i) => i.key === u.Resize
+        (i) => i.key === m.Resize
       );
       if (e?.value.unit === o.AspectRatio && e.value.ratioWidth && e.value.ratioHeight)
         return {
@@ -2054,7 +2063,7 @@ let g = class extends B {
    */
   get lastRotation() {
     return this.asset ? 0 : this.transformations.findLast(
-      (e) => e.key === u.Rotate
+      (e) => e.key === m.Rotate
     )?.value.rotation ?? 0;
   }
   /**
@@ -2096,13 +2105,13 @@ let g = class extends B {
       );
       this.loading = !0, this.apiGetTransformAssetLink({
         assetId: this.asset.id,
-        extension: g.getTransformExtension(this.asset.extension),
+        extension: x.getTransformExtension(this.asset.extension),
         format: e?.proxyName ?? "",
         siteUrl: this.baseUrl,
         token: this.token,
         transformations: this.transformationString
       }).then((s) => {
-        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === u.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === m.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
           height: s.height,
           width: s.width
         }, this.selectedFormat = {
@@ -2161,35 +2170,35 @@ let g = class extends B {
         }).replace(/\/t\//g, "")
       });
       const r = this.transformations.findLast(
-        (c) => c.key === u.Crop && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width && c.value.height)
+        (c) => c.key === m.Crop && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width && c.value.height)
       );
       if (r?.value.unit === o.AspectRatio && r.value.ratioWidth && r.value.ratioHeight) {
-        const { focusMode: c, position: f, ratioHeight: S, ratioWidth: p } = r.value;
+        const { focusMode: c, position: g, ratioHeight: y, ratioWidth: d } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: c ?? "manual",
           percentageHeight: 100,
           percentageWidth: 100,
-          position: f ?? W.CenterCenter,
-          ratioHeight: S,
-          ratioWidth: p,
+          position: g ?? W.CenterCenter,
+          ratioHeight: y,
+          ratioWidth: d,
           unit: o.AspectRatio
         };
       } else if (r) {
-        const { focusMode: c, height: f, position: S, unit: p, width: w, x: b = 0, y: x = 0 } = r.value;
+        const { focusMode: c, height: g, position: y, unit: d, width: z, x: b = 0, y: u = 0 } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: c ?? "manual",
-          height: f,
+          height: g,
           percentageHeight: 100,
           percentageWidth: 100,
-          position: S ?? W.CenterCenter,
-          unit: p ?? o.Pixel,
-          width: w,
+          position: y ?? W.CenterCenter,
+          unit: d ?? o.Pixel,
+          width: z,
           x: b,
-          y: x
+          y: u
         };
       } else
         this.cropSize = {
@@ -2212,23 +2221,23 @@ let g = class extends B {
           y: 0
         };
       const n = this.transformations.findLast(
-        (c) => c.key === u.Resize && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width || c.value.height)
+        (c) => c.key === m.Resize && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width || c.value.height)
       );
       if (n?.value.unit === o.AspectRatio && n.value.ratioWidth && n.value.ratioHeight) {
-        const { ratioHeight: c, ratioWidth: f } = n.value;
+        const { ratioHeight: c, ratioWidth: g } = n.value;
         this.resizeSize = {
           ...this.resizeSize,
           ratioHeight: c,
-          ratioWidth: f,
+          ratioWidth: g,
           unit: o.AspectRatio
         };
       } else if (n) {
-        const { height: c = 0, unit: f, width: S = 0 } = n.value;
+        const { height: c = 0, unit: g, width: y = 0 } = n.value;
         this.resizeSize = {
           ...this.resizeSize,
           height: c,
-          unit: f ?? o.Pixel,
-          width: S
+          unit: g ?? o.Pixel,
+          width: y
         };
       } else
         this.resizeSize = {
@@ -2243,18 +2252,18 @@ let g = class extends B {
           width: 1
         };
       const h = this.transformations.findLast(
-        (c) => c.key === u.Rotate
+        (c) => c.key === m.Rotate
       );
       this.rotation = h?.value.rotation ?? 0;
-      const d = this.transformations.findLast((c) => c.key === u.Quality)?.value.quality ?? 100, m = this.transformations.some(
-        (c) => c.key === u.Metadata
+      const p = this.transformations.findLast((c) => c.key === m.Quality)?.value.quality ?? 100, f = this.transformations.some(
+        (c) => c.key === m.Metadata
       );
-      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: m, quality: d } : this.selectedFormat = {
+      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: f, quality: p } : this.selectedFormat = {
         extension: "",
         height: 0,
-        keepMetadata: m,
+        keepMetadata: f,
         originalUrl: "",
-        quality: d,
+        quality: p,
         rotation: 0,
         url: "",
         width: 0,
@@ -2271,7 +2280,7 @@ let g = class extends B {
     this.loading = !0;
     const e = await this.apiGetTransformAssetLink({
       assetId: this.asset.id,
-      extension: g.getTransformExtension(this.selectedFormat.extension),
+      extension: x.getTransformExtension(this.selectedFormat.extension),
       format: t?.proxyName ?? "",
       siteUrl: this.baseUrl,
       token: this.token,
@@ -2303,11 +2312,11 @@ let g = class extends B {
       width: e.width,
       x: 0,
       y: 0
-    }, this.lastAction === u.Rotate && (this.rotation = 0), this.lastAction = void 0;
+    }, this.lastAction === m.Rotate && (this.rotation = 0), this.lastAction = void 0;
     const i = this.transformations.some(
-      (r) => r.key === u.Metadata
+      (r) => r.key === m.Metadata
     ), s = this.transformations.findLast(
-      (r) => r.key === u.Quality
+      (r) => r.key === m.Quality
     );
     this.selectedFormat = {
       ...this.selectedFormat,
@@ -2353,7 +2362,7 @@ let g = class extends B {
       width: Number.parseInt(this.asset.width, 10)
     });
     const t = this.transformations.findLast(
-      (e) => e.key === u.Quality
+      (e) => e.key === m.Quality
     );
     this.selectedFormat = {
       extension: this.asset.extension,
@@ -2400,8 +2409,8 @@ let g = class extends B {
     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 === u.Crop) {
-        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight, h = a.x / i.formatWidth * e.formatWidth, d = a.y / i.formatHeight * e.formatHeight;
+      if (s.key === m.Crop) {
+        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight, h = a.x / i.formatWidth * e.formatWidth, p = a.y / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
@@ -2409,11 +2418,11 @@ let g = class extends B {
             height: n,
             width: r,
             x: h,
-            y: d
+            y: p
           }
         };
       }
-      if (s.key === u.Resize) {
+      if (s.key === m.Resize) {
         const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight;
         return {
           ...s,
@@ -2488,30 +2497,30 @@ let g = class extends B {
     percentageWidth: r,
     ratioHeight: n,
     ratioWidth: h,
-    unit: d,
-    useCropMode: m,
+    unit: p,
+    useCropMode: f,
     width: c
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
-    this.loading = !0, this.lastAction = u.Crop;
-    const f = await this.apiGetCropFocusMode({
+    this.loading = !0, this.lastAction = m.Crop;
+    const g = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
       cropWidth: c,
       imageUrl: this.selectedFormat.url
     });
-    if (f) {
-      let S = a, p = r;
-      i || (S = f.height * 100 / this.selectedFormat.height), c || (p = f.width * 100 / this.selectedFormat.width), this.cropSize = {
+    if (g) {
+      let y = a, d = r;
+      i || (y = g.height * 100 / this.selectedFormat.height), c || (d = g.width * 100 / this.selectedFormat.width), this.cropSize = {
         ...this.cropSize,
-        height: f.height,
-        percentageHeight: S ?? this.cropSize.percentageHeight,
-        percentageWidth: p ?? this.cropSize.percentageWidth,
-        width: f.width,
-        x: f.x * 100 / this.selectedFormat.width,
-        y: f.y * 100 / this.selectedFormat.height,
-        ...m ? {
+        height: g.height,
+        percentageHeight: y ?? this.cropSize.percentageHeight,
+        percentageWidth: d ?? this.cropSize.percentageWidth,
+        width: g.width,
+        x: g.x * 100 / this.selectedFormat.width,
+        y: g.y * 100 / this.selectedFormat.height,
+        ...f ? {
           cropMode: e,
           focusMode: "manual",
           keepAspectRatio: !1
@@ -2522,7 +2531,7 @@ let g = class extends B {
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
         ratioHeight: n ?? this.cropSize.ratioHeight,
         ratioWidth: h ?? this.cropSize.ratioWidth,
-        unit: d ?? this.cropSize.unit
+        unit: p ?? this.cropSize.unit
       };
     }
     this.loading = !1, this.lastAction = void 0;
@@ -2537,25 +2546,25 @@ let g = class extends B {
     if (s === 0 || i === 0)
       return;
     const n = this.cropSize.percentageWidth !== s, h = this.cropSize.percentageHeight !== i;
-    let d = this.cropSize.height, m = this.cropSize.width;
-    n && (m = Math.round(s * this.selectedFormat.width / 100)), h && (d = Math.round(
+    let p = this.cropSize.height, f = this.cropSize.width;
+    n && (f = Math.round(s * this.selectedFormat.width / 100)), h && (p = Math.round(
       i * this.selectedFormat.height / 100
     ));
     const c = this.cropSize.focusMode;
     this.focusModes.find(
-      (S) => S.value === c
+      (y) => y.value === c
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
       focusMode: c,
-      height: d,
+      height: p,
       percentageHeight: i,
       percentageWidth: s,
-      width: m
+      width: f
     }) : this.cropSize = {
       ...this.cropSize,
-      height: d,
+      height: p,
       percentageHeight: i,
       percentageWidth: s,
-      width: m,
+      width: f,
       x: a,
       y: r
     };
@@ -2580,7 +2589,7 @@ let g = class extends B {
   }
   onProxyChange(t) {
     const e = t.detail;
-    this.lastAction = u.Proxy, this.selectedProxy = e.id;
+    this.lastAction = m.Proxy, this.selectedProxy = e.id;
   }
   async onCropModeChange(t) {
     const { mode: e } = t.detail;
@@ -2591,7 +2600,7 @@ let g = class extends B {
       });
     else {
       const s = this.focusModes.find(
-        (d) => d.value === this.cropSize.focusMode
+        (p) => p.value === this.cropSize.focusMode
       )?.auto;
       let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, n = this.cropSize.x, h = this.cropSize.y;
       e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (n = 0, h = 0), s ? await this.handleRequestAutoCropSuggestion({
@@ -2637,14 +2646,14 @@ let g = class extends B {
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
       ) : 0, r = this.asset ? a * 100 / this.selectedFormat.height : 100, n = this.asset ? s * 100 / this.selectedFormat.width : 100;
-      let h = this.cropSize.x, d = this.cropSize.y;
-      h + n > 100 && (h = 100 - n), d + r > 100 && (d = 100 - r);
-      let m = this.cropSize.cropMode;
+      let h = this.cropSize.x, p = this.cropSize.y;
+      h + n > 100 && (h = 100 - n), p + r > 100 && (p = 100 - r);
+      let f = this.cropSize.cropMode;
       this.cropModes.find(
-        (f) => f.value === m
-      )?.auto && (m = "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 = {
+        (g) => g.value === f
+      )?.auto && (f = "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 = {
         ...this.cropSize,
-        cropMode: m,
+        cropMode: f,
         height: a,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: r,
@@ -2654,7 +2663,7 @@ let g = class extends B {
         unit: o.AspectRatio,
         width: s,
         x: h,
-        y: d
+        y: p
       };
     } else {
       const i = this.asset ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.asset ? t.detail.width * 100 / this.selectedFormat.width : 100;
@@ -2662,7 +2671,7 @@ let g = class extends B {
       a + s > 100 && (a = 100 - s), r + i > 100 && (r = 100 - i);
       let n = this.cropSize.cropMode;
       const h = this.cropModes.find(
-        (d) => d.value === n
+        (p) => p.value === n
       )?.auto;
       (t.detail.breakAspectRatio || h) && (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 = {
         ...this.cropSize,
@@ -2692,43 +2701,43 @@ let g = class extends B {
     });
   }
   onCropApply(t) {
-    if (this.preResetTransformations = void 0, this.lastAction = u.Crop, !this.asset) {
+    if (this.preResetTransformations = void 0, this.lastAction = m.Crop, !this.asset) {
       const {
         focusMode: h,
-        height: d,
-        position: m,
+        height: p,
+        position: f,
         ratioHeight: c,
-        ratioWidth: f,
-        unit: S,
-        width: p,
-        x: w,
+        ratioWidth: g,
+        unit: y,
+        width: d,
+        x: z,
         y: b
-      } = this.cropSize, x = this.focusModes.find(
+      } = this.cropSize, u = this.focusModes.find(
         (F) => F.value === h
       )?.auto ?? !1;
-      if (S === o.AspectRatio) {
-        f && c && this.upsertTransformation({
-          key: u.Crop,
+      if (y === o.AspectRatio) {
+        g && c && this.upsertTransformation({
+          key: m.Crop,
           value: {
             focusMode: h,
-            isFocusModeAuto: x,
-            position: m,
+            isFocusModeAuto: u,
+            position: f,
             ratioHeight: c,
-            ratioWidth: f,
-            unit: S
+            ratioWidth: g,
+            unit: y
           }
         });
         return;
       }
-      (d || p) && this.upsertTransformation({
-        key: u.Crop,
+      (p || d) && this.upsertTransformation({
+        key: m.Crop,
         value: {
           focusMode: h,
-          height: d,
-          isFocusModeAuto: x,
-          position: m,
-          unit: S,
-          width: p,
+          height: p,
+          isFocusModeAuto: u,
+          position: f,
+          unit: y,
+          width: d,
           /**
            * Without an asset there is no cropper to drag, so x/y are always the 0
            * placeholder from cropSize's default — never a real manual offset. Omit
@@ -2736,7 +2745,7 @@ let g = class extends B {
            * string) so `hasManualXY` in buildTransformationString doesn't spuriously
            * suppress the focus mode / position `c_g_` gravity value.
            */
-          x: Number.isFinite(w) && w !== 0 ? w : void 0,
+          x: Number.isFinite(z) && z !== 0 ? z : void 0,
           y: Number.isFinite(b) && b !== 0 ? b : void 0
         }
       });
@@ -2749,15 +2758,15 @@ let g = class extends B {
       (h) => h.value === r
     )?.auto ?? !1;
     if (e && a && s) {
-      let h = a, d = e;
-      if (s === o.AspectRatio && (h = this.cropSize.percentageWidth * this.selectedFormat.width / 100, d = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
+      let h = a, p = e;
+      if (s === o.AspectRatio && (h = this.cropSize.percentageWidth * this.selectedFormat.width / 100, p = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
         this.transformations = [
           ...this.transformations,
           {
-            key: u.Crop,
+            key: m.Crop,
             value: {
               focusMode: r,
-              height: d,
+              height: p,
               isFocusModeAuto: n,
               mode: i,
               width: h
@@ -2765,18 +2774,18 @@ let g = class extends B {
           }
         ];
       else {
-        const m = this.cropSize.x / 100 * this.selectedFormat.width, c = this.cropSize.y / 100 * this.selectedFormat.height;
+        const f = this.cropSize.x / 100 * this.selectedFormat.width, c = this.cropSize.y / 100 * this.selectedFormat.height;
         this.transformations = [
           ...this.transformations,
           {
-            key: u.Crop,
+            key: m.Crop,
             value: {
               focusMode: r,
-              height: d,
+              height: p,
               isFocusModeAuto: n,
               unit: s,
               width: h,
-              x: m,
+              x: f,
               y: c
             }
           }
@@ -2785,7 +2794,7 @@ let g = class extends B {
     } else i && (this.transformations = [
       ...this.transformations,
       {
-        key: u.Crop,
+        key: m.Crop,
         value: {
           focusMode: r,
           isFocusModeAuto: n,
@@ -2820,21 +2829,21 @@ let g = class extends B {
   }
   onResizeApply(t) {
     const { height: e, unit: i, width: s } = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = u.Resize, !this.asset) {
+    if (this.preResetTransformations = void 0, this.lastAction = m.Resize, !this.asset) {
       if (i === o.AspectRatio) {
-        const { ratioHeight: d, ratioWidth: m } = this.resizeSize;
-        m && d && this.upsertTransformation({
-          key: u.Resize,
+        const { ratioHeight: p, ratioWidth: f } = this.resizeSize;
+        f && p && this.upsertTransformation({
+          key: m.Resize,
           value: {
-            ratioHeight: d,
-            ratioWidth: m,
+            ratioHeight: p,
+            ratioWidth: f,
             unit: i
           }
         });
         return;
       }
       (e || s) && this.upsertTransformation({
-        key: u.Resize,
+        key: m.Resize,
         value: {
           height: e,
           unit: i,
@@ -2850,7 +2859,7 @@ let g = class extends B {
     this.resizeSize.unit !== i ? (n = a, h = r) : i === o.AspectRatio && (n = Math.round(s / e * r), h = r), this.transformations = [
       ...this.transformations,
       {
-        key: u.Resize,
+        key: m.Resize,
         value: {
           height: h,
           unit: i,
@@ -2864,21 +2873,21 @@ let g = class extends B {
   }
   onRotationApply(t) {
     const e = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = u.Rotate, !this.asset) {
+    if (this.preResetTransformations = void 0, this.lastAction = m.Rotate, !this.asset) {
       e ? this.upsertTransformation({
-        key: u.Rotate,
+        key: m.Rotate,
         value: {
           rotation: e
         }
       }) : this.transformations = this.transformations.filter(
-        (i) => i.key !== u.Rotate
+        (i) => i.key !== m.Rotate
       );
       return;
     }
     this.selectedFormat && (this.transformations = [
       ...this.transformations,
       {
-        key: u.Rotate,
+        key: m.Rotate,
         value: {
           rotation: e
         }
@@ -2887,9 +2896,9 @@ let g = class extends B {
   }
   onQualityChange(t) {
     const e = t.detail;
-    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = u.Quality;
+    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = m.Quality;
     const i = {
-      key: u.Quality,
+      key: m.Quality,
       value: {
         quality: e
       }
@@ -2903,22 +2912,22 @@ let g = class extends B {
       keepMetadata: e
     }), !this.asset) {
       e ? this.upsertTransformation({
-        key: u.Metadata,
+        key: m.Metadata,
         value: {
           keepMetadata: e
         }
       }) : this.transformations = this.transformations.filter(
-        (i) => i.key !== u.Metadata
+        (i) => i.key !== m.Metadata
       );
       return;
     }
     e ? this.upsertTransformation({
-      key: u.Metadata,
+      key: m.Metadata,
       value: {
         keepMetadata: e
       }
     }) : this.transformations = this.transformations.filter(
-      (i) => i.key !== u.Metadata
+      (i) => i.key !== m.Metadata
     );
   }
   onExtensionChange(t) {
@@ -2930,7 +2939,7 @@ let g = class extends B {
   }
   syncQuality() {
     const t = this.transformations.findLast(
-      (e) => e.key === u.Quality
+      (e) => e.key === m.Quality
     )?.value?.quality;
     this.selectedFormat && (this.selectedFormat = {
       ...this.selectedFormat,
@@ -2946,184 +2955,187 @@ let g = class extends B {
     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}>${_(
+    return A`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${M(
       !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>${_(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>`,
+      () => 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>${M(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>`,
       () => Xt
     )}
-      ${_(
+      ${M(
       !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 === u.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
+      () => 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 === m.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
     )}
-      ${_(
+      ${M(
       !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 === u.Crop} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} ?show-position-picker=${!this.asset} 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} position=${this.cropSize.position} 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-position-change=${this.onCropPositionChange} @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>`
+      () => 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 === m.Crop} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} ?show-position-picker=${!this.asset} 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} position=${this.cropSize.position} 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-position-change=${this.onCropPositionChange} @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>`
     )}
-      ${_(
+      ${M(
       !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 === u.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
+      () => A`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === m.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
     )}
-      ${_(
+      ${M(
       !this.noRotate,
-      () => A`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === u.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 === u.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>${_(
+      () => A`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === m.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 === m.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${M(
       !this.noMetadata,
       () => 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>`
     )}
-      ${_(
+      ${M(
       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>`
     )}</div>`;
   }
 };
-g.styles = [V, ze];
-g.dependencies = {
+x.styles = [V, we];
+x.dependencies = {
   "cx-asset-link-format-crop": C,
   "cx-asset-link-format-extension": K,
   "cx-asset-link-format-metadata": O,
   "cx-asset-link-format-proxy": E,
-  "cx-asset-link-format-quality": T,
+  "cx-asset-link-format-quality": H,
   "cx-asset-link-format-resize": v,
-  "cx-asset-link-format-rotation": H,
+  "cx-asset-link-format-rotation": T,
   "cx-button": Z,
   "cx-space": L,
   "cx-typography": U
 };
-y([
+S([
   l({ attribute: "base-url", type: String })
-], g.prototype, "baseUrl", 2);
-y([
+], x.prototype, "baseUrl", 2);
+S([
   l({ attribute: "token", type: String })
-], g.prototype, "token", 2);
-y([
+], x.prototype, "token", 2);
+S([
   l({ reflect: !1, type: Object })
-], g.prototype, "asset", 2);
-y([
+], x.prototype, "asset", 2);
+S([
   l({ attribute: "crop-modes", reflect: !1, type: Array })
-], g.prototype, "cropModes", 2);
-y([
+], x.prototype, "cropModes", 2);
+S([
   l({ attribute: "focus-modes", reflect: !1, type: Object })
-], g.prototype, "focusModes", 2);
-y([
+], x.prototype, "focusModes", 2);
+S([
   l({ reflect: !1, type: Array })
-], g.prototype, "extensions", 2);
-y([
+], x.prototype, "extensions", 2);
+S([
   l({ reflect: !1, type: Array })
-], g.prototype, "proxies", 2);
-y([
+], x.prototype, "proxies", 2);
+S([
   l({ attribute: "for-cropper", reflect: !0, type: String })
-], g.prototype, "forCropper", 2);
-y([
+], x.prototype, "forCropper", 2);
+S([
   l({ attribute: "use-session", reflect: !0, type: String })
-], g.prototype, "useSession", 2);
-y([
+], x.prototype, "useSession", 2);
+S([
   l({ reflect: !1, type: Array })
-], g.prototype, "transformations", 2);
-y([
+], x.prototype, "transformations", 2);
+S([
   l({ attribute: "selected-proxy", reflect: !0, type: String })
-], g.prototype, "selectedProxy", 2);
-y([
+], x.prototype, "selectedProxy", 2);
+S([
   l({ attribute: "default-proxy", reflect: !0, type: String })
-], g.prototype, "defaultProxy", 2);
-y([
+], x.prototype, "defaultProxy", 2);
+S([
   l({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
-], g.prototype, "useCustomExtension", 2);
-y([
+], x.prototype, "useCustomExtension", 2);
+S([
   l({ attribute: "no-metadata", reflect: !0, type: Boolean })
-], g.prototype, "noMetadata", 2);
-y([
+], x.prototype, "noMetadata", 2);
+S([
   l({ attribute: "no-format", reflect: !0, type: Boolean })
-], g.prototype, "noFormat", 2);
-y([
+], x.prototype, "noFormat", 2);
+S([
   l({ attribute: "no-crop", reflect: !0, type: Boolean })
-], g.prototype, "noCrop", 2);
-y([
+], x.prototype, "noCrop", 2);
+S([
   l({ attribute: "no-resize", reflect: !0, type: Boolean })
-], g.prototype, "noResize", 2);
-y([
+], x.prototype, "noResize", 2);
+S([
   l({ attribute: "no-rotate", reflect: !0, type: Boolean })
-], g.prototype, "noRotate", 2);
-y([
+], x.prototype, "noRotate", 2);
+S([
   l({ attribute: "last-image-size", reflect: !1, type: Object })
-], g.prototype, "lastImageSize", 2);
-y([
+], x.prototype, "lastImageSize", 2);
+S([
   l({ attribute: "hide-header", reflect: !1, type: Boolean })
-], g.prototype, "hideHeader", 2);
-y([
+], x.prototype, "hideHeader", 2);
+S([
   l({ attribute: "can-reset", type: Boolean })
-], g.prototype, "canReset", 2);
-y([
+], x.prototype, "canReset", 2);
+S([
   l({ attribute: !1, reflect: !1, type: Object })
-], g.prototype, "queryElement", 2);
-y([
+], x.prototype, "queryElement", 2);
+S([
   R()
-], g.prototype, "activeSetting", 2);
-y([
+], x.prototype, "activeSetting", 2);
+S([
   R()
-], g.prototype, "selectedFormat", 2);
-y([
+], x.prototype, "selectedFormat", 2);
+S([
   R()
-], g.prototype, "resizeSize", 2);
-y([
+], x.prototype, "resizeSize", 2);
+S([
   R()
-], g.prototype, "cropSize", 2);
-y([
+], x.prototype, "cropSize", 2);
+S([
   R()
-], g.prototype, "rotation", 2);
-y([
+], x.prototype, "rotation", 2);
+S([
   R()
-], g.prototype, "defaultSize", 2);
-y([
+], x.prototype, "defaultSize", 2);
+S([
   R()
-], g.prototype, "cropperElement", 2);
-y([
+], x.prototype, "cropperElement", 2);
+S([
   R()
-], g.prototype, "parameters", 2);
-y([
+], x.prototype, "parameters", 2);
+S([
   R()
-], g.prototype, "loading", 2);
-y([
+], x.prototype, "loading", 2);
+S([
   R()
-], g.prototype, "lastAction", 2);
-y([
+], x.prototype, "lastAction", 2);
+S([
   R()
-], g.prototype, "frozenIndex", 2);
-y([
+], x.prototype, "frozenIndex", 2);
+S([
   R()
-], g.prototype, "preResetTransformations", 2);
-y([
-  M("transformations")
-], g.prototype, "handleTransformationsChange", 1);
-y([
-  M("selectedProxy")
-], g.prototype, "handleSelectedProxyChange", 1);
-y([
-  M("loading")
-], g.prototype, "handleLoadingChange", 1);
-g = y([
+], x.prototype, "preResetTransformations", 2);
+S([
+  _("transformations")
+], x.prototype, "handleTransformationsChange", 1);
+S([
+  _("selectedProxy")
+], x.prototype, "handleSelectedProxyChange", 1);
+S([
+  _("loading")
+], x.prototype, "handleLoadingChange", 1);
+x = S([
   G("cx-asset-link-format")
-], g);
+], x);
 export {
-  g as C,
+  x as C,
   wt as D,
   ct as F,
   tt as O,
-  xe as a,
+  ye as a,
   ce as b,
   Ut as c,
-  Fi as d,
-  _i as e,
-  Mi as f,
+  Ti as d,
+  Hi as e,
+  Ei as f,
   qt as g,
   ut as h,
   At as i,
   lt as j,
-  _t as k,
+  Mt as k,
   It as l,
   pt as m,
   dt as n,
-  Ht as o,
-  Ii as p,
+  Tt as o,
+  Wi as p,
   oe as q,
+  Fi as r,
+  Mi as s,
+  Ii as t,
   ae as u
 };