@orangelogic/design-system 2.151.0 → 2.153.0

package/library/chunks/{asset-link-format.Bctc22QM.js → asset-link-format.DzYh0_YS.js}

@@ -1,47 +1,48 @@
 import "../components/cropper.js";
-import { C as G } from "./button.8syoJXYs.js";
-import D from "../components/space.js";
-import { C as N } from "./typography.IqHbnd3C.js";
-import { n, C as O } from "./lib-cortex-element.CVMmyPMC.js";
-import { h as _, a as Ht, C as Et, S as Nt, b as Ot, c as Lt, d as Ut } from "./endpoints.CwgTrs4A.js";
-import { M as At, U as o, T as p } from "./asset-link-format.QzzboHHE.js";
+import { C as K } from "./button.8syoJXYs.js";
+import O from "../components/space.js";
+import { C as L } from "./typography.IqHbnd3C.js";
+import { n as l, C as U } from "./lib-cortex-element.CVMmyPMC.js";
+import { h as M, a as Wt, C as Dt, S as Bt, b as qt, c as jt, d as Vt } from "./endpoints.CwgTrs4A.js";
+import { M as Rt, U as o, T as u } from "./asset-link-format.QzzboHHE.js";
 import "./browser.BHOCIF_A.js";
-import { i as L, x as S, E as qt } from "./lit-element.jLBm65_O.js";
+import { i as B, x as A, E as Gt } from "./lit-element.jLBm65_O.js";
 import "./form.CP9KLGjF.js";
-import { L as U } from "./i18n.Bchq8v1d.js";
-import { a as Bt } from "./string.BhJ0Zogu.js";
+import { L as q } from "./i18n.Bchq8v1d.js";
+import { a as Qt } from "./string.BhJ0Zogu.js";
 import "./date-picker.BGHn6qg8.js";
 import "./content-builder.BU8X7I6V.js";
 import "./unsafe-html.Dff7-rCx.js";
-import { b as jt } from "./_baseUniq.je-HWbb3.js";
-import { c as q } from "./component.styles.CRO4Odto.js";
-import { c as B } from "./custom-element.L4WJXn1j.js";
-import { w as $ } from "./watch.DOt4Mabe.js";
-import { s as vt, c as et } from "./number.CtCaI0T_.js";
-import { b as it } from "./transformation.DGzjBg6V.js";
-import { r as b } from "./state.CSDxrqLd.js";
-import { n as M } from "./when.Dr1es41R.js";
-import Z from "../components/details.js";
-import Vt from "../components/divider.js";
-import { C as Y } from "./icon.mxNZ85k0.js";
-import { C as mt } from "./icon-button.DbVIFgu7.js";
-import { C as ft } from "./input.BcyLZUmv.js";
-import { C as ht } from "./option.qN3aaqVI.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 It from "../components/tooltip.js";
-import Qt from "../components/button-group.js";
-import { C as Kt } from "./checkbox.3i2j3PHc.js";
-function Xt(t) {
-  return t && t.length ? jt(t) : [];
+import { b as Xt } from "./_baseUniq.je-HWbb3.js";
+import { c as j } from "./component.styles.CRO4Odto.js";
+import { b as Y } from "./transformation.DGzjBg6V.js";
+import { v as Kt } from "./v4.CKZ6klMF.js";
+import { c as V } from "./custom-element.L4WJXn1j.js";
+import { w as F } from "./watch.DOt4Mabe.js";
+import { s as $t, c as rt } from "./number.CtCaI0T_.js";
+import { r as k } from "./state.CSDxrqLd.js";
+import { n as _ } from "./when.Dr1es41R.js";
+import tt from "../components/details.js";
+import Zt from "../components/divider.js";
+import { C as et } from "./icon.mxNZ85k0.js";
+import { C as vt } from "./icon-button.DbVIFgu7.js";
+import { C as bt } from "./input.BcyLZUmv.js";
+import { C as ft } from "./option.qN3aaqVI.js";
+import gt from "../components/select.js";
+import { c as Yt } from "./image.QVlPFadX.js";
+import { e as it } from "./query.BBf1UFkC.js";
+import { c as ot } from "./repeat.CFjcER6_.js";
+import { o as W } from "./style-map.llVFPd__.js";
+import Nt from "../components/tooltip.js";
+import Jt from "../components/button-group.js";
+import { C as te } from "./checkbox.3i2j3PHc.js";
+function ee(t) {
+  return t && t.length ? Xt(t) : [];
 }
-function Zt(t) {
+function ie(t) {
   return typeof t == "object" && t !== null && "URI" in t;
 }
-const Yt = {
+const se = {
   artist: "Artist",
   color: "Color",
   createDate: "CreateDate",
@@ -63,35 +64,35 @@ const Yt = {
   systemIdentifier: "SystemIdentifier",
   text: "Text",
   title: "Title"
-}, Jt = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
-function dt(t) {
+}, ae = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
+function zt(t) {
   return !/[\s&+/*"\\:(),'<>~|[\]{}]/.test(t) && !/^(?:OR|AND|NOT)$/.test(t) ? t : `"${t.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
 }
-function wt(t, e) {
-  const s = (Array.isArray(e) ? e : [e]).map((a) => `${t}:${dt(a)}`);
+function Pt(t, e) {
+  const s = (Array.isArray(e) ? e : [e]).map((a) => `${t}:${zt(a)}`);
   return s.length > 1 ? `(${s.join(" OR ")})` : s[0] ?? "";
 }
-function te(t, e) {
+function oe(t, e) {
   return (Array.isArray(e) ? e : [e]).map((s) => `${t}${s.operator}${s.value}`).join(" AND ");
 }
-function ee(t) {
+function re(t) {
   const e = [];
   for (const i of Object.keys(t)) {
     const s = i, a = t[s];
     if (a == null)
       continue;
     if (s === "custom") {
-      for (const [h, l] of Object.entries(
+      for (const [h, n] of Object.entries(
         a
       ))
-        e.push(wt(h, l));
+        e.push(Pt(h, n));
       continue;
     }
-    const r = Yt[s];
+    const r = se[s];
     if (r) {
-      if (Jt.has(s)) {
+      if (ae.has(s)) {
         e.push(
-          te(r, a)
+          oe(r, a)
         );
         continue;
       }
@@ -103,57 +104,57 @@ function ee(t) {
         const h = Array.isArray(a) ? a : [a];
         if (h.length === 0)
           continue;
-        const l = [
-          ...h.map((m) => `ParentFolderIdentifier:${dt(String(m))}`),
-          ...h.map((m) => `ParentAlbumIdentifier:${dt(String(m))}`)
+        const n = [
+          ...h.map((d) => `ParentFolderIdentifier:${zt(String(d))}`),
+          ...h.map((d) => `ParentAlbumIdentifier:${zt(String(d))}`)
         ];
-        e.push(`(${l.join(" OR ")})`);
+        e.push(`(${n.join(" OR ")})`);
         continue;
       }
-      e.push(wt(r, a));
+      e.push(Pt(r, a));
     }
   }
   return e.join(" AND ");
 }
-function st(t) {
+function ht(t) {
   if ("and" in t)
-    return t.and.map(st).filter(Boolean).join(" AND ");
+    return t.and.map(ht).filter(Boolean).join(" AND ");
   if ("or" in t) {
-    const e = t.or.map(st).filter(Boolean);
+    const e = t.or.map(ht).filter(Boolean);
     return e.length > 1 ? `(${e.join(" OR ")})` : e[0] ?? "";
   }
   if ("not" in t) {
-    const e = st(t.not);
+    const e = ht(t.not);
     return e ? `NOT (${e})` : "";
   }
-  return ee(t);
+  return re(t);
 }
-const ut = "CoreField.LargeSizePreview", bt = "CoreField.DocType", ie = "Document.Title", se = "Document.CaptionLong", Ct = "Document.FileExtension", kt = "CoreField.FileSize", Rt = "CoreField.Identifier", $t = "CoreField.Keywords", _t = "CoreField.MaxHeight", Mt = "CoreField.MaxWidth", at = "Document.RecordID", Pt = "CoreField.DocSubType", Wt = "CoreField.TitleWithFallback", ot = "CoreField.OriginalFileName", rt = "CoreField.UpdatedFileName", X = "CoreField.OriginalPreview", pt = {
+const wt = "CoreField.LargeSizePreview", nt = "CoreField.DocType", he = "Document.Title", ne = "Document.CaptionLong", lt = "Document.FileExtension", Ft = "CoreField.FileSize", Mt = "CoreField.Identifier", _t = "CoreField.Keywords", ct = "CoreField.MaxHeight", pt = "CoreField.MaxWidth", dt = "Document.RecordID", It = "CoreField.DocSubType", Ot = "CoreField.TitleWithFallback", ut = "CoreField.OriginalFileName", mt = "CoreField.UpdatedFileName", J = "CoreField.OriginalPreview", St = {
   DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
   FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
   ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
-}, Tt = {
-  [ut]: pt.DEFAULT_VIEW_SIZE,
-  [Wt]: pt.FIELD_TITLE_WITH_FALLBACK,
-  [X]: pt.ORIGINAL_VIEW_SIZE
-}, ae = Object.fromEntries(
-  Object.entries(Tt).map(([t, e]) => [
+}, Lt = {
+  [wt]: St.DEFAULT_VIEW_SIZE,
+  [Ot]: St.FIELD_TITLE_WITH_FALLBACK,
+  [J]: St.ORIGINAL_VIEW_SIZE
+}, le = Object.fromEntries(
+  Object.entries(Lt).map(([t, e]) => [
     e,
     t
   ])
 );
-function oe(t) {
-  return Tt[t] ?? t;
+function ce(t) {
+  return Lt[t] ?? t;
 }
-function Ft(t) {
+function Et(t) {
   const e = {};
   for (const [i, s] of Object.entries(t)) {
-    const a = ae[i] ?? i;
+    const a = le[i] ?? i;
     e[a] = s;
   }
   return e;
 }
-async function Dt({
+async function Ut({
   countPerPage: t,
   fields: e,
   getPermanentAssetsPaths: i,
@@ -161,49 +162,49 @@ async function Dt({
   pageNumber: a,
   query: r,
   securityByPassToken: h,
-  siteUrl: l,
-  sort: m,
-  token: x,
+  siteUrl: n,
+  sort: d,
+  token: m,
   useSession: c
 }) {
-  const y = e?.map(oe);
+  const f = e?.map(ce);
   try {
-    return (await _.request({
-      baseURL: l,
-      headers: x ? { Authorization: `Bearer ${x}` } : void 0,
+    return (await M.request({
+      baseURL: n,
+      headers: m ? { Authorization: `Bearer ${m}` } : void 0,
       method: "GET",
       params: {
         CountPerPage: t,
-        Fields: Xt(y),
+        Fields: ee(f),
         Format: "json",
         GetPermanentAssetsPaths: i || void 0,
         PageNumber: a,
-        Query: st(r),
+        Query: ht(r),
         SecurityByPassToken: h || void 0,
-        Sort: m || void 0,
+        Sort: d || void 0,
         UseSession: c || void 0
       },
       paramsSerializer: { indexes: null },
       responseType: "json",
       transformResponse: [
-        ...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
+        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
+        s ? (p) => ({
+          items: (p.results?.Items ?? []).map(Et),
+          sort: p.results?.GlobalInfo?.Sort ?? "",
+          totalCount: p.results?.GlobalInfo?.TotalCount ?? 0
+        }) : (p) => ({
+          items: (p.APIResponse?.Items ?? []).map(Et),
+          sort: p.APIResponse?.GlobalInfo?.Sort ?? "",
+          totalCount: p.APIResponse?.GlobalInfo?.TotalCount ?? 0
         })
       ],
-      url: s ? Et.SEARCH_ASSETS : Nt["4.0"]
+      url: s ? Dt.SEARCH_ASSETS : Bt["4.0"]
     })).data;
   } catch {
     return { items: [], sort: "", totalCount: 0 };
   }
 }
-async function re({
+async function pe({
   assetId: t,
   extension: e,
   format: i,
@@ -213,13 +214,13 @@ async function re({
   useSession: h
 }) {
   try {
-    return (await _.request({
+    return (await M.request({
       baseURL: s,
       method: "GET",
       params: {
         SourceAssetFormat: i,
         SourceAssetRecordID: t,
-        TargetExtension: Bt(e),
+        TargetExtension: Qt(e),
         Token: a || void 0,
         Transformations: r,
         UseSession: h || void 0
@@ -229,20 +230,20 @@ async function re({
        */
       timeout: 3e5,
       // 5 minutes
-      url: Ht.GET_TRANSFORM_ASSET_LINK
+      url: Wt.GET_TRANSFORM_ASSET_LINK
     })).data;
   } catch {
     return null;
   }
 }
-const he = 50;
-function ne(t, e) {
+const de = 50;
+function ue(t, e) {
   const i = [];
   for (let s = 0; s < t.length; s += e)
     i.push(t.slice(s, s + e));
   return i;
 }
-async function xi({
+async function me({
   extraFields: t,
   getPermanentAssetsPaths: e,
   isSiteBuilder: i,
@@ -252,51 +253,51 @@ async function xi({
 }) {
   if (!Array.isArray(s) || s.length === 0)
     return { facets: [], items: [], totalCount: 0 };
-  const h = t?.filter((f) => f && typeof f == "string") ?? [], l = [
+  const h = t?.filter((p) => p && typeof p == "string") ?? [], n = [
     ...h,
-    X,
-    rt,
-    ot,
-    ie,
-    se,
-    at
-  ], m = ne(s, he), x = await Promise.all(
-    m.map(
-      (f) => Dt({
-        countPerPage: f.length,
-        fields: l,
+    J,
+    mt,
+    ut,
+    he,
+    ne,
+    dt
+  ], d = ue(s, de), m = await Promise.all(
+    d.map(
+      (p) => Ut({
+        countPerPage: p.length,
+        fields: n,
         getPermanentAssetsPaths: e,
         isSiteBuilder: i,
         pageNumber: 1,
-        query: { recordId: f },
+        query: { recordId: p },
         securityByPassToken: a,
         token: r
       })
     )
-  ), 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),
+  ), c = new Map(s.map((p, w) => [p, w])), f = m.flatMap((p) => p.items).map((p) => {
+    let w = C(p, mt);
+    return w === "" && (w = C(p, ut)), {
+      name: w,
+      originalUrl: C(p, J),
+      recordId: C(p, dt),
       ...h.reduce(
-        (E, A) => (E[A] = w(f, A), E),
+        (R, x) => (R[x] = C(p, x), R),
         {}
       )
     };
   }).sort(
-    (f, R) => (c.get(f.recordId) ?? 1 / 0) - (c.get(R.recordId) ?? 1 / 0)
-  ), C = x.reduce(
-    (f, R) => f + R.totalCount,
+    (p, w) => (c.get(p.recordId) ?? 1 / 0) - (c.get(w.recordId) ?? 1 / 0)
+  ), S = m.reduce(
+    (p, w) => p + w.totalCount,
     0
   );
-  return { facets: [], items: y, totalCount: C };
+  return { facets: [], items: f, totalCount: S };
 }
-function w(t, e) {
+function C(t, e) {
   const i = t[e];
-  return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : Zt(i) ? i.URI : "";
+  return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : ie(i) ? i.URI : "";
 }
-async function yi({
+async function fe({
   countPerPage: t,
   directParentFolderIdentifier: e,
   extraFields: i,
@@ -304,75 +305,75 @@ async function yi({
   isSiteBuilder: a,
   limitedDocTypes: r,
   pageNumber: h,
-  parentFolderIdentifier: l,
-  searchTerm: m,
-  securityByPassToken: x,
+  parentFolderIdentifier: n,
+  searchTerm: d,
+  securityByPassToken: m,
   sortOrder: c,
-  token: y
+  token: f
 }) {
-  if (!e && !l)
+  if (!e && !n)
     return { facets: [], items: [], totalCount: 0 };
-  const C = (i?.filter((A) => A && typeof A == "string") ?? []).map((A) => A.replace("%20", " ")), f = {
+  const S = (i?.filter((x) => x && typeof x == "string") ?? []).map((x) => x.replace("%20", " ")), p = {
     directParentFolderIdentifier: e,
-    parentFolderIdentifier: l,
-    ...r.length > 0 ? { docType: [At.Image, At.Audio] } : {}
-  }, R = await Dt({
+    parentFolderIdentifier: n,
+    ...r.length > 0 ? { docType: [Rt.Image, Rt.Audio] } : {}
+  }, w = await Ut({
     countPerPage: t,
     fields: [
-      ...C,
-      Wt,
-      ut,
-      X,
-      $t,
-      Mt,
+      ...S,
+      Ot,
+      wt,
+      J,
       _t,
-      kt,
-      bt,
-      Pt,
-      Rt,
-      Ct,
-      at,
-      ot,
-      rt
+      pt,
+      ct,
+      Ft,
+      nt,
+      It,
+      Mt,
+      lt,
+      dt,
+      ut,
+      mt
     ],
     getPermanentAssetsPaths: s,
     isSiteBuilder: a,
     pageNumber: h,
-    query: f,
-    securityByPassToken: x,
+    query: p,
+    securityByPassToken: m,
     sort: void 0,
-    token: y
-  }), E = R.items.map((A) => {
-    let K = w(A, Ct), ct = w(A, rt), xt = w(A, ut);
-    K && !K.startsWith(".") && (K = "." + K), ct === "" && (ct = w(A, ot)), K.toLowerCase() === ".gif" && (xt = w(A, X));
-    const yt = w(A, at);
+    token: f
+  }), R = w.items.map((x) => {
+    let E = C(x, lt), P = C(x, mt), st = C(x, wt);
+    E && !E.startsWith(".") && (E = "." + E), P === "" && (P = C(x, ut)), E.toLowerCase() === ".gif" && (st = C(x, J));
+    const yt = C(x, dt);
     return {
-      docSubType: w(A, Pt),
-      docType: w(A, bt) || "",
-      extension: K,
-      height: w(A, _t) || "0",
+      docSubType: C(x, It),
+      docType: C(x, nt) || "",
+      extension: E,
+      height: C(x, ct) || "0",
       id: yt,
-      identifier: w(A, Rt),
-      imageUrl: xt,
-      name: ct,
-      originalUrl: w(A, X),
+      identifier: C(x, Mt),
+      imageUrl: st,
+      name: P,
+      originalUrl: C(x, J),
       recordId: yt,
-      size: w(A, kt) || "0 MB",
-      tags: w(A, $t),
-      width: w(A, Mt) || "0",
-      ...C.reduce(
-        (St, zt) => (St[zt] = w(A, zt), St),
+      size: C(x, Ft) || "0 MB",
+      tags: C(x, _t),
+      width: C(x, pt) || "0",
+      ...S.reduce(
+        (Q, at) => (Q[at] = C(x, at), Q),
         {}
       )
     };
   });
   return {
     facets: [],
-    items: E,
-    totalCount: R.totalCount
+    items: R,
+    totalCount: w.totalCount
   };
 }
-async function le({
+async function ge({
   autoCropMode: t,
   cropHeight: e,
   cropWidth: i,
@@ -380,7 +381,7 @@ async function le({
   useSession: a
 }) {
   try {
-    return (await _.request({
+    return (await M.request({
       method: "GET",
       params: {
         AutoCropMode: t,
@@ -393,7 +394,7 @@ async function le({
       timeout: 3e5,
       // 5 minutes
       transformResponse: [
-        ...Array.isArray(_.defaults.transformResponse) ? _.defaults.transformResponse : [],
+        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
         (h) => ({
           height: h.cropHeight,
           width: h.cropWidth,
@@ -401,13 +402,13 @@ async function le({
           y: h.cropY
         })
       ],
-      url: Ht.GET_CROP_ZONE_SUGGESTION
+      url: Wt.GET_CROP_ZONE_SUGGESTION
     })).data;
   } catch {
     return null;
   }
 }
-async function Si({
+async function ki({
   assetRecordId: t,
   isSiteBuilder: e,
   siteUrl: i,
@@ -415,7 +416,7 @@ async function Si({
   useSession: a
 }) {
   try {
-    return (await _.request({
+    return (await M.request({
       baseURL: i,
       method: "GET",
       params: {
@@ -425,35 +426,35 @@ async function Si({
       },
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(_.defaults.transformResponse) ? _.defaults.transformResponse : [],
-        (h) => !h || typeof h != "object" ? [] : h.proxies?.map((l) => ({
-          cdnName: l.cdnName,
-          extension: l.extension,
-          formatHeight: l.formatHeight,
-          formatWidth: l.formatWidth,
-          height: l.height,
-          permanentLink: l.permanentLink,
-          proxyLabel: l.proxyLabel,
-          proxyName: l.proxyName,
-          width: l.width
+        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
+        (h) => !h || typeof h != "object" ? [] : h.proxies?.map((n) => ({
+          cdnName: n.cdnName,
+          extension: n.extension,
+          formatHeight: n.formatHeight,
+          formatWidth: n.formatWidth,
+          height: n.height,
+          permanentLink: n.permanentLink,
+          proxyLabel: n.proxyLabel,
+          proxyName: n.proxyName,
+          width: n.width
         })) ?? []
       ],
-      url: e ? Et.GET_AVAILABLE_PROXIES : Ut
+      url: e ? Dt.GET_AVAILABLE_PROXIES : Vt
     })).data;
   } catch {
     return [];
   }
 }
-async function zi({
+async function Ri({
   siteUrl: t
 } = {}) {
   try {
-    return (await _.request({
+    return (await M.request({
       baseURL: t,
       method: "GET",
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(_.defaults.transformResponse) ? _.defaults.transformResponse : [],
+        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
         (i) => !i || typeof i != "object" ? {
           formatsByDocType: {
             Audio: {},
@@ -465,13 +466,13 @@ async function zi({
           formatsByDocType: i.formatsByDocType ?? {}
         }
       ],
-      url: Ot
+      url: qt
     })).data;
   } catch {
     return { formatsByDocType: {} };
   }
 }
-async function Ai({
+async function $i({
   recordIds: t,
   rightsToCheck: e
 }) {
@@ -482,27 +483,260 @@ async function Ai({
     invalidObjects: []
   };
   try {
-    const { data: s } = await _.request({
+    const { data: s } = await M.request({
       method: "GET",
       params: { RecordIDs: t, RightsToCheck: e },
       paramsSerializer: { indexes: null },
       responseType: "json",
-      url: Lt.GET_AUTHORIZED_OBJECTS
+      url: jt.GET_AUTHORIZED_OBJECTS
     });
     return s;
   } catch {
     return i;
   }
 }
-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, z = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ue(e, i) : e, r = t.length - 1, h; r >= 0; r--)
+const Ht = 20, Tt = "TR1", xe = /* @__PURE__ */ new Set([
+  ".avif",
+  ".bmp",
+  ".gif",
+  ".ico",
+  ".jpeg",
+  ".jpg",
+  ".png",
+  ".svg",
+  ".webp"
+]);
+function At(t) {
+  const e = t.toLowerCase(), i = e.startsWith(".") ? e : `.${e}`;
+  return xe.has(i);
+}
+class Pi {
+  constructor(e, i) {
+    this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = 1 / 0, this.pageSize = Ht, this.requestEpoch = 0, this.host = e, this.host.addController?.(this);
+    const s = i?.maxEnd;
+    this.maxEnd = typeof s == "number" && Number.isFinite(s) && s >= 0 ? Math.floor(s) : 1 / 0;
+    const a = i?.pageSize;
+    this.pageSize = typeof a == "number" && Number.isFinite(a) && a >= 1 ? Math.floor(a) : Ht, this.authToken = i?.token, this.securityByPassToken = i?.securityByPassToken, this.isSiteBuilder = i?.isSiteBuilder ?? !1;
+  }
+  get totalDataCount() {
+    return this.totalCount;
+  }
+  setSecurityByPassToken(e) {
+    this.securityByPassToken !== e && (this.securityByPassToken = e, this.resetPageCache());
+  }
+  async fetchImages({
+    end: e,
+    extraFields: i = [],
+    format: s,
+    start: a,
+    transformations: r
+  }) {
+    if (e < a)
+      return this.data;
+    if (this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e < a))
+      return this.data;
+    const h = this.requestEpoch;
+    if (!this.folderId || h !== this.requestEpoch)
+      return this.data;
+    const n = s ? `path_${s}` : void 0, d = s === "TRX", m = `path_${Tt}`, c = n ? d && n !== m ? [n, m] : [n] : [], 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))
+        continue;
+      const w = await fe({
+        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,
+        searchTerm: "",
+        securityByPassToken: this.securityByPassToken,
+        sortOrder: "",
+        token: this.authToken
+      });
+      if (h !== 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 }, () => ({
+          alt: "",
+          id: `temp-${Kt()}`,
+          name: "",
+          src: ""
+        }));
+      }
+      const R = (p - 1) * this.pageSize;
+      for (let x = 0; x < w.items.length; x++) {
+        const E = R + x;
+        if (E < this.data.length) {
+          const P = w.items[x], st = !P.extension || At(P.extension);
+          let Q = n && (!d || st) && P[n] || d && !st && P[m] || P.imageUrl;
+          Q && r && r.length > 0 && (Q = Y({ baseUrl: Q, transformations: r })), this.data[E] = {
+            alt: P.name,
+            docType: P.docType,
+            id: P.id,
+            name: P.name,
+            src: Q,
+            ...i.reduce(
+              (at, kt) => (at[kt] = P[kt] ?? "", at),
+              {}
+            )
+          };
+        }
+      }
+    }
+  }
+  async fetchImagesInFolderBySlide({
+    activeSlide: e,
+    extraFields: i = [],
+    folderId: s,
+    forceRefetch: a = !1,
+    format: r,
+    minLimit: h = 5,
+    noPlaceholders: n = !1,
+    transformations: d
+  }) {
+    (!this.folderId || this.folderId !== s) && (this.folderId = s, this.resetFolderState()), a && this.resetPageCache();
+    const m = Math.max(5, h), c = e, f = e + m, S = [
+      ...i,
+      ct,
+      pt
+    ];
+    await this.fetchImages({
+      end: f,
+      extraFields: S.filter((R) => R !== ""),
+      format: r,
+      start: c,
+      transformations: d
+    });
+    let p = e - m;
+    p < 0 && (this.totalCount === 0 ? p = 0 : p = Math.max(0, this.totalCount + p));
+    const w = p + m;
+    return await this.fetchImages({
+      end: w,
+      extraFields: S.filter((R) => R !== ""),
+      format: r,
+      start: p,
+      transformations: d
+    }), n ? this.data.filter((R) => R.id && !R.id.startsWith("temp-")) : this.data;
+  }
+  async fetchImagesByIDs({
+    extraFields: e = [],
+    format: i,
+    recordIds: s,
+    transformations: a
+  }) {
+    if (s.length === 0)
+      return [];
+    const r = i ? `path_${i}` : void 0, h = i === "TRX", n = `path_${Tt}`, d = r ? h && r !== n ? [r, n] : [r] : [], m = h ? [lt] : [], c = [
+      ...e,
+      nt,
+      ct,
+      pt
+    ];
+    return (await me({
+      extraFields: [...c, ...d, ...m].filter((S) => S !== ""),
+      getPermanentAssetsPaths: d.length > 0 || void 0,
+      isSiteBuilder: this.isSiteBuilder,
+      recordIds: s,
+      securityByPassToken: this.securityByPassToken,
+      token: this.authToken
+    })).items.map((S) => {
+      const p = h && S[lt] || "", w = !p || At(p);
+      let x = r && (!h || w) && S[r] || h && !w && S[n] || S.originalUrl;
+      return x && a && a.length > 0 && (x = Y({ baseUrl: x, transformations: a })), {
+        alt: S.name,
+        docType: S[nt],
+        id: S.recordId,
+        name: S.name,
+        src: x,
+        ...c.reduce(
+          (E, P) => (E[P] = S[P] ?? "", E),
+          {}
+        )
+      };
+    });
+  }
+  async fetchImagesInFolderByPage({
+    extraFields: e = [],
+    folderId: i,
+    forceRefetch: s = !1,
+    format: a,
+    noPlaceholders: r = !1,
+    page: h,
+    pageSize: n = 10,
+    transformations: d
+  }) {
+    (!this.folderId || this.folderId !== i) && (this.folderId = i, this.resetFolderState()), s && this.resetPageCache();
+    const m = h * n, c = m + n - 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;
+  }
+  async *fetchImagesInFolderByChunk({
+    chunkSize: e = 10,
+    end: i = 0,
+    extraFields: s = [],
+    folderId: a,
+    forceRefetch: r = !1,
+    format: h,
+    start: n = 0,
+    transformations: d
+  }) {
+    const m = 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: h,
+        start: n,
+        transformations: d
+      }), yield this.data;
+      return;
+    }
+    let c = n, f = n + m;
+    if (await this.fetchImages({
+      end: f,
+      extraFields: s,
+      format: h,
+      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,
+          extraFields: s,
+          format: h,
+          start: c,
+          transformations: d
+        }), yield this.data;
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.resetFolderState();
+  }
+  resetPageCache() {
+    this.requestEpoch += 1, this.data = [], this.totalCount = 0, this.fetchedPages.clear();
+  }
+  resetFolderState() {
+    this.resetPageCache();
+  }
+}
+const ye = B`.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}`, Se = B`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 ze = Object.defineProperty, we = Object.getOwnPropertyDescriptor, v = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? we(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;
+  return s && a && ze(e, i, a), a;
 };
-let g = class extends O {
+let z = class extends U {
   constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.lastAppliedSetting = {
+    super(...arguments), this.localize = new q(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,
@@ -614,7 +848,7 @@ let g = class extends O {
       const [s, a] = e.split(":").map(Number);
       if (this.unit === o.Pixel) {
         let r = s, h = a;
-        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: h, width: r } = Gt(
+        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: h, width: r } = Yt(
           this.maxWidth,
           this.maxHeight,
           s,
@@ -724,150 +958,150 @@ let g = class extends O {
   }
   render() {
     const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
-    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small">${M(
+    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">${_(
       !this.noRatioModes,
-      () => S`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${I({
+      () => A`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${W({
         width: "100%"
-      })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${tt(
+      })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${ot(
         t,
         (i) => i.value,
-        ({ label: i, value: s }) => S`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
       )}
-              ${M(
+              ${_(
         e.length > 0,
-        () => S`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
+        () => A`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
       )}
-              ${tt(
+              ${ot(
         e,
         (i) => i.value,
-        ({ label: i, value: s }) => S`<cx-option value=${s}>${i}</cx-option>`
+        ({ 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">
                 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({
+              </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=${W({
       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>${M(
+              </cx-typography></cx-input></div>${_(
       !this.noRatioModes,
-      () => S`<cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`
-    )}</cx-space>${M(
+      () => 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>${_(
       this.focusModes.length > 0,
-      () => S`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${I({
+      () => A`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${W({
         width: "100%"
-      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${tt(
+      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${ot(
         this.focusModes,
         (i) => i.value,
-        ({ label: i, value: s }) => S`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => A`<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({
+    )}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${W({
       marginLeft: "auto"
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-g.styles = [q, pe];
-g.dependencies = {
-  "cx-button": G,
-  "cx-details": Z,
-  "cx-divider": Vt,
-  "cx-icon": Y,
-  "cx-icon-button": mt,
-  "cx-input": ft,
-  "cx-option": ht,
-  "cx-select": nt,
-  "cx-space": D,
-  "cx-typography": N
+z.styles = [j, Se];
+z.dependencies = {
+  "cx-button": K,
+  "cx-details": tt,
+  "cx-divider": Zt,
+  "cx-icon": et,
+  "cx-icon-button": vt,
+  "cx-input": bt,
+  "cx-option": ft,
+  "cx-select": gt,
+  "cx-space": O,
+  "cx-typography": L
 };
-z([
-  J(".details")
-], g.prototype, "base", 2);
-z([
-  n({ reflect: !0, type: Boolean })
-], g.prototype, "open", 2);
-z([
-  n({ reflect: !0, type: Number })
-], g.prototype, "width", 2);
-z([
-  n({ reflect: !0, type: Number })
-], g.prototype, "height", 2);
-z([
-  n({ attribute: "max-width", reflect: !0, type: Number })
-], g.prototype, "maxWidth", 2);
-z([
-  n({ attribute: "max-height", reflect: !0, type: Number })
-], g.prototype, "maxHeight", 2);
-z([
-  n({ attribute: "ratio-width", reflect: !0, type: Number })
-], g.prototype, "ratioWidth", 2);
-z([
-  n({ attribute: "ratio-height", reflect: !0, type: Number })
-], g.prototype, "ratioHeight", 2);
-z([
-  n({ attribute: "percentage-width", reflect: !0, type: Number })
-], g.prototype, "percentageWidth", 2);
-z([
-  n({ attribute: "percentage-height", reflect: !0, type: Number })
-], g.prototype, "percentageHeight", 2);
-z([
-  n({ reflect: !0, type: String })
-], g.prototype, "unit", 2);
-z([
-  n({ attribute: "disabled-apply", reflect: !0, type: Boolean })
-], g.prototype, "disabledApply", 2);
-z([
-  n({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
-], g.prototype, "noRatioModes", 2);
-z([
-  n({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], g.prototype, "lastAppliedSetting", 2);
-z([
-  n({ reflect: !0, type: Boolean })
-], g.prototype, "loading", 2);
-z([
-  n({ attribute: "crop-modes", reflect: !1, type: Array })
-], g.prototype, "cropModes", 2);
-z([
-  n({ attribute: "focus-modes", reflect: !1, type: Object })
-], g.prototype, "focusModes", 2);
-z([
-  n({ attribute: "focus-mode", reflect: !0, type: String })
-], g.prototype, "focusMode", 2);
-z([
-  n({ attribute: "crop-mode", reflect: !0, type: String })
-], g.prototype, "cropMode", 2);
-z([
-  n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], g.prototype, "keepAspectRatio", 2);
-z([
-  b()
-], g.prototype, "invalidWidth", 2);
-z([
-  b()
-], g.prototype, "invalidHeight", 2);
-z([
-  b()
-], g.prototype, "aspectRatio", 2);
-z([
-  $("cropMode", { waitUntilFirstUpdate: !0 }),
-  $("maxWidth", { waitUntilFirstUpdate: !0 }),
-  $("maxHeight", { waitUntilFirstUpdate: !0 }),
-  $("keepAspectRatio")
-], g.prototype, "handleCropModeChange", 1);
-z([
-  $("open", { waitUntilFirstUpdate: !0 })
-], g.prototype, "handleOpenChange", 1);
-g = z([
-  B("cx-asset-link-format-crop")
-], g);
-const me = L`.extension{padding:var(--cx-spacing-small) var(--cx-spacing-medium);border:solid 1px var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-0);& cx-select{flex:1;width:100%}}`;
-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, h; r >= 0; r--)
+v([
+  it(".details")
+], z.prototype, "base", 2);
+v([
+  l({ reflect: !0, type: Boolean })
+], z.prototype, "open", 2);
+v([
+  l({ reflect: !0, type: Number })
+], z.prototype, "width", 2);
+v([
+  l({ reflect: !0, type: Number })
+], z.prototype, "height", 2);
+v([
+  l({ attribute: "max-width", reflect: !0, type: Number })
+], z.prototype, "maxWidth", 2);
+v([
+  l({ attribute: "max-height", reflect: !0, type: Number })
+], z.prototype, "maxHeight", 2);
+v([
+  l({ attribute: "ratio-width", reflect: !0, type: Number })
+], z.prototype, "ratioWidth", 2);
+v([
+  l({ attribute: "ratio-height", reflect: !0, type: Number })
+], z.prototype, "ratioHeight", 2);
+v([
+  l({ attribute: "percentage-width", reflect: !0, type: Number })
+], z.prototype, "percentageWidth", 2);
+v([
+  l({ attribute: "percentage-height", reflect: !0, type: Number })
+], z.prototype, "percentageHeight", 2);
+v([
+  l({ reflect: !0, type: String })
+], z.prototype, "unit", 2);
+v([
+  l({ attribute: "disabled-apply", reflect: !0, type: Boolean })
+], z.prototype, "disabledApply", 2);
+v([
+  l({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
+], z.prototype, "noRatioModes", 2);
+v([
+  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], z.prototype, "lastAppliedSetting", 2);
+v([
+  l({ reflect: !0, type: Boolean })
+], z.prototype, "loading", 2);
+v([
+  l({ attribute: "crop-modes", reflect: !1, type: Array })
+], z.prototype, "cropModes", 2);
+v([
+  l({ attribute: "focus-modes", reflect: !1, type: Object })
+], z.prototype, "focusModes", 2);
+v([
+  l({ attribute: "focus-mode", reflect: !0, type: String })
+], z.prototype, "focusMode", 2);
+v([
+  l({ attribute: "crop-mode", reflect: !0, type: String })
+], z.prototype, "cropMode", 2);
+v([
+  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], z.prototype, "keepAspectRatio", 2);
+v([
+  k()
+], z.prototype, "invalidWidth", 2);
+v([
+  k()
+], z.prototype, "invalidHeight", 2);
+v([
+  k()
+], z.prototype, "aspectRatio", 2);
+v([
+  F("cropMode", { waitUntilFirstUpdate: !0 }),
+  F("maxWidth", { waitUntilFirstUpdate: !0 }),
+  F("maxHeight", { waitUntilFirstUpdate: !0 }),
+  F("keepAspectRatio")
+], z.prototype, "handleCropModeChange", 1);
+v([
+  F("open", { waitUntilFirstUpdate: !0 })
+], z.prototype, "handleOpenChange", 1);
+z = v([
+  V("cx-asset-link-format-crop")
+], z);
+const Ae = B`.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 ve = Object.defineProperty, be = Object.getOwnPropertyDescriptor, Ct = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? be(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;
+  return s && a && ve(e, i, a), a;
 };
-let V = class extends O {
+let X = class extends U {
   constructor() {
-    super(...arguments), this.localize = new U(this), this.value = "", this.items = [];
+    super(...arguments), this.localize = new q(this), this.value = "", this.items = [];
   }
   handleExtensionChange(t) {
     const e = t.target.value;
@@ -876,38 +1110,38 @@ let V = class extends O {
     });
   }
   render() {
-    return S`<cx-space direction="vertical" spacing="small" class="extension"><cx-typography variant="body2">${this.localize.term("extension")}</cx-typography><cx-select data-label=${this.localize.term("extension")} data-testid="cx-asset-link-format-extension-select" value=${this.value} hoist @cx-change=${this.handleExtensionChange}>${tt(
+    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}>${ot(
       this.items,
       (t) => t.value,
-      (t) => S`<cx-option value=${t.value}>${t.displayName}</cx-option>`
+      (t) => A`<cx-option value=${t.value}>${t.displayName}</cx-option>`
     )}</cx-select></cx-space>`;
   }
 };
-V.styles = [q, me];
-V.dependencies = {
-  "cx-option": ht,
-  "cx-select": nt,
-  "cx-space": D,
-  "cx-typography": N
+X.styles = [j, Ae];
+X.dependencies = {
+  "cx-option": ft,
+  "cx-select": gt,
+  "cx-space": O,
+  "cx-typography": L
 };
-gt([
-  n({ reflect: !0, type: String })
-], V.prototype, "value", 2);
-gt([
-  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--)
+Ct([
+  l({ reflect: !0, type: String })
+], X.prototype, "value", 2);
+Ct([
+  l({ reflect: !1, type: Array })
+], X.prototype, "items", 2);
+X = Ct([
+  V("cx-asset-link-format-extension")
+], X);
+const Ce = B`cx-details::part(base){border-bottom-width:0}`;
+var ke = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, D = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Re(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;
+  return s && a && ke(e, i, a), a;
 };
-let P = class extends O {
+let I = class extends U {
   constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
+    super(...arguments), this.localize = new q(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
   }
   handleValueChange() {
     this.scopedValue = this.value;
@@ -951,61 +1185,61 @@ let P = class extends O {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("format")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small" class="format"><cx-select data-label=${this.localize.term("imageFormat")} data-testid="cx-asset-link-format-proxy-select" value=${this.scopedValue} hoist @cx-change=${this.handleProxyChange} ?disabled=${this.loading}>${tt(
+    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}>${ot(
       this.items,
       (t) => t.id,
-      (t) => S`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
-    )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${I({
+      (t) => A`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
+    )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${W({
       "margin-left": "auto"
     })} ?disabled=${this.scopedValue === this.value} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-P.styles = [q, xe];
-P.dependencies = {
-  "cx-button": G,
-  "cx-details": Z,
-  "cx-icon": Y,
-  "cx-option": ht,
-  "cx-select": nt,
-  "cx-space": D,
-  "cx-typography": N
+I.styles = [j, Ce];
+I.dependencies = {
+  "cx-button": K,
+  "cx-details": tt,
+  "cx-icon": et,
+  "cx-option": ft,
+  "cx-select": gt,
+  "cx-space": O,
+  "cx-typography": L
 };
-W([
-  J(".details")
-], 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 Ae = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, Q = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ve(e, i) : e, r = t.length - 1, h; r >= 0; r--)
+D([
+  it(".details")
+], I.prototype, "base", 2);
+D([
+  l({ reflect: !0, type: Boolean })
+], I.prototype, "open", 2);
+D([
+  l({ reflect: !0, type: String })
+], I.prototype, "value", 2);
+D([
+  l({ reflect: !1, type: Array })
+], I.prototype, "items", 2);
+D([
+  l({ reflect: !0, type: Boolean })
+], I.prototype, "loading", 2);
+D([
+  k()
+], I.prototype, "scopedValue", 2);
+D([
+  F("value")
+], I.prototype, "handleValueChange", 1);
+D([
+  F("open", { waitUntilFirstUpdate: !0 })
+], I.prototype, "handleOpenChange", 1);
+I = D([
+  V("cx-asset-link-format-proxy")
+], I);
+const $e = B`cx-details::part(base){border-bottom-width:0}`;
+var Pe = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, Z = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Fe(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 && Ae(e, i, a), a;
+  return s && a && Pe(e, i, a), a;
 };
-let H = class extends O {
+let T = class extends U {
   constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+    super(...arguments), this.localize = new q(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.
@@ -1049,51 +1283,51 @@ let H = class extends O {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="blur_on"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("quality")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-quality-tooltip" content=${this.localize.term("qualityHelpText")} hoist><cx-input data-testid="cx-asset-link-format-quality" class="details__checkbox" mask="num" .maskBlocks=${{ num: { mask: Number, max: 100, min: 1 } }} value=${this.scopedValue.toString()} style=${I({
+    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=${W({
       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>`;
   }
 };
-H.styles = [q, ze];
-H.dependencies = {
-  "cx-button": G,
-  "cx-details": Z,
-  "cx-icon": Y,
-  "cx-input": ft,
-  "cx-space": D,
-  "cx-tooltip": It,
-  "cx-typography": N
+T.styles = [j, $e];
+T.dependencies = {
+  "cx-button": K,
+  "cx-details": tt,
+  "cx-icon": et,
+  "cx-input": bt,
+  "cx-space": O,
+  "cx-tooltip": Nt,
+  "cx-typography": L
 };
-Q([
-  J(".details")
-], 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, Ce = Object.getOwnPropertyDescriptor, k = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ce(e, i) : e, r = t.length - 1, h; r >= 0; r--)
+Z([
+  it(".details")
+], T.prototype, "base", 2);
+Z([
+  l({ reflect: !0, type: Boolean })
+], T.prototype, "open", 2);
+Z([
+  l({ reflect: !0, type: Number })
+], T.prototype, "value", 2);
+Z([
+  l({ reflect: !0, type: Boolean })
+], T.prototype, "loading", 2);
+Z([
+  k()
+], T.prototype, "scopedValue", 2);
+Z([
+  F("value")
+], T.prototype, "handleValueChange", 1);
+T = Z([
+  V("cx-asset-link-format-quality")
+], T);
+const Me = B`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 _e = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, $ = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ie(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;
+  return s && a && _e(e, i, a), a;
 };
-let v = class extends O {
+let b = class extends U {
   constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = o.Pixel, this.lastAppliedSetting = {
+    super(...arguments), this.localize = new q(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.noRatioModes = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
@@ -1230,101 +1464,101 @@ let v = class extends O {
     });
   }
   render() {
-    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="aspect_ratio"></cx-icon></div><cx-typography variant="body2">${this.localize.term("resize")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-space spacing="small"><div class="resize__input-group"><cx-input data-testid="cx-asset-link-format-resize-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
+    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">
                 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({
+              </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=${W({
       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>${M(
+              </cx-typography></cx-input></div>${_(
       !this.noRatioModes,
-      () => S`<cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`
-    )}</cx-space><cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${I({
+      () => 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=${W({
       marginLeft: "auto"
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-v.styles = [q, we];
-v.dependencies = {
-  "cx-button": G,
-  "cx-details": Z,
-  "cx-icon": Y,
-  "cx-icon-button": mt,
-  "cx-input": ft,
-  "cx-option": ht,
-  "cx-select": nt,
-  "cx-space": D,
-  "cx-typography": N
+b.styles = [j, Me];
+b.dependencies = {
+  "cx-button": K,
+  "cx-details": tt,
+  "cx-icon": et,
+  "cx-icon-button": vt,
+  "cx-input": bt,
+  "cx-option": ft,
+  "cx-select": gt,
+  "cx-space": O,
+  "cx-typography": L
 };
-k([
-  J(".details")
-], v.prototype, "base", 2);
-k([
-  n({ reflect: !0, type: Boolean })
-], v.prototype, "open", 2);
-k([
-  n({ reflect: !0, type: Number })
-], v.prototype, "width", 2);
-k([
-  n({ reflect: !0, type: Number })
-], v.prototype, "height", 2);
-k([
-  n({ attribute: "max-width", reflect: !0, type: Number })
-], v.prototype, "maxWidth", 2);
-k([
-  n({ attribute: "max-height", reflect: !0, type: Number })
-], v.prototype, "maxHeight", 2);
-k([
-  n({ attribute: "ratio-width", reflect: !0, type: Number })
-], v.prototype, "ratioWidth", 2);
-k([
-  n({ attribute: "ratio-height", reflect: !0, type: Number })
-], v.prototype, "ratioHeight", 2);
-k([
-  n({ reflect: !0, type: String })
-], v.prototype, "unit", 2);
-k([
-  n({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], v.prototype, "lastAppliedSetting", 2);
-k([
-  n({ reflect: !0, type: Boolean })
-], v.prototype, "loading", 2);
-k([
-  n({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
-], v.prototype, "noRatioModes", 2);
-k([
-  n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], v.prototype, "keepAspectRatio", 2);
-k([
-  b()
-], v.prototype, "invalidWidth", 2);
-k([
-  b()
-], v.prototype, "invalidHeight", 2);
-k([
-  b()
-], v.prototype, "aspectRatio", 2);
-k([
-  $("cropMode", { waitUntilFirstUpdate: !0 }),
-  $("maxWidth", { waitUntilFirstUpdate: !0 }),
-  $("maxHeight", { waitUntilFirstUpdate: !0 }),
-  $("keepAspectRatio")
-], v.prototype, "handleCropModeChange", 1);
-k([
-  $("open", { waitUntilFirstUpdate: !0 })
-], v.prototype, "handleOpenChange", 1);
-v = k([
-  B("cx-asset-link-format-resize")
-], v);
-const ke = L`cx-details::part(base){border-bottom-width:0}`;
-var Re = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, j = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? $e(e, i) : e, r = t.length - 1, h; r >= 0; r--)
+$([
+  it(".details")
+], b.prototype, "base", 2);
+$([
+  l({ reflect: !0, type: Boolean })
+], b.prototype, "open", 2);
+$([
+  l({ reflect: !0, type: Number })
+], b.prototype, "width", 2);
+$([
+  l({ reflect: !0, type: Number })
+], b.prototype, "height", 2);
+$([
+  l({ attribute: "max-width", reflect: !0, type: Number })
+], b.prototype, "maxWidth", 2);
+$([
+  l({ attribute: "max-height", reflect: !0, type: Number })
+], b.prototype, "maxHeight", 2);
+$([
+  l({ attribute: "ratio-width", reflect: !0, type: Number })
+], b.prototype, "ratioWidth", 2);
+$([
+  l({ attribute: "ratio-height", reflect: !0, type: Number })
+], b.prototype, "ratioHeight", 2);
+$([
+  l({ reflect: !0, type: String })
+], b.prototype, "unit", 2);
+$([
+  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], b.prototype, "lastAppliedSetting", 2);
+$([
+  l({ reflect: !0, type: Boolean })
+], b.prototype, "loading", 2);
+$([
+  l({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
+], b.prototype, "noRatioModes", 2);
+$([
+  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], b.prototype, "keepAspectRatio", 2);
+$([
+  k()
+], b.prototype, "invalidWidth", 2);
+$([
+  k()
+], b.prototype, "invalidHeight", 2);
+$([
+  k()
+], b.prototype, "aspectRatio", 2);
+$([
+  F("cropMode", { waitUntilFirstUpdate: !0 }),
+  F("maxWidth", { waitUntilFirstUpdate: !0 }),
+  F("maxHeight", { waitUntilFirstUpdate: !0 }),
+  F("keepAspectRatio")
+], b.prototype, "handleCropModeChange", 1);
+$([
+  F("open", { waitUntilFirstUpdate: !0 })
+], b.prototype, "handleOpenChange", 1);
+b = $([
+  V("cx-asset-link-format-resize")
+], b);
+const Ee = B`cx-details::part(base){border-bottom-width:0}`;
+var He = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, G = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Te(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;
+  return s && a && He(e, i, a), a;
 };
-let F = class extends O {
+let H = class extends U {
   constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
+    super(...arguments), this.localize = new q(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", {
@@ -1335,14 +1569,14 @@ let F = class extends O {
     const e = t.target.value, i = Number(e);
     if (Number.isNaN(i))
       return;
-    const s = vt(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: vt(t)
+      detail: $t(t)
     });
   }
   handleClockwiseClick() {
@@ -1362,55 +1596,55 @@ let F = class extends O {
     });
   }
   render() {
-    return S`<cx-details class="details" ?open=${this.open}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="rotate_90_degrees_cw"></cx-icon></div><cx-typography variant="body2">Rotate</cx-typography></cx-space><cx-space spacing="small"><cx-button-group label=${this.localize.term("history")}><cx-icon-button data-testid="cx-asset-link-format-rotation-ccw" name="rotate_90_degrees_ccw" label=${this.localize.term("undo")} outline size="small" ?disabled=${this.loading || this.value === -360} @click=${this.handleCounterClockwiseClick}></cx-icon-button><cx-icon-button data-testid="cx-asset-link-format-rotation-cw" name="rotate_90_degrees_cw" label=${this.localize.term("redo")} outline size="small" ?disabled=${this.loading || this.value === 360} @click=${this.handleClockwiseClick}></cx-icon-button></cx-button-group><cx-input data-testid="cx-asset-link-format-rotation" value=${(this.value + this.defaultValue).toString()} placeholder="0" mask="num" .maskBlocks=${{ num: { mask: Number, max: 360, min: -360, signed: !0 } }} ?disabled=${this.loading} style=${I({
+    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=${W({
       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>`;
   }
 };
-F.styles = [q, ke];
-F.dependencies = {
-  "cx-button": G,
-  "cx-button-group": Qt,
-  "cx-details": Z,
-  "cx-icon": Y,
-  "cx-icon-button": mt,
-  "cx-space": D,
-  "cx-typography": N
+H.styles = [j, Ee];
+H.dependencies = {
+  "cx-button": K,
+  "cx-button-group": Jt,
+  "cx-details": tt,
+  "cx-icon": et,
+  "cx-icon-button": vt,
+  "cx-space": O,
+  "cx-typography": L
 };
-j([
-  J(".details")
-], F.prototype, "base", 2);
-j([
-  n({ reflect: !0, type: Boolean })
-], F.prototype, "open", 2);
-j([
-  n({ reflect: !0, type: Number })
-], F.prototype, "value", 2);
-j([
-  n({ attribute: "default-value", reflect: !0, type: Number })
-], F.prototype, "defaultValue", 2);
-j([
-  n({ reflect: !0, type: Boolean })
-], F.prototype, "loading", 2);
-j([
-  n({ attribute: "last-applied-value", reflect: !0, type: Number })
-], F.prototype, "lastAppliedValue", 2);
-j([
-  $("open", { waitUntilFirstUpdate: !0 })
-], F.prototype, "handleOpenChange", 1);
-F = j([
-  B("cx-asset-link-format-rotation")
-], F);
-const _e = L`cx-details::part(base){border-bottom-width:0}`;
-var Me = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, lt = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Pe(e, i) : e, r = t.length - 1, h; r >= 0; r--)
+G([
+  it(".details")
+], H.prototype, "base", 2);
+G([
+  l({ reflect: !0, type: Boolean })
+], H.prototype, "open", 2);
+G([
+  l({ reflect: !0, type: Number })
+], H.prototype, "value", 2);
+G([
+  l({ attribute: "default-value", reflect: !0, type: Number })
+], H.prototype, "defaultValue", 2);
+G([
+  l({ reflect: !0, type: Boolean })
+], H.prototype, "loading", 2);
+G([
+  l({ attribute: "last-applied-value", reflect: !0, type: Number })
+], H.prototype, "lastAppliedValue", 2);
+G([
+  F("open", { waitUntilFirstUpdate: !0 })
+], H.prototype, "handleOpenChange", 1);
+H = G([
+  V("cx-asset-link-format-rotation")
+], H);
+const We = B`cx-details::part(base){border-bottom-width:0}`;
+var De = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, xt = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ne(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 && Me(e, i, a), a;
+  return s && a && De(e, i, a), a;
 };
-let T = class extends O {
+let N = class extends U {
   constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.value = !1;
+    super(...arguments), this.localize = new q(this), this.open = !1, this.value = !1;
   }
   handleApply(t) {
     this.emit("cx-asset-link-format-metadata-change", {
@@ -1434,39 +1668,39 @@ let T = class extends O {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return S`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="short_text"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("metadata")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-metadata-tooltip" content=${this.localize.term("metadataHelpText")} hoist><cx-checkbox data-testid="cx-asset-link-format-metadata" class="details__checkbox" ?checked=${this.value} @cx-change=${this.handleApply}>${this.localize.term("preserveMetadata")}</cx-checkbox></cx-tooltip></cx-space></cx-details>`;
+    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>`;
   }
 };
-T.styles = [q, _e];
-T.dependencies = {
-  "cx-button": G,
-  "cx-checkbox": Kt,
-  "cx-details": Z,
-  "cx-icon": Y,
-  "cx-space": D,
-  "cx-tooltip": It,
-  "cx-typography": N
+N.styles = [j, We];
+N.dependencies = {
+  "cx-button": K,
+  "cx-checkbox": te,
+  "cx-details": tt,
+  "cx-icon": et,
+  "cx-space": O,
+  "cx-tooltip": Nt,
+  "cx-typography": L
 };
-lt([
-  J(".details")
-], T.prototype, "base", 2);
-lt([
-  n({ reflect: !0, type: Boolean })
-], T.prototype, "open", 2);
-lt([
-  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--)
+xt([
+  it(".details")
+], N.prototype, "base", 2);
+xt([
+  l({ reflect: !0, type: Boolean })
+], N.prototype, "open", 2);
+xt([
+  l({ reflect: !0, type: Boolean })
+], N.prototype, "value", 2);
+N = xt([
+  V("cx-asset-link-format-metadata")
+], N);
+var Oe = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, y = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Le(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;
+  return s && a && Oe(e, i, a), a;
 };
-let d = class extends O {
+let g = class extends U {
   constructor() {
-    super(), this.localize = new U(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
+    super(), this.localize = new q(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
       {
         label: "Free",
         value: "free"
@@ -1561,7 +1795,16 @@ let d = class extends O {
     }, 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 = re, this.apiGetCropFocusMode = le, 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 = pe, this.apiGetCropFocusMode = ge, 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
+   * response directly), so extensions like PSD/TIFF/AI that the source asset may carry are not
+   * valid targets for the transformed link — fall back to JPG for those, same as the source
+   * extension fallback in asset-transformation-dialog.
+   */
+  static getTransformExtension(t) {
+    return !t || At(t) ? t : "jpg";
   }
   /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
   get hasUnfrozenTransformations() {
@@ -1574,7 +1817,7 @@ let d = class extends O {
    */
   get lastAppliedCropUnit() {
     return this.transformations.findLast(
-      (e) => e.key === p.Crop
+      (e) => e.key === u.Crop
     )?.value.unit ?? o.Pixel;
   }
   /**
@@ -1584,7 +1827,7 @@ let d = class extends O {
    */
   get lastAppliedCropFocusMode() {
     return this.transformations.findLast(
-      (e) => e.key === p.Crop
+      (e) => e.key === u.Crop
     )?.value.focusMode ?? "manual";
   }
   /**
@@ -1636,7 +1879,7 @@ let d = class extends O {
   get lastCropSize() {
     if (!this.asset) {
       const e = this.transformations.findLast(
-        (i) => i.key === p.Crop
+        (i) => i.key === u.Crop
       );
       if (e?.value.unit === o.AspectRatio && e.value.ratioWidth && e.value.ratioHeight)
         return {
@@ -1666,7 +1909,7 @@ let d = class extends O {
           }
         };
       if (e?.value.width && e?.value.height) {
-        const { height: i, width: s, x: a = 0, y: r = 0 } = e.value, h = et(s, i);
+        const { height: i, width: s, x: a = 0, y: r = 0 } = e.value, h = rt(s, i);
         return {
           [o.AspectRatio]: {
             height: h.height,
@@ -1689,7 +1932,7 @@ let d = class extends O {
         };
       }
     }
-    const t = this.lastImageSize.width && this.lastImageSize.height ? et(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
+    const t = this.lastImageSize.width && this.lastImageSize.height ? rt(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
     return {
       [o.AspectRatio]: {
         height: t.height,
@@ -1719,7 +1962,7 @@ let d = class extends O {
   get lastResizeSize() {
     if (!this.asset) {
       const e = this.transformations.findLast(
-        (i) => i.key === p.Resize
+        (i) => i.key === u.Resize
       );
       if (e?.value.unit === o.AspectRatio && e.value.ratioWidth && e.value.ratioHeight)
         return {
@@ -1736,7 +1979,7 @@ let d = class extends O {
           }
         };
       if (e?.value.width && e?.value.height) {
-        const { height: i, width: s } = e.value, a = et(s, i);
+        const { height: i, width: s } = e.value, a = rt(s, i);
         return {
           [o.AspectRatio]: {
             height: a.height,
@@ -1751,7 +1994,7 @@ let d = class extends O {
         };
       }
     }
-    const t = this.lastImageSize.width && this.lastImageSize.height ? et(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
+    const t = this.lastImageSize.width && this.lastImageSize.height ? rt(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
     return {
       [o.AspectRatio]: {
         height: t.height,
@@ -1775,14 +2018,14 @@ let d = class extends O {
    */
   get lastRotation() {
     return this.asset ? 0 : this.transformations.findLast(
-      (e) => e.key === p.Rotate
+      (e) => e.key === u.Rotate
     )?.value.rotation ?? 0;
   }
   /**
    * Returns the transformation string for the asset link.
    */
   get transformationString() {
-    return it({
+    return Y({
       asset: this.asset,
       baseUrl: "",
       parameters: this.parameters,
@@ -1817,13 +2060,13 @@ let d = class extends O {
       );
       this.loading = !0, this.apiGetTransformAssetLink({
         assetId: this.asset.id,
-        extension: this.asset.extension,
+        extension: g.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 === p.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === u.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
           height: s.height,
           width: s.width
         }, this.selectedFormat = {
@@ -1837,7 +2080,7 @@ let d = class extends O {
            */
         });
       });
-      const i = it({
+      const i = Y({
         asset: this.asset,
         baseUrl: "",
         extension: this.selectedFormat.extension,
@@ -1870,7 +2113,7 @@ let d = class extends O {
   async handleTransformationsChange() {
     if (await this.updateComplete, !this.asset) {
       this.emit("cx-asset-link-format-change", {
-        detail: it({
+        detail: Y({
           asset: this.asset,
           baseUrl: "",
           options: {
@@ -1882,33 +2125,33 @@ let d = class extends O {
         }).replace(/\/t\//g, "")
       });
       const r = this.transformations.findLast(
-        (c) => c.key === p.Crop && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width && c.value.height)
+        (c) => c.key === u.Crop && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width && c.value.height)
       );
       if (r?.value.unit === o.AspectRatio && r.value.ratioWidth && r.value.ratioHeight) {
-        const { focusMode: c, ratioHeight: y, ratioWidth: C } = r.value;
+        const { focusMode: c, ratioHeight: f, ratioWidth: S } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: c ?? "manual",
           percentageHeight: 100,
           percentageWidth: 100,
-          ratioHeight: y,
-          ratioWidth: C,
+          ratioHeight: f,
+          ratioWidth: S,
           unit: o.AspectRatio
         };
       } else if (r) {
-        const { focusMode: c, height: y, unit: C, width: f, x: R = 0, y: E = 0 } = r.value;
+        const { focusMode: c, height: f, unit: S, width: p, x: w = 0, y: R = 0 } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: c ?? "manual",
-          height: y,
+          height: f,
           percentageHeight: 100,
           percentageWidth: 100,
-          unit: C ?? o.Pixel,
-          width: f,
-          x: R,
-          y: E
+          unit: S ?? o.Pixel,
+          width: p,
+          x: w,
+          y: R
         };
       } else
         this.cropSize = {
@@ -1930,23 +2173,23 @@ let d = class extends O {
           y: 0
         };
       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)
+        (c) => c.key === u.Resize && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width || c.value.height)
       );
       if (h?.value.unit === o.AspectRatio && h.value.ratioWidth && h.value.ratioHeight) {
-        const { ratioHeight: c, ratioWidth: y } = h.value;
+        const { ratioHeight: c, ratioWidth: f } = h.value;
         this.resizeSize = {
           ...this.resizeSize,
           ratioHeight: c,
-          ratioWidth: y,
+          ratioWidth: f,
           unit: o.AspectRatio
         };
       } else if (h) {
-        const { height: c = 0, unit: y, width: C = 0 } = h.value;
+        const { height: c = 0, unit: f, width: S = 0 } = h.value;
         this.resizeSize = {
           ...this.resizeSize,
           height: c,
-          unit: y ?? o.Pixel,
-          width: C
+          unit: f ?? o.Pixel,
+          width: S
         };
       } else
         this.resizeSize = {
@@ -1960,19 +2203,19 @@ let d = class extends O {
           unit: o.Pixel,
           width: 1
         };
-      const l = this.transformations.findLast(
-        (c) => c.key === p.Rotate
+      const n = this.transformations.findLast(
+        (c) => c.key === u.Rotate
       );
-      this.rotation = l?.value.rotation ?? 0;
-      const m = this.transformations.findLast((c) => c.key === p.Quality)?.value.quality ?? 100, x = this.transformations.some(
-        (c) => c.key === p.Metadata
+      this.rotation = n?.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
       );
-      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: x, quality: m } : this.selectedFormat = {
+      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: m, quality: d } : this.selectedFormat = {
         extension: "",
         height: 0,
-        keepMetadata: x,
+        keepMetadata: m,
         originalUrl: "",
-        quality: m,
+        quality: d,
         rotation: 0,
         url: "",
         width: 0,
@@ -1989,7 +2232,7 @@ let d = class extends O {
     this.loading = !0;
     const e = await this.apiGetTransformAssetLink({
       assetId: this.asset.id,
-      extension: this.selectedFormat.extension,
+      extension: g.getTransformExtension(this.selectedFormat.extension),
       format: t?.proxyName ?? "",
       siteUrl: this.baseUrl,
       token: this.token,
@@ -2020,11 +2263,11 @@ let d = class extends O {
       width: e.width,
       x: 0,
       y: 0
-    }, this.lastAction === p.Rotate && (this.rotation = 0), this.lastAction = void 0;
+    }, this.lastAction === u.Rotate && (this.rotation = 0), this.lastAction = void 0;
     const i = this.transformations.some(
-      (r) => r.key === p.Metadata
+      (r) => r.key === u.Metadata
     ), s = this.transformations.findLast(
-      (r) => r.key === p.Quality
+      (r) => r.key === u.Quality
     );
     this.selectedFormat = {
       ...this.selectedFormat,
@@ -2038,7 +2281,7 @@ let d = class extends O {
        * url: `${this.baseUrl}/${response.relativePath}`,
        */
     };
-    const a = it({
+    const a = Y({
       asset: this.asset,
       baseUrl: "",
       extension: this.selectedFormat.extension,
@@ -2070,7 +2313,7 @@ let d = class extends O {
       width: Number.parseInt(this.asset.width, 10)
     });
     const t = this.transformations.findLast(
-      (e) => e.key === p.Quality
+      (e) => e.key === u.Quality
     );
     this.selectedFormat = {
       extension: this.asset.extension,
@@ -2116,20 +2359,20 @@ let d = class extends O {
     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 === 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;
+      if (s.key === u.Crop) {
+        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, h = a.height / i.formatHeight * e.formatHeight, n = a.x / i.formatWidth * e.formatWidth, d = a.y / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
             ...s.value,
             height: h,
             width: r,
-            x: l,
-            y: m
+            x: n,
+            y: d
           }
         };
       }
-      if (s.key === p.Resize) {
+      if (s.key === u.Resize) {
         const a = s.value, r = a.width / i.formatWidth * e.formatWidth, h = a.height / i.formatHeight * e.formatHeight;
         return {
           ...s,
@@ -2202,31 +2445,31 @@ let d = class extends O {
     percentageHeight: a,
     percentageWidth: r,
     ratioHeight: h,
-    ratioWidth: l,
-    unit: m,
-    useCropMode: x,
+    ratioWidth: n,
+    unit: d,
+    useCropMode: m,
     width: c
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
-    this.loading = !0, this.lastAction = p.Crop;
-    const y = await this.apiGetCropFocusMode({
+    this.loading = !0, this.lastAction = u.Crop;
+    const f = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
       cropWidth: c,
       imageUrl: this.selectedFormat.url
     });
-    if (y) {
-      let C = a, f = r;
-      i || (C = y.height * 100 / this.selectedFormat.height), c || (f = y.width * 100 / this.selectedFormat.width), this.cropSize = {
+    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 = {
         ...this.cropSize,
-        height: y.height,
-        percentageHeight: C ?? 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 ? {
+        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 ? {
           cropMode: e,
           focusMode: "manual",
           keepAspectRatio: !1
@@ -2236,8 +2479,8 @@ let d = class extends O {
         },
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
         ratioHeight: h ?? this.cropSize.ratioHeight,
-        ratioWidth: l ?? this.cropSize.ratioWidth,
-        unit: m ?? this.cropSize.unit
+        ratioWidth: n ?? this.cropSize.ratioWidth,
+        unit: d ?? this.cropSize.unit
       };
     }
     this.loading = !1, this.lastAction = void 0;
@@ -2251,26 +2494,26 @@ let d = class extends O {
     } = e;
     if (s === 0 || i === 0)
       return;
-    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(
+    const h = this.cropSize.percentageWidth !== s, n = this.cropSize.percentageHeight !== i;
+    let d = this.cropSize.height, m = this.cropSize.width;
+    h && (m = Math.round(s * this.selectedFormat.width / 100)), n && (d = Math.round(
       i * this.selectedFormat.height / 100
     ));
     const c = this.cropSize.focusMode;
     this.focusModes.find(
-      (C) => C.value === c
+      (S) => S.value === c
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
       focusMode: c,
-      height: m,
+      height: d,
       percentageHeight: i,
       percentageWidth: s,
-      width: x
+      width: m
     }) : this.cropSize = {
       ...this.cropSize,
-      height: m,
+      height: d,
       percentageHeight: i,
       percentageWidth: s,
-      width: x,
+      width: m,
       x: a,
       y: r
     };
@@ -2295,7 +2538,7 @@ let d = class extends O {
   }
   onProxyChange(t) {
     const e = t.detail;
-    this.lastAction = p.Proxy, this.selectedProxy = e.id;
+    this.lastAction = u.Proxy, this.selectedProxy = e.id;
   }
   async onCropModeChange(t) {
     const { mode: e } = t.detail;
@@ -2306,10 +2549,10 @@ let d = class extends O {
       });
     else {
       const s = this.focusModes.find(
-        (m) => m.value === this.cropSize.focusMode
+        (d) => d.value === this.cropSize.focusMode
       )?.auto;
-      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({
+      let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, h = this.cropSize.x, n = this.cropSize.y;
+      e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (h = 0, n = 0), s ? await this.handleRequestAutoCropSuggestion({
         cropMode: e,
         focusMode: r,
         height: this.cropSize.height,
@@ -2321,7 +2564,7 @@ let d = class extends O {
         focusMode: r,
         keepAspectRatio: a,
         x: h,
-        y: l
+        y: n
       };
     }
   }
@@ -2346,14 +2589,14 @@ let d = class extends O {
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
       ) : 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;
+      let n = this.cropSize.x, d = this.cropSize.y;
+      n + h > 100 && (n = 100 - h), d + r > 100 && (d = 100 - r);
+      let m = this.cropSize.cropMode;
       this.cropModes.find(
-        (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 = {
+        (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 = 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: x,
+        cropMode: m,
         height: a,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: r,
@@ -2362,18 +2605,18 @@ let d = class extends O {
         ratioWidth: t.detail.width,
         unit: o.AspectRatio,
         width: s,
-        x: l,
-        y: m
+        x: n,
+        y: d
       };
     } else {
       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 h = this.cropSize.cropMode;
-      const l = this.cropModes.find(
-        (m) => m.value === h
+      const n = this.cropModes.find(
+        (d) => d.value === h
       )?.auto;
-      (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 = {
+      (t.detail.breakAspectRatio || n) && (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: h,
         height: t.detail.height,
@@ -2401,42 +2644,42 @@ let d = class extends O {
     });
   }
   onCropApply(t) {
-    if (this.preResetTransformations = void 0, this.lastAction = p.Crop, !this.asset) {
+    if (this.preResetTransformations = void 0, this.lastAction = u.Crop, !this.asset) {
       const {
-        focusMode: l,
-        height: m,
-        ratioHeight: x,
+        focusMode: n,
+        height: d,
+        ratioHeight: m,
         ratioWidth: c,
-        unit: y,
-        width: C,
-        x: f,
-        y: R
-      } = this.cropSize, E = this.focusModes.find(
-        (A) => A.value === l
+        unit: f,
+        width: S,
+        x: p,
+        y: w
+      } = this.cropSize, R = this.focusModes.find(
+        (x) => x.value === n
       )?.auto ?? !1;
-      if (y === o.AspectRatio) {
-        c && x && this.upsertTransformation({
-          key: p.Crop,
+      if (f === o.AspectRatio) {
+        c && m && this.upsertTransformation({
+          key: u.Crop,
           value: {
-            focusMode: l,
-            isFocusModeAuto: E,
-            ratioHeight: x,
+            focusMode: n,
+            isFocusModeAuto: R,
+            ratioHeight: m,
             ratioWidth: c,
-            unit: y
+            unit: f
           }
         });
         return;
       }
-      (m || C) && this.upsertTransformation({
-        key: p.Crop,
+      (d || S) && this.upsertTransformation({
+        key: u.Crop,
         value: {
-          focusMode: l,
-          height: m,
-          isFocusModeAuto: E,
-          unit: y,
-          width: C,
-          x: Number.isFinite(f) ? f : void 0,
-          y: Number.isFinite(R) ? R : void 0
+          focusMode: n,
+          height: d,
+          isFocusModeAuto: R,
+          unit: f,
+          width: S,
+          x: Number.isFinite(p) ? p : void 0,
+          y: Number.isFinite(w) ? w : void 0
         }
       });
       return;
@@ -2445,37 +2688,37 @@ let d = class extends O {
     if (!this.cropperElement || !this.selectedFormat)
       return;
     const r = this.cropSize.focusMode, h = this.focusModes.find(
-      (l) => l.value === r
+      (n) => n.value === r
     )?.auto ?? !1;
     if (e && a && s) {
-      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)
+      let n = a, d = e;
+      if (s === o.AspectRatio && (n = this.cropSize.percentageWidth * this.selectedFormat.width / 100, d = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
         this.transformations = [
           ...this.transformations,
           {
-            key: p.Crop,
+            key: u.Crop,
             value: {
               focusMode: r,
-              height: m,
+              height: d,
               isFocusModeAuto: h,
               mode: i,
-              width: l
+              width: n
             }
           }
         ];
       else {
-        const x = this.cropSize.x / 100 * this.selectedFormat.width, c = this.cropSize.y / 100 * this.selectedFormat.height;
+        const m = this.cropSize.x / 100 * this.selectedFormat.width, c = this.cropSize.y / 100 * this.selectedFormat.height;
         this.transformations = [
           ...this.transformations,
           {
-            key: p.Crop,
+            key: u.Crop,
             value: {
               focusMode: r,
-              height: m,
+              height: d,
               isFocusModeAuto: h,
               unit: s,
-              width: l,
-              x,
+              width: n,
+              x: m,
               y: c
             }
           }
@@ -2484,7 +2727,7 @@ let d = class extends O {
     } else i && (this.transformations = [
       ...this.transformations,
       {
-        key: p.Crop,
+        key: u.Crop,
         value: {
           focusMode: r,
           isFocusModeAuto: h,
@@ -2519,21 +2762,21 @@ let d = class extends O {
   }
   onResizeApply(t) {
     const { height: e, unit: i, width: s } = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = p.Resize, !this.asset) {
+    if (this.preResetTransformations = void 0, this.lastAction = u.Resize, !this.asset) {
       if (i === o.AspectRatio) {
-        const { ratioHeight: m, ratioWidth: x } = this.resizeSize;
-        x && m && this.upsertTransformation({
-          key: p.Resize,
+        const { ratioHeight: d, ratioWidth: m } = this.resizeSize;
+        m && d && this.upsertTransformation({
+          key: u.Resize,
           value: {
-            ratioHeight: m,
-            ratioWidth: x,
+            ratioHeight: d,
+            ratioWidth: m,
             unit: i
           }
         });
         return;
       }
       (e || s) && this.upsertTransformation({
-        key: p.Resize,
+        key: u.Resize,
         value: {
           height: e,
           unit: i,
@@ -2545,13 +2788,13 @@ let d = class extends O {
     if (!this.selectedFormat)
       return;
     const a = this.selectedFormat.width || this.defaultSize.width, r = this.selectedFormat.height || this.defaultSize.height;
-    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 = [
+    let h = s, n = e;
+    this.resizeSize.unit !== i ? (h = a, n = r) : i === o.AspectRatio && (h = Math.round(s / e * r), n = r), this.transformations = [
       ...this.transformations,
       {
-        key: p.Resize,
+        key: u.Resize,
         value: {
-          height: l,
+          height: n,
           unit: i,
           width: h
         }
@@ -2563,21 +2806,21 @@ let d = class extends O {
   }
   onRotationApply(t) {
     const e = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = p.Rotate, !this.asset) {
+    if (this.preResetTransformations = void 0, this.lastAction = u.Rotate, !this.asset) {
       e ? this.upsertTransformation({
-        key: p.Rotate,
+        key: u.Rotate,
         value: {
           rotation: e
         }
       }) : this.transformations = this.transformations.filter(
-        (i) => i.key !== p.Rotate
+        (i) => i.key !== u.Rotate
       );
       return;
     }
     this.selectedFormat && (this.transformations = [
       ...this.transformations,
       {
-        key: p.Rotate,
+        key: u.Rotate,
         value: {
           rotation: e
         }
@@ -2586,9 +2829,9 @@ let d = class extends O {
   }
   onQualityChange(t) {
     const e = t.detail;
-    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = p.Quality;
+    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = u.Quality;
     const i = {
-      key: p.Quality,
+      key: u.Quality,
       value: {
         quality: e
       }
@@ -2602,22 +2845,22 @@ let d = class extends O {
       keepMetadata: e
     }), !this.asset) {
       e ? this.upsertTransformation({
-        key: p.Metadata,
+        key: u.Metadata,
         value: {
           keepMetadata: e
         }
       }) : this.transformations = this.transformations.filter(
-        (i) => i.key !== p.Metadata
+        (i) => i.key !== u.Metadata
       );
       return;
     }
     e ? this.upsertTransformation({
-      key: p.Metadata,
+      key: u.Metadata,
       value: {
         keepMetadata: e
       }
     }) : this.transformations = this.transformations.filter(
-      (i) => i.key !== p.Metadata
+      (i) => i.key !== u.Metadata
     );
   }
   onExtensionChange(t) {
@@ -2629,7 +2872,7 @@ let d = class extends O {
   }
   syncQuality() {
     const t = this.transformations.findLast(
-      (e) => e.key === p.Quality
+      (e) => e.key === u.Quality
     )?.value?.quality;
     this.selectedFormat && (this.selectedFormat = {
       ...this.selectedFormat,
@@ -2645,183 +2888,184 @@ let d = class extends O {
     this.selectedProxy = t ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "", this.transformations = [], this.frozenIndex = -1, this.syncQuality();
   }
   render() {
-    return S`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${M(
+    return A`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${_(
       !this.hideHeader,
-      () => S`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${M(this.canReset, () => S`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${this.transformations.length === 0} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
-      () => qt
+      () => 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>`,
+      () => Gt
     )}
-      ${M(
+      ${_(
       !this.noFormat,
-      () => S`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} .items=${this.formats} ?loading=${this.loading && this.lastAction === p.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
+      () => 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>`
     )}
-      ${M(
+      ${_(
       !this.noCrop,
-      () => S`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === p.Crop} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
+      () => 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} ?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>`
     )}
-      ${M(
+      ${_(
       !this.noResize,
-      () => S`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === p.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
+      () => 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>`
     )}
-      ${M(
+      ${_(
       !this.noRotate,
-      () => S`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === p.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`
-    )}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === p.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${M(
+      () => 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>${_(
       !this.noMetadata,
-      () => S`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`
+      () => 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,
-      () => S`<cx-asset-link-format-extension .items=${this.extensions} value=${this.selectedFormat?.extension ?? ""} @cx-asset-link-format-extension-change=${this.onExtensionChange}></cx-asset-link-format-extension>`
+      () => 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>`;
   }
 };
-d.styles = [q, ce];
-d.dependencies = {
-  "cx-asset-link-format-crop": g,
-  "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": v,
-  "cx-asset-link-format-rotation": F,
-  "cx-button": G,
-  "cx-space": D,
-  "cx-typography": N
+g.styles = [j, ye];
+g.dependencies = {
+  "cx-asset-link-format-crop": z,
+  "cx-asset-link-format-extension": X,
+  "cx-asset-link-format-metadata": N,
+  "cx-asset-link-format-proxy": I,
+  "cx-asset-link-format-quality": T,
+  "cx-asset-link-format-resize": b,
+  "cx-asset-link-format-rotation": H,
+  "cx-button": K,
+  "cx-space": O,
+  "cx-typography": L
 };
-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);
+y([
+  l({ attribute: "base-url", type: String })
+], g.prototype, "baseUrl", 2);
+y([
+  l({ attribute: "token", type: String })
+], g.prototype, "token", 2);
+y([
+  l({ reflect: !1, type: Object })
+], g.prototype, "asset", 2);
+y([
+  l({ attribute: "crop-modes", reflect: !1, type: Array })
+], g.prototype, "cropModes", 2);
+y([
+  l({ attribute: "focus-modes", reflect: !1, type: Object })
+], g.prototype, "focusModes", 2);
+y([
+  l({ reflect: !1, type: Array })
+], g.prototype, "extensions", 2);
+y([
+  l({ reflect: !1, type: Array })
+], g.prototype, "proxies", 2);
+y([
+  l({ attribute: "for-cropper", reflect: !0, type: String })
+], g.prototype, "forCropper", 2);
+y([
+  l({ attribute: "use-session", reflect: !0, type: String })
+], g.prototype, "useSession", 2);
+y([
+  l({ reflect: !1, type: Array })
+], g.prototype, "transformations", 2);
+y([
+  l({ attribute: "selected-proxy", reflect: !0, type: String })
+], g.prototype, "selectedProxy", 2);
+y([
+  l({ attribute: "default-proxy", reflect: !0, type: String })
+], g.prototype, "defaultProxy", 2);
+y([
+  l({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
+], g.prototype, "useCustomExtension", 2);
+y([
+  l({ attribute: "no-metadata", reflect: !0, type: Boolean })
+], g.prototype, "noMetadata", 2);
+y([
+  l({ attribute: "no-format", reflect: !0, type: Boolean })
+], g.prototype, "noFormat", 2);
+y([
+  l({ attribute: "no-crop", reflect: !0, type: Boolean })
+], g.prototype, "noCrop", 2);
+y([
+  l({ attribute: "no-resize", reflect: !0, type: Boolean })
+], g.prototype, "noResize", 2);
+y([
+  l({ attribute: "no-rotate", reflect: !0, type: Boolean })
+], g.prototype, "noRotate", 2);
+y([
+  l({ attribute: "last-image-size", reflect: !1, type: Object })
+], g.prototype, "lastImageSize", 2);
+y([
+  l({ attribute: "hide-header", reflect: !1, type: Boolean })
+], g.prototype, "hideHeader", 2);
+y([
+  l({ attribute: "can-reset", type: Boolean })
+], g.prototype, "canReset", 2);
+y([
+  l({ attribute: !1, reflect: !1, type: Object })
+], g.prototype, "queryElement", 2);
+y([
+  k()
+], g.prototype, "activeSetting", 2);
+y([
+  k()
+], g.prototype, "selectedFormat", 2);
+y([
+  k()
+], g.prototype, "resizeSize", 2);
+y([
+  k()
+], g.prototype, "cropSize", 2);
+y([
+  k()
+], g.prototype, "rotation", 2);
+y([
+  k()
+], g.prototype, "defaultSize", 2);
+y([
+  k()
+], g.prototype, "cropperElement", 2);
+y([
+  k()
+], g.prototype, "parameters", 2);
+y([
+  k()
+], g.prototype, "loading", 2);
+y([
+  k()
+], g.prototype, "lastAction", 2);
+y([
+  k()
+], g.prototype, "frozenIndex", 2);
+y([
+  k()
+], g.prototype, "preResetTransformations", 2);
+y([
+  F("transformations")
+], g.prototype, "handleTransformationsChange", 1);
+y([
+  F("selectedProxy")
+], g.prototype, "handleSelectedProxyChange", 1);
+y([
+  F("loading")
+], g.prototype, "handleLoadingChange", 1);
+g = y([
+  V("cx-asset-link-format")
+], g);
 export {
-  d as C,
-  ut as D,
-  _t as F,
-  X as O,
-  yi as a,
-  Mt as b,
-  bt as c,
-  xi as d,
-  Ct as e,
-  ie as f,
-  Wt as g,
-  zi as h,
-  Ai as i,
-  Si as j,
-  Dt as k,
-  at as l,
-  kt as m,
-  Rt as n,
-  Pt as o,
-  Zt as p,
-  Xt as u
+  g as C,
+  wt as D,
+  lt as F,
+  J as O,
+  me as a,
+  he as b,
+  Ot as c,
+  Ri as d,
+  $i as e,
+  ki as f,
+  Ut as g,
+  dt as h,
+  At as i,
+  nt as j,
+  Ft as k,
+  Mt as l,
+  ct as m,
+  pt as n,
+  It as o,
+  Pi as p,
+  ie as q,
+  ee as u
 };