@orangelogic/design-system 2.139.0 → 2.141.0

package/library/chunks/{asset-link-format.oOC8fxvV.js → asset-link-format.BDuHqEN5.js}

@@ -1,40 +1,40 @@
 import "../components/cropper.js";
-import { C as G } from "./button.J4LDuhyW.js";
+import { C as j } from "./button.C6-GrLyD.js";
 import D from "../components/space.js";
 import { C as T } from "./typography.DJC_UXgs.js";
 import { n as h, C as N } from "./lib-cortex-element.CVMmyPMC.js";
-import { h as P, a as Et, C as It, S as Nt, b as Lt, c as Ot } from "./endpoints.BlywT4Gl.js";
-import { M as At, U as o, T as c } from "./asset-link-format.QzzboHHE.js";
+import { h as P, a as Et, C as Ht, S as Nt, b as Lt, c as Ot } from "./endpoints.BlywT4Gl.js";
+import { M as bt, U as o, T as c } from "./asset-link-format.QzzboHHE.js";
 import "./browser.BHOCIF_A.js";
-import { i as L, x, E as Ut } from "./lit-element.jLBm65_O.js";
-import "./form.K1XOtu3S.js";
+import { i as L, x as b, E as Ut } from "./lit-element.jLBm65_O.js";
+import "./form.BSqXLytJ.js";
 import { L as O } from "./i18n.DeUAP8n2.js";
-import { a as qt } from "./string.CjJ09HK3.js";
+import { a as qt } from "./string.BmBJ_BLT.js";
 import "./date-picker.DTUICGb9.js";
 import "./content-builder.BGzxZUgi.js";
 import "./unsafe-html.Dff7-rCx.js";
 import { b as Bt } from "./_baseUniq.HFKneygy.js";
 import { c as U } from "./component.styles.CRO4Odto.js";
 import { c as q } from "./custom-element.L4WJXn1j.js";
-import { w as C } from "./watch.CThbualB.js";
-import { s as bt, c as zt } from "./number.B4PQLJIg.js";
-import { b as et } from "./transformation.c-RS37zA.js";
+import { w as R } from "./watch.CThbualB.js";
+import { s as wt, c as et } from "./number.B4PQLJIg.js";
+import { b as it } from "./transformation.c-RS37zA.js";
 import { r as v } from "./state.CSDxrqLd.js";
-import { n as _ } from "./when.Dr1es41R.js";
+import { n as E } from "./when.Dr1es41R.js";
 import Z from "../components/details.js";
-import jt from "../components/divider.js";
+import Vt from "../components/divider.js";
 import { C as Y } from "./icon.DnBh6-56.js";
-import { C as ut } from "./icon-button.LhIEmHNF.js";
-import { C as mt } from "./input.DID1aXiO.js";
-import { C as rt } from "./option.n6PDuSs1.js";
-import nt from "../components/select.js";
-import { c as Vt } from "./image.BzmclWBR.js";
+import { C as mt } from "./icon-button.LhIEmHNF.js";
+import { C as ft } from "./input.ClJ4MEsk.js";
+import { C as nt } from "./option.n6PDuSs1.js";
+import ht from "../components/select.js";
+import { c as jt } from "./image.BzmclWBR.js";
 import { e as J } from "./query.BBf1UFkC.js";
 import { c as tt } from "./repeat.CFjcER6_.js";
-import { o as I } from "./style-map.llVFPd__.js";
-import Ht from "../components/tooltip.js";
+import { o as H } from "./style-map.llVFPd__.js";
+import It from "../components/tooltip.js";
 import Gt from "../components/button-group.js";
-import { C as Qt } from "./checkbox.Cjcht4xR.js";
+import { C as Qt } from "./checkbox.i5dgRvaf.js";
 function Kt(t) {
   return t && t.length ? Bt(t) : [];
 }
@@ -64,11 +64,11 @@ const Zt = {
   text: "Text",
   title: "Title"
 }, Yt = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
-function pt(t) {
+function dt(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}:${pt(a)}`);
+function zt(t, e) {
+  const s = (Array.isArray(e) ? e : [e]).map((a) => `${t}:${dt(a)}`);
   return s.length > 1 ? `(${s.join(" OR ")})` : s[0] ?? "";
 }
 function Jt(t, e) {
@@ -84,7 +84,7 @@ function te(t) {
       for (const [n, l] of Object.entries(
         a
       ))
-        e.push(wt(n, l));
+        e.push(zt(n, l));
       continue;
     }
     const r = Zt[s];
@@ -104,38 +104,38 @@ function te(t) {
         if (n.length === 0)
           continue;
         const l = [
-          ...n.map((u) => `ParentFolderIdentifier:${pt(String(u))}`),
-          ...n.map((u) => `ParentAlbumIdentifier:${pt(String(u))}`)
+          ...n.map((f) => `ParentFolderIdentifier:${dt(String(f))}`),
+          ...n.map((f) => `ParentAlbumIdentifier:${dt(String(f))}`)
         ];
         e.push(`(${l.join(" OR ")})`);
         continue;
       }
-      e.push(wt(r, a));
+      e.push(zt(r, a));
     }
   }
   return e.join(" AND ");
 }
-function it(t) {
+function st(t) {
   if ("and" in t)
-    return t.and.map(it).filter(Boolean).join(" AND ");
+    return t.and.map(st).filter(Boolean).join(" AND ");
   if ("or" in t) {
-    const e = t.or.map(it).filter(Boolean);
+    const e = t.or.map(st).filter(Boolean);
     return e.length > 1 ? `(${e.join(" OR ")})` : e[0] ?? "";
   }
   if ("not" in t) {
-    const e = it(t.not);
+    const e = st(t.not);
     return e ? `NOT (${e})` : "";
   }
   return te(t);
 }
-const dt = "CoreField.LargeSizePreview", vt = "CoreField.DocType", ee = "Document.Title", ie = "Document.CaptionLong", kt = "Document.FileExtension", Ct = "CoreField.FileSize", $t = "CoreField.Identifier", Rt = "CoreField.Keywords", _t = "CoreField.MaxHeight", Pt = "CoreField.MaxWidth", st = "Document.RecordID", Mt = "CoreField.DocSubType", Wt = "CoreField.TitleWithFallback", at = "CoreField.OriginalFileName", ot = "CoreField.UpdatedFileName", X = "CoreField.OriginalPreview", ct = {
+const ut = "CoreField.LargeSizePreview", vt = "CoreField.DocType", ee = "Document.Title", ie = "Document.CaptionLong", kt = "Document.FileExtension", Ct = "CoreField.FileSize", Rt = "CoreField.Identifier", $t = "CoreField.Keywords", Pt = "CoreField.MaxHeight", _t = "CoreField.MaxWidth", at = "Document.RecordID", Mt = "CoreField.DocSubType", Wt = "CoreField.TitleWithFallback", ot = "CoreField.OriginalFileName", rt = "CoreField.UpdatedFileName", X = "CoreField.OriginalPreview", pt = {
   DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
   FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
   ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
 }, Dt = {
-  [dt]: ct.DEFAULT_VIEW_SIZE,
-  [Wt]: ct.FIELD_TITLE_WITH_FALLBACK,
-  [X]: ct.ORIGINAL_VIEW_SIZE
+  [ut]: pt.DEFAULT_VIEW_SIZE,
+  [Wt]: pt.FIELD_TITLE_WITH_FALLBACK,
+  [X]: pt.ORIGINAL_VIEW_SIZE
 }, se = Object.fromEntries(
   Object.entries(Dt).map(([t, e]) => [
     e,
@@ -162,42 +162,42 @@ async function Tt({
   query: r,
   securityByPassToken: n,
   siteUrl: l,
-  sort: u,
-  token: S,
-  useSession: f
+  sort: f,
+  token: y,
+  useSession: m
 }) {
-  const z = e?.map(ae);
+  const S = e?.map(ae);
   try {
     return (await P.request({
       baseURL: l,
-      headers: S ? { Authorization: `Bearer ${S}` } : void 0,
+      headers: y ? { Authorization: `Bearer ${y}` } : void 0,
       method: "GET",
       params: {
         CountPerPage: t,
-        Fields: Kt(z),
+        Fields: Kt(S),
         Format: "json",
         GetPermanentAssetsPaths: i || void 0,
         PageNumber: a,
-        Query: it(r),
+        Query: st(r),
         SecurityByPassToken: n || void 0,
-        Sort: u || void 0,
-        UseSession: f || void 0
+        Sort: f || void 0,
+        UseSession: m || void 0
       },
       paramsSerializer: { indexes: null },
       responseType: "json",
       transformResponse: [
         ...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [],
-        s ? (m) => ({
-          items: (m.results?.Items ?? []).map(Ft),
-          sort: m.results?.GlobalInfo?.Sort ?? "",
-          totalCount: m.results?.GlobalInfo?.TotalCount ?? 0
-        }) : (m) => ({
-          items: (m.APIResponse?.Items ?? []).map(Ft),
-          sort: m.APIResponse?.GlobalInfo?.Sort ?? "",
-          totalCount: m.APIResponse?.GlobalInfo?.TotalCount ?? 0
+        s ? (u) => ({
+          items: (u.results?.Items ?? []).map(Ft),
+          sort: u.results?.GlobalInfo?.Sort ?? "",
+          totalCount: u.results?.GlobalInfo?.TotalCount ?? 0
+        }) : (u) => ({
+          items: (u.APIResponse?.Items ?? []).map(Ft),
+          sort: u.APIResponse?.GlobalInfo?.Sort ?? "",
+          totalCount: u.APIResponse?.GlobalInfo?.TotalCount ?? 0
         })
       ],
-      url: s ? It.SEARCH_ASSETS : Nt["4.0"]
+      url: s ? Ht.SEARCH_ASSETS : Nt["4.0"]
     })).data;
   } catch {
     return { items: [], sort: "", totalCount: 0 };
@@ -252,47 +252,47 @@ async function gi({
 }) {
   if (!Array.isArray(s) || s.length === 0)
     return { facets: [], items: [], totalCount: 0 };
-  const n = t?.filter((m) => m && typeof m == "string") ?? [], l = [
+  const n = t?.filter((u) => u && typeof u == "string") ?? [], l = [
     ...n,
     X,
+    rt,
     ot,
-    at,
     ee,
     ie,
-    st
-  ], u = ne(s, re), S = await Promise.all(
-    u.map(
-      (m) => Tt({
-        countPerPage: m.length,
+    at
+  ], f = ne(s, re), y = await Promise.all(
+    f.map(
+      (u) => Tt({
+        countPerPage: u.length,
         fields: l,
         getPermanentAssetsPaths: e,
         isSiteBuilder: i,
         pageNumber: 1,
-        query: { recordId: m },
+        query: { recordId: u },
         securityByPassToken: a,
         token: r
       })
     )
-  ), f = new Map(s.map((m, R) => [m, R])), z = S.flatMap((m) => m.items).map((m) => {
-    let R = w(m, ot);
-    return R === "" && (R = w(m, at)), {
-      name: R,
-      originalUrl: w(m, X),
-      recordId: w(m, st),
+  ), m = new Map(s.map((u, $) => [u, $])), S = y.flatMap((u) => u.items).map((u) => {
+    let $ = z(u, rt);
+    return $ === "" && ($ = z(u, ot)), {
+      name: $,
+      originalUrl: z(u, X),
+      recordId: z(u, at),
       ...n.reduce(
-        (Q, A) => (Q[A] = w(m, A), Q),
+        (Q, A) => (Q[A] = z(u, A), Q),
         {}
       )
     };
   }).sort(
-    (m, R) => (f.get(m.recordId) ?? 1 / 0) - (f.get(R.recordId) ?? 1 / 0)
-  ), $ = S.reduce(
-    (m, R) => m + R.totalCount,
+    (u, $) => (m.get(u.recordId) ?? 1 / 0) - (m.get($.recordId) ?? 1 / 0)
+  ), C = y.reduce(
+    (u, $) => u + $.totalCount,
     0
   );
-  return { facets: [], items: z, totalCount: $ };
+  return { facets: [], items: S, totalCount: C };
 }
-function w(t, e) {
+function z(t, e) {
   const i = t[e];
   return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : Xt(i) ? i.URI : "";
 }
@@ -305,63 +305,63 @@ async function xi({
   limitedDocTypes: r,
   pageNumber: n,
   parentFolderIdentifier: l,
-  searchTerm: u,
-  securityByPassToken: S,
-  sortOrder: f,
-  token: z
+  searchTerm: f,
+  securityByPassToken: y,
+  sortOrder: m,
+  token: S
 }) {
   if (!e && !l)
     return { facets: [], items: [], totalCount: 0 };
-  const $ = (i?.filter((A) => A && typeof A == "string") ?? []).map((A) => A.replace("%20", " ")), m = {
+  const C = (i?.filter((A) => A && typeof A == "string") ?? []).map((A) => A.replace("%20", " ")), u = {
     directParentFolderIdentifier: e,
     parentFolderIdentifier: l,
-    ...r.length > 0 ? { docType: [At.Image, At.Audio] } : {}
-  }, R = await Tt({
+    ...r.length > 0 ? { docType: [bt.Image, bt.Audio] } : {}
+  }, $ = await Tt({
     countPerPage: t,
     fields: [
-      ...$,
+      ...C,
       Wt,
-      dt,
+      ut,
       X,
-      Rt,
-      Pt,
+      $t,
       _t,
+      Pt,
       Ct,
       vt,
       Mt,
-      $t,
+      Rt,
       kt,
-      st,
       at,
-      ot
+      ot,
+      rt
     ],
     getPermanentAssetsPaths: s,
     isSiteBuilder: a,
     pageNumber: n,
-    query: m,
-    securityByPassToken: S,
+    query: u,
+    securityByPassToken: y,
     sort: void 0,
-    token: z
-  }), Q = R.items.map((A) => {
-    let K = w(A, kt), lt = w(A, ot), gt = w(A, dt);
-    K && !K.startsWith(".") && (K = "." + K), lt === "" && (lt = w(A, at)), K.toLowerCase() === ".gif" && (gt = w(A, X));
-    const xt = w(A, st);
+    token: S
+  }), Q = $.items.map((A) => {
+    let K = z(A, kt), ct = z(A, rt), xt = z(A, ut);
+    K && !K.startsWith(".") && (K = "." + K), ct === "" && (ct = z(A, ot)), K.toLowerCase() === ".gif" && (xt = z(A, X));
+    const yt = z(A, at);
     return {
-      docSubType: w(A, Mt),
-      docType: w(A, vt) || "",
+      docSubType: z(A, Mt),
+      docType: z(A, vt) || "",
       extension: K,
-      height: w(A, _t) || "0",
-      id: xt,
-      identifier: w(A, $t),
-      imageUrl: gt,
-      name: lt,
-      originalUrl: w(A, X),
-      recordId: xt,
-      size: w(A, Ct) || "0 MB",
-      tags: w(A, Rt),
-      width: w(A, Pt) || "0",
-      ...$.reduce(
-        (yt, St) => (yt[St] = w(A, St), yt),
+      height: z(A, Pt) || "0",
+      id: yt,
+      identifier: z(A, Rt),
+      imageUrl: xt,
+      name: ct,
+      originalUrl: z(A, X),
+      recordId: yt,
+      size: z(A, Ct) || "0 MB",
+      tags: z(A, $t),
+      width: z(A, _t) || "0",
+      ...C.reduce(
+        (St, At) => (St[At] = z(A, At), St),
         {}
       )
     };
@@ -369,7 +369,7 @@ async function xi({
   return {
     facets: [],
     items: Q,
-    totalCount: R.totalCount
+    totalCount: $.totalCount
   };
 }
 async function he({
@@ -438,7 +438,7 @@ async function yi({
           width: l.width
         })) ?? []
       ],
-      url: e ? It.GET_AVAILABLE_PROXIES : Ot
+      url: e ? Ht.GET_AVAILABLE_PROXIES : Ot
     })).data;
   } catch {
     return [];
@@ -472,14 +472,14 @@ async function Si({
   }
 }
 const le = 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}`, ce = 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 pe = Object.defineProperty, de = Object.getOwnPropertyDescriptor, y = (t, e, i, s) => {
+var pe = Object.defineProperty, de = Object.getOwnPropertyDescriptor, x = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? de(e, i) : e, r = t.length - 1, n; r >= 0; r--)
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
   return s && a && pe(e, i, a), a;
 };
 let g = class extends N {
   constructor() {
-    super(...arguments), this.localize = new O(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.canApply = !1, this.lastAppliedSetting = {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.lastAppliedSetting = {
       [o.Pixel]: {
         height: 0,
         percentageHeight: 100,
@@ -525,18 +525,14 @@ let g = class extends N {
     this.aspectRatio = 1;
   }
   async handleOpenChange() {
-    if (this.cropMode = "free", await this.updateComplete, !this.open) {
-      if (!this.canApply)
-        return;
-      this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-crop-change", {
-        detail: {
-          height: this.lastAppliedSetting[o.Pixel].height,
-          keepAspectRatio: this.keepAspectRatio,
-          unit: o.Pixel,
-          width: this.lastAppliedSetting[o.Pixel].width
-        }
-      });
-    }
+    this.cropMode = "free", await this.updateComplete, this.open || (this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-crop-change", {
+      detail: {
+        height: this.lastAppliedSetting[o.Pixel].height,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: o.Pixel,
+        width: this.lastAppliedSetting[o.Pixel].width
+      }
+    }));
   }
   handleWidthChange(t) {
     if (!t.target.value) {
@@ -592,7 +588,7 @@ let g = class extends N {
       const [s, a] = e.split(":").map(Number);
       if (this.unit === o.Pixel) {
         let r = s, n = a;
-        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: n, width: r } = Vt(
+        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: n, width: r } = jt(
           this.maxWidth,
           this.maxHeight,
           s,
@@ -702,138 +698,134 @@ let g = class extends N {
   }
   render() {
     const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
-    return x`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${I({
+    return b`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${H({
       width: "100%"
     })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${tt(
       t,
       (i) => i.value,
-      ({ label: i, value: s }) => x`<cx-option value=${s}>${i}</cx-option>`
+      ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
     )}
-          ${_(
+          ${E(
       e.length > 0,
-      () => x`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
+      () => b`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
     )}
           ${tt(
       e,
       (i) => i.value,
-      ({ label: i, value: s }) => x`<cx-option value=${s}>${i}</cx-option>`
+      ({ label: i, value: s }) => b`<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=${H({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
     })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} ?disabled=${this.loading} @cx-change=${this.handleInputChange} @cx-input=${this.handleHeightChange} required><cx-typography slot="prefix" variant="body3" part="input-label">
                 H
-              </cx-typography></cx-input></div><cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${_(
+              </cx-typography></cx-input></div><cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${E(
       this.focusModes.length > 0,
-      () => x`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${I({
+      () => b`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${H({
         width: "100%"
       })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${tt(
         this.focusModes,
         (i) => i.value,
-        ({ label: i, value: s }) => x`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
       )}</cx-select>`
-    )}
-        ${_(this.canApply, () => x`<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=${H({
       marginLeft: "auto"
-    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
+    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
 g.styles = [U, ce];
 g.dependencies = {
-  "cx-button": G,
+  "cx-button": j,
   "cx-details": Z,
-  "cx-divider": jt,
+  "cx-divider": Vt,
   "cx-icon": Y,
-  "cx-icon-button": ut,
-  "cx-input": mt,
-  "cx-option": rt,
-  "cx-select": nt,
+  "cx-icon-button": mt,
+  "cx-input": ft,
+  "cx-option": nt,
+  "cx-select": ht,
   "cx-space": D,
   "cx-typography": T
 };
-y([
+x([
   J(".details")
 ], g.prototype, "base", 2);
-y([
+x([
   h({ reflect: !0, type: Boolean })
 ], g.prototype, "open", 2);
-y([
+x([
   h({ reflect: !0, type: Number })
 ], g.prototype, "width", 2);
-y([
+x([
   h({ reflect: !0, type: Number })
 ], g.prototype, "height", 2);
-y([
+x([
   h({ attribute: "max-width", reflect: !0, type: Number })
 ], g.prototype, "maxWidth", 2);
-y([
+x([
   h({ attribute: "max-height", reflect: !0, type: Number })
 ], g.prototype, "maxHeight", 2);
-y([
+x([
   h({ attribute: "ratio-width", reflect: !0, type: Number })
 ], g.prototype, "ratioWidth", 2);
-y([
+x([
   h({ attribute: "ratio-height", reflect: !0, type: Number })
 ], g.prototype, "ratioHeight", 2);
-y([
+x([
   h({ attribute: "percentage-width", reflect: !0, type: Number })
 ], g.prototype, "percentageWidth", 2);
-y([
+x([
   h({ attribute: "percentage-height", reflect: !0, type: Number })
 ], g.prototype, "percentageHeight", 2);
-y([
+x([
   h({ reflect: !0, type: String })
 ], g.prototype, "unit", 2);
-y([
+x([
   h({ attribute: "disabled-apply", reflect: !0, type: Boolean })
 ], g.prototype, "disabledApply", 2);
-y([
-  h({ attribute: "can-apply", reflect: !0, type: Boolean })
-], g.prototype, "canApply", 2);
-y([
+x([
   h({ attribute: "last-applied-setting", reflect: !1, type: Object })
 ], g.prototype, "lastAppliedSetting", 2);
-y([
+x([
   h({ reflect: !0, type: Boolean })
 ], g.prototype, "loading", 2);
-y([
+x([
   h({ attribute: "crop-modes", reflect: !1, type: Array })
 ], g.prototype, "cropModes", 2);
-y([
+x([
   h({ attribute: "focus-modes", reflect: !1, type: Object })
 ], g.prototype, "focusModes", 2);
-y([
+x([
   h({ attribute: "focus-mode", reflect: !0, type: String })
 ], g.prototype, "focusMode", 2);
-y([
+x([
   h({ attribute: "crop-mode", reflect: !0, type: String })
 ], g.prototype, "cropMode", 2);
-y([
+x([
   h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
 ], g.prototype, "keepAspectRatio", 2);
-y([
+x([
   v()
 ], g.prototype, "invalidWidth", 2);
-y([
+x([
   v()
 ], g.prototype, "invalidHeight", 2);
-y([
+x([
   v()
 ], g.prototype, "aspectRatio", 2);
-y([
-  C("cropMode", { waitUntilFirstUpdate: !0 }),
-  C("maxWidth", { waitUntilFirstUpdate: !0 }),
-  C("maxHeight", { waitUntilFirstUpdate: !0 }),
-  C("keepAspectRatio")
+x([
+  R("cropMode", { waitUntilFirstUpdate: !0 }),
+  R("maxWidth", { waitUntilFirstUpdate: !0 }),
+  R("maxHeight", { waitUntilFirstUpdate: !0 }),
+  R("keepAspectRatio")
 ], g.prototype, "handleCropModeChange", 1);
-y([
-  C("open")
+x([
+  R("open")
 ], g.prototype, "handleOpenChange", 1);
-g = y([
+g = x([
   q("cx-asset-link-format-crop")
 ], g);
 const ue = 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 me = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, ft = (t, e, i, s) => {
+var me = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, gt = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? fe(e, i) : e, r = t.length - 1, n; r >= 0; r--)
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
   return s && a && me(e, i, a), a;
@@ -849,36 +841,36 @@ let V = class extends N {
     });
   }
   render() {
-    return x`<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 b`<cx-space direction="vertical" spacing="small" class="extension"><cx-typography variant="body2">${this.localize.term("extension")}</cx-typography><cx-select data-label=${this.localize.term("extension")} data-testid="cx-asset-link-format-extension-select" value=${this.value} hoist @cx-change=${this.handleExtensionChange}>${tt(
       this.items,
       (t) => t.value,
-      (t) => x`<cx-option value=${t.value}>${t.displayName}</cx-option>`
+      (t) => b`<cx-option value=${t.value}>${t.displayName}</cx-option>`
     )}</cx-select></cx-space>`;
   }
 };
 V.styles = [U, ue];
 V.dependencies = {
-  "cx-option": rt,
-  "cx-select": nt,
+  "cx-option": nt,
+  "cx-select": ht,
   "cx-space": D,
   "cx-typography": T
 };
-ft([
+gt([
   h({ reflect: !0, type: String })
 ], V.prototype, "value", 2);
-ft([
+gt([
   h({ reflect: !1, type: Array })
 ], V.prototype, "items", 2);
-V = ft([
+V = gt([
   q("cx-asset-link-format-extension")
 ], V);
 const ge = L`cx-details::part(base){border-bottom-width:0}`;
-var xe = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, H = (t, e, i, s) => {
+var xe = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, I = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? ye(e, i) : e, r = t.length - 1, n; r >= 0; r--)
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
   return s && a && xe(e, i, a), a;
 };
-let M = class extends N {
+let _ = class extends N {
   constructor() {
     super(...arguments), this.localize = new O(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
   }
@@ -924,61 +916,61 @@ let M = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return x`<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 b`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("format")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small" class="format"><cx-select data-label=${this.localize.term("imageFormat")} data-testid="cx-asset-link-format-proxy-select" value=${this.scopedValue} hoist @cx-change=${this.handleProxyChange} ?disabled=${this.loading}>${tt(
       this.items,
       (t) => t.id,
-      (t) => x`<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) => b`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
+    )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${H({
       "margin-left": "auto"
     })} ?disabled=${this.scopedValue === this.value} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-M.styles = [U, ge];
-M.dependencies = {
-  "cx-button": G,
+_.styles = [U, ge];
+_.dependencies = {
+  "cx-button": j,
   "cx-details": Z,
   "cx-icon": Y,
-  "cx-option": rt,
-  "cx-select": nt,
+  "cx-option": nt,
+  "cx-select": ht,
   "cx-space": D,
   "cx-typography": T
 };
-H([
+I([
   J(".details")
-], M.prototype, "base", 2);
-H([
+], _.prototype, "base", 2);
+I([
   h({ reflect: !0, type: Boolean })
-], M.prototype, "open", 2);
-H([
+], _.prototype, "open", 2);
+I([
   h({ reflect: !0, type: String })
-], M.prototype, "value", 2);
-H([
+], _.prototype, "value", 2);
+I([
   h({ reflect: !1, type: Array })
-], M.prototype, "items", 2);
-H([
+], _.prototype, "items", 2);
+I([
   h({ reflect: !0, type: Boolean })
-], M.prototype, "loading", 2);
-H([
+], _.prototype, "loading", 2);
+I([
   v()
-], M.prototype, "scopedValue", 2);
-H([
-  C("value")
-], M.prototype, "handleValueChange", 1);
-H([
-  C("open", { waitUntilFirstUpdate: !0 })
-], M.prototype, "handleOpenChange", 1);
-M = H([
+], _.prototype, "scopedValue", 2);
+I([
+  R("value")
+], _.prototype, "handleValueChange", 1);
+I([
+  R("open", { waitUntilFirstUpdate: !0 })
+], _.prototype, "handleOpenChange", 1);
+_ = I([
   q("cx-asset-link-format-proxy")
-], M);
+], _);
 const Se = L`cx-details::part(base){border-bottom-width:0}`;
-var Ae = Object.defineProperty, be = Object.getOwnPropertyDescriptor, B = (t, e, i, s) => {
+var Ae = Object.defineProperty, be = Object.getOwnPropertyDescriptor, G = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? be(e, i) : e, r = t.length - 1, n; r >= 0; r--)
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
   return s && a && Ae(e, i, a), a;
 };
 let F = class extends N {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.open = !1, this.value = 100, this.loading = !1, this.canApply = !1, this.scopedValue = 100;
+    super(...arguments), this.localize = new O(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.
@@ -993,9 +985,7 @@ let F = class extends N {
   }
   handleQualityChange(t) {
     const e = t.target.value;
-    this.scopedValue = Number(e), !this.canApply && !this.invalidValue && this.emit("cx-asset-link-format-quality-change", {
-      detail: this.scopedValue
-    });
+    this.scopedValue = Number(e);
   }
   /**
    * Handles the application of the input quality.
@@ -1024,57 +1014,54 @@ let F = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return x`<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 b`<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=${H({
       flex: "1"
-    })} @cx-input=${this.handleQualityChange}></cx-input></cx-tooltip>${_(this.canApply, () => x`<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>`;
+    })} @cx-input=${this.handleQualityChange}></cx-input></cx-tooltip><cx-button data-testid="cx-asset-link-format-quality-apply" variant="primary" ?disabled=${this.invalidValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
 F.styles = [U, Se];
 F.dependencies = {
-  "cx-button": G,
+  "cx-button": j,
   "cx-details": Z,
   "cx-icon": Y,
-  "cx-input": mt,
+  "cx-input": ft,
   "cx-space": D,
-  "cx-tooltip": Ht,
+  "cx-tooltip": It,
   "cx-typography": T
 };
-B([
+G([
   J(".details")
 ], F.prototype, "base", 2);
-B([
+G([
   h({ reflect: !0, type: Boolean })
 ], F.prototype, "open", 2);
-B([
+G([
   h({ reflect: !0, type: Number })
 ], F.prototype, "value", 2);
-B([
+G([
   h({ reflect: !0, type: Boolean })
 ], F.prototype, "loading", 2);
-B([
-  h({ attribute: "can-apply", reflect: !0, type: Boolean })
-], F.prototype, "canApply", 2);
-B([
+G([
   v()
 ], F.prototype, "scopedValue", 2);
-B([
-  C("value")
+G([
+  R("value")
 ], F.prototype, "handleValueChange", 1);
-F = B([
+F = G([
   q("cx-asset-link-format-quality")
 ], F);
-const ze = 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 we = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, k = (t, e, i, s) => {
+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 ze = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, k = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? ve(e, i) : e, r = t.length - 1, n; r >= 0; r--)
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
-  return s && a && we(e, i, a), a;
+  return s && a && ze(e, i, a), a;
 };
-let b = class extends N {
+let w = class extends N {
   constructor() {
     super(...arguments), this.localize = new O(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.canApply = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
+    }, this.loading = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
   }
   /**
    * A computed property that checks if the current resize settings match the last applied settings.
@@ -1101,18 +1088,14 @@ let b = class extends N {
     this.aspectRatio = 1;
   }
   async handleOpenChange() {
-    if (await this.updateComplete, !this.open) {
-      if (!this.canApply)
-        return;
-      this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-resize-change", {
-        detail: {
-          height: this.lastAppliedSetting[o.Pixel].height,
-          keepAspectRatio: this.keepAspectRatio,
-          unit: o.Pixel,
-          width: this.lastAppliedSetting[o.Pixel].width
-        }
-      });
-    }
+    await this.updateComplete, this.open || (this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-resize-change", {
+      detail: {
+        height: this.lastAppliedSetting[o.Pixel].height,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: o.Pixel,
+        width: this.lastAppliedSetting[o.Pixel].width
+      }
+    }));
   }
   handleWidthChange(t) {
     if (!t.target.value) {
@@ -1209,117 +1192,110 @@ let b = class extends N {
     });
   }
   render() {
-    return x`<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 b`<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=${H({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
     })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} @cx-input=${this.handleHeightChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 H
-              </cx-typography></cx-input></div><cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${_(this.canApply, () => x`<cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${I({
+              </cx-typography></cx-input></div><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=${H({
       marginLeft: "auto"
-    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
+    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-b.styles = [U, ze];
-b.dependencies = {
-  "cx-button": G,
+w.styles = [U, we];
+w.dependencies = {
+  "cx-button": j,
   "cx-details": Z,
   "cx-icon": Y,
-  "cx-icon-button": ut,
-  "cx-input": mt,
-  "cx-option": rt,
-  "cx-select": nt,
+  "cx-icon-button": mt,
+  "cx-input": ft,
+  "cx-option": nt,
+  "cx-select": ht,
   "cx-space": D,
   "cx-typography": T
 };
 k([
   J(".details")
-], b.prototype, "base", 2);
+], w.prototype, "base", 2);
 k([
   h({ reflect: !0, type: Boolean })
-], b.prototype, "open", 2);
+], w.prototype, "open", 2);
 k([
   h({ reflect: !0, type: Number })
-], b.prototype, "width", 2);
+], w.prototype, "width", 2);
 k([
   h({ reflect: !0, type: Number })
-], b.prototype, "height", 2);
+], w.prototype, "height", 2);
 k([
   h({ attribute: "max-width", reflect: !0, type: Number })
-], b.prototype, "maxWidth", 2);
+], w.prototype, "maxWidth", 2);
 k([
   h({ attribute: "max-height", reflect: !0, type: Number })
-], b.prototype, "maxHeight", 2);
+], w.prototype, "maxHeight", 2);
 k([
   h({ attribute: "ratio-width", reflect: !0, type: Number })
-], b.prototype, "ratioWidth", 2);
+], w.prototype, "ratioWidth", 2);
 k([
   h({ attribute: "ratio-height", reflect: !0, type: Number })
-], b.prototype, "ratioHeight", 2);
+], w.prototype, "ratioHeight", 2);
 k([
   h({ reflect: !0, type: String })
-], b.prototype, "unit", 2);
+], w.prototype, "unit", 2);
 k([
   h({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], b.prototype, "lastAppliedSetting", 2);
+], w.prototype, "lastAppliedSetting", 2);
 k([
   h({ reflect: !0, type: Boolean })
-], b.prototype, "loading", 2);
-k([
-  h({ attribute: "can-apply", reflect: !0, type: Boolean })
-], b.prototype, "canApply", 2);
+], w.prototype, "loading", 2);
 k([
   h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], b.prototype, "keepAspectRatio", 2);
+], w.prototype, "keepAspectRatio", 2);
 k([
   v()
-], b.prototype, "invalidWidth", 2);
+], w.prototype, "invalidWidth", 2);
 k([
   v()
-], b.prototype, "invalidHeight", 2);
+], w.prototype, "invalidHeight", 2);
 k([
   v()
-], b.prototype, "aspectRatio", 2);
+], w.prototype, "aspectRatio", 2);
 k([
-  C("cropMode", { waitUntilFirstUpdate: !0 }),
-  C("maxWidth", { waitUntilFirstUpdate: !0 }),
-  C("maxHeight", { waitUntilFirstUpdate: !0 }),
-  C("keepAspectRatio")
-], b.prototype, "handleCropModeChange", 1);
+  R("cropMode", { waitUntilFirstUpdate: !0 }),
+  R("maxWidth", { waitUntilFirstUpdate: !0 }),
+  R("maxHeight", { waitUntilFirstUpdate: !0 }),
+  R("keepAspectRatio")
+], w.prototype, "handleCropModeChange", 1);
 k([
-  C("open")
-], b.prototype, "handleOpenChange", 1);
-b = k([
+  R("open")
+], w.prototype, "handleOpenChange", 1);
+w = k([
   q("cx-asset-link-format-resize")
-], b);
+], w);
 const ke = L`cx-details::part(base){border-bottom-width:0}`;
-var Ce = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, j = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? $e(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+var Ce = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, B = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Re(e, i) : e, r = t.length - 1, n; r >= 0; r--)
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
   return s && a && Ce(e, i, a), a;
 };
-let E = class extends N {
+let M = class extends N {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.canApply = !1;
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
   }
   handleOpenChange() {
-    if (!this.open) {
-      if (!this.canApply)
-        return;
-      this.emit("cx-asset-link-format-rotation-change", {
-        detail: 0
-      });
-    }
+    this.open || this.emit("cx-asset-link-format-rotation-change", {
+      detail: this.lastAppliedValue
+    });
   }
   handleRotationChange(t) {
-    const e = t.target.value, i = bt(Number(e));
+    const e = t.target.value, i = wt(Number(e));
     (Number(e) > 360 || Number(e) < -360) && (t.target.value = i.toString()), this.emit("cx-asset-link-format-rotation-change", {
       detail: i
     });
   }
   handleButtonClick(t) {
     this.emit("cx-asset-link-format-rotation-change", {
-      detail: bt(t)
+      detail: wt(t)
     });
   }
   handleClockwiseClick() {
@@ -1339,51 +1315,51 @@ let E = class extends N {
     });
   }
   render() {
-    return x`<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 b`<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=${H({
       flex: "none",
       width: "80px"
-    })} @cx-input=${this.handleRotationChange}></cx-input>${_(this.canApply, () => x`<cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === 0} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
+    })} @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>`;
   }
 };
-E.styles = [U, ke];
-E.dependencies = {
-  "cx-button": G,
+M.styles = [U, ke];
+M.dependencies = {
+  "cx-button": j,
   "cx-button-group": Gt,
   "cx-details": Z,
   "cx-icon": Y,
-  "cx-icon-button": ut,
+  "cx-icon-button": mt,
   "cx-space": D,
   "cx-typography": T
 };
-j([
+B([
   J(".details")
-], E.prototype, "base", 2);
-j([
+], M.prototype, "base", 2);
+B([
   h({ reflect: !0, type: Boolean })
-], E.prototype, "open", 2);
-j([
+], M.prototype, "open", 2);
+B([
   h({ reflect: !0, type: Number })
-], E.prototype, "value", 2);
-j([
+], M.prototype, "value", 2);
+B([
   h({ attribute: "default-value", reflect: !0, type: Number })
-], E.prototype, "defaultValue", 2);
-j([
+], M.prototype, "defaultValue", 2);
+B([
   h({ reflect: !0, type: Boolean })
-], E.prototype, "loading", 2);
-j([
-  h({ attribute: "can-apply", reflect: !0, type: Boolean })
-], E.prototype, "canApply", 2);
-j([
-  C("open", { waitUntilFirstUpdate: !0 })
-], E.prototype, "handleOpenChange", 1);
-E = j([
+], M.prototype, "loading", 2);
+B([
+  h({ attribute: "last-applied-value", reflect: !0, type: Number })
+], M.prototype, "lastAppliedValue", 2);
+B([
+  R("open", { waitUntilFirstUpdate: !0 })
+], M.prototype, "handleOpenChange", 1);
+M = B([
   q("cx-asset-link-format-rotation")
-], E);
-const Re = L`cx-details::part(base){border-bottom-width:0}`;
-var _e = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, ht = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Pe(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+], M);
+const $e = L`cx-details::part(base){border-bottom-width:0}`;
+var Pe = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, lt = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? _e(e, i) : e, r = t.length - 1, n; r >= 0; r--)
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
-  return s && a && _e(e, i, a), a;
+  return s && a && Pe(e, i, a), a;
 };
 let W = class extends N {
   constructor() {
@@ -1411,29 +1387,29 @@ let W = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return x`<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 b`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="short_text"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("metadata")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-metadata-tooltip" content=${this.localize.term("metadataHelpText")} hoist><cx-checkbox data-testid="cx-asset-link-format-metadata" class="details__checkbox" ?checked=${this.value} @cx-change=${this.handleApply}>${this.localize.term("preserveMetadata")}</cx-checkbox></cx-tooltip></cx-space></cx-details>`;
   }
 };
-W.styles = [U, Re];
+W.styles = [U, $e];
 W.dependencies = {
-  "cx-button": G,
+  "cx-button": j,
   "cx-checkbox": Qt,
   "cx-details": Z,
   "cx-icon": Y,
   "cx-space": D,
-  "cx-tooltip": Ht,
+  "cx-tooltip": It,
   "cx-typography": T
 };
-ht([
+lt([
   J(".details")
 ], W.prototype, "base", 2);
-ht([
+lt([
   h({ reflect: !0, type: Boolean })
 ], W.prototype, "open", 2);
-ht([
+lt([
   h({ reflect: !0, type: Boolean })
 ], W.prototype, "value", 2);
-W = ht([
+W = lt([
   q("cx-asset-link-format-metadata")
 ], W);
 var Me = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, d = (t, e, i, s) => {
@@ -1574,7 +1550,57 @@ let p = class extends N {
    * It returns an object with the last crop size in both pixel and aspect ratio units.
    */
   get lastCropSize() {
-    const t = zt(
+    if (!this.asset) {
+      const e = this.transformations.findLast(
+        (i) => i.key === c.Crop
+      );
+      if (e?.value.width && e?.value.height) {
+        const { height: i, unit: s, width: a, x: r = 0, y: n = 0 } = e.value;
+        if (s === o.AspectRatio)
+          return {
+            [o.AspectRatio]: {
+              height: i,
+              percentageHeight: 100,
+              percentageWidth: 100,
+              unit: o.AspectRatio,
+              width: a,
+              x: 0,
+              y: 0
+            },
+            [o.Pixel]: {
+              height: 0,
+              percentageHeight: 100,
+              percentageWidth: 100,
+              unit: o.Pixel,
+              width: 0,
+              x: 0,
+              y: 0
+            }
+          };
+        const l = et(a, i);
+        return {
+          [o.AspectRatio]: {
+            height: l.height,
+            percentageHeight: 100,
+            percentageWidth: 100,
+            unit: o.AspectRatio,
+            width: l.width,
+            x: 0,
+            y: 0
+          },
+          [o.Pixel]: {
+            height: i,
+            percentageHeight: 100,
+            percentageWidth: 100,
+            unit: o.Pixel,
+            width: a,
+            x: r,
+            y: n
+          }
+        };
+      }
+    }
+    const t = et(
       this.lastImageSize.width,
       this.lastImageSize.height
     );
@@ -1605,7 +1631,41 @@ let p = class extends N {
    * It returns an object with the last resize size in both pixel and aspect ratio units.
    */
   get lastResizeSize() {
-    const t = zt(
+    if (!this.asset) {
+      const e = this.transformations.findLast(
+        (i) => i.key === c.Resize
+      );
+      if (e?.value.width && e?.value.height) {
+        const { height: i, unit: s, width: a } = e.value;
+        if (s === o.AspectRatio)
+          return {
+            [o.AspectRatio]: {
+              height: i,
+              unit: o.AspectRatio,
+              width: a
+            },
+            [o.Pixel]: {
+              height: 0,
+              unit: o.Pixel,
+              width: 0
+            }
+          };
+        const r = et(a, i);
+        return {
+          [o.AspectRatio]: {
+            height: r.height,
+            unit: o.AspectRatio,
+            width: r.width
+          },
+          [o.Pixel]: {
+            height: i,
+            unit: o.Pixel,
+            width: a
+          }
+        };
+      }
+    }
+    const t = et(
       this.lastImageSize.width,
       this.lastImageSize.height
     );
@@ -1622,11 +1682,24 @@ let p = class extends N {
       }
     };
   }
+  /**
+   * Returns the last applied rotation value. Without an asset, rotation applies replace
+   * (dedupe) a single Rotate entry, so this reflects the exact committed value — used to
+   * know when the rotation panel has no pending change to apply, and to restore this value
+   * when the panel is closed without applying. With an asset, rotation applies are
+   * cumulative deltas reprocessed by the backend, so there is no single "last applied"
+   * value and this always returns 0.
+   */
+  get lastRotation() {
+    return this.asset ? 0 : this.transformations.findLast(
+      (e) => e.key === c.Rotate
+    )?.value.rotation ?? 0;
+  }
   /**
    * Returns the transformation string for the asset link.
    */
   get transformationString() {
-    return et({
+    return it({
       asset: this.asset,
       baseUrl: "",
       parameters: this.parameters,
@@ -1681,7 +1754,7 @@ let p = class extends N {
            */
         });
       });
-      const i = et({
+      const i = it({
         asset: this.asset,
         baseUrl: "",
         extension: this.selectedFormat.extension,
@@ -1714,7 +1787,7 @@ let p = class extends N {
   async handleTransformationsChange() {
     if (await this.updateComplete, !this.asset) {
       this.emit("cx-asset-link-format-change", {
-        detail: et({
+        detail: it({
           asset: this.asset,
           baseUrl: "",
           options: {
@@ -1726,20 +1799,20 @@ let p = class extends N {
         }).replace(/\/t\//g, "")
       });
       const r = this.transformations.findLast(
-        (f) => f.key === c.Crop && f.value.width && f.value.height
+        (m) => m.key === c.Crop && m.value.width && m.value.height
       );
       if (r) {
-        const { focusMode: f, height: z, unit: $, width: m, x: R = 0, y: Q = 0 } = r.value;
+        const { focusMode: m, height: S, unit: C, width: u, x: $ = 0, y: Q = 0 } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
-          focusMode: f ?? "manual",
-          height: z,
+          focusMode: m ?? "manual",
+          height: S,
           percentageHeight: 100,
           percentageWidth: 100,
-          unit: $ ?? o.Pixel,
-          width: m,
-          x: R,
+          unit: C ?? o.Pixel,
+          width: u,
+          x: $,
           y: Q
         };
       } else
@@ -1756,15 +1829,15 @@ let p = class extends N {
           y: 0
         };
       const n = this.transformations.findLast(
-        (f) => f.key === c.Resize && (f.value.width || f.value.height)
+        (m) => m.key === c.Resize && (m.value.width || m.value.height)
       );
       if (n) {
-        const { height: f = 0, unit: z, width: $ = 0 } = n.value;
+        const { height: m = 0, unit: S, width: C = 0 } = n.value;
         this.resizeSize = {
           ...this.resizeSize,
-          height: f,
-          unit: z ?? o.Pixel,
-          width: $
+          height: m,
+          unit: S ?? o.Pixel,
+          width: C
         };
       } else
         this.resizeSize = {
@@ -1774,18 +1847,18 @@ let p = class extends N {
           width: 0
         };
       const l = this.transformations.findLast(
-        (f) => f.key === c.Rotate
+        (m) => m.key === c.Rotate
       );
       this.rotation = l?.value.rotation ?? 0;
-      const u = this.transformations.findLast((f) => f.key === c.Quality)?.value.quality ?? 100, S = this.transformations.some(
-        (f) => f.key === c.Metadata
+      const f = this.transformations.findLast((m) => m.key === c.Quality)?.value.quality ?? 100, y = this.transformations.some(
+        (m) => m.key === c.Metadata
       );
-      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: S, quality: u } : this.selectedFormat = {
+      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: y, quality: f } : this.selectedFormat = {
         extension: "",
         height: 0,
-        keepMetadata: S,
+        keepMetadata: y,
         originalUrl: "",
-        quality: u,
+        quality: f,
         rotation: 0,
         url: "",
         width: 0,
@@ -1851,7 +1924,7 @@ let p = class extends N {
        * url: `${this.baseUrl}/${response.relativePath}`,
        */
     };
-    const a = et({
+    const a = it({
       asset: this.asset,
       baseUrl: "",
       extension: this.selectedFormat.extension,
@@ -1930,7 +2003,7 @@ let p = class extends N {
     const i = this.proxies?.find((s) => s.id === t);
     i && (this.asset && i.proxyName === "TRX" && (i.formatHeight = Number(this.asset.height), i.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((s) => {
       if (s.key === c.Crop) {
-        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight, l = a.x / i.formatWidth * e.formatWidth, u = a.y / i.formatHeight * e.formatHeight;
+        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight, l = a.x / i.formatWidth * e.formatWidth, f = a.y / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
@@ -1938,7 +2011,7 @@ let p = class extends N {
             height: n,
             width: r,
             x: l,
-            y: u
+            y: f
           }
         };
       }
@@ -2016,30 +2089,30 @@ let p = class extends N {
     percentageWidth: r,
     ratioHeight: n,
     ratioWidth: l,
-    unit: u,
-    useCropMode: S,
-    width: f
+    unit: f,
+    useCropMode: y,
+    width: m
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
     this.loading = !0, this.lastAction = c.Crop;
-    const z = await this.apiGetCropFocusMode({
+    const S = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
-      cropWidth: f,
+      cropWidth: m,
       imageUrl: this.selectedFormat.url
     });
-    if (z) {
-      let $ = a, m = r;
-      i || ($ = z.height * 100 / this.selectedFormat.height), f || (m = z.width * 100 / this.selectedFormat.width), this.cropSize = {
+    if (S) {
+      let C = a, u = r;
+      i || (C = S.height * 100 / this.selectedFormat.height), m || (u = S.width * 100 / this.selectedFormat.width), this.cropSize = {
         ...this.cropSize,
-        height: z.height,
-        percentageHeight: $ ?? this.cropSize.percentageHeight,
-        percentageWidth: m ?? this.cropSize.percentageWidth,
-        width: z.width,
-        x: z.x * 100 / this.selectedFormat.width,
-        y: z.y * 100 / this.selectedFormat.height,
-        ...S ? {
+        height: S.height,
+        percentageHeight: C ?? this.cropSize.percentageHeight,
+        percentageWidth: u ?? this.cropSize.percentageWidth,
+        width: S.width,
+        x: S.x * 100 / this.selectedFormat.width,
+        y: S.y * 100 / this.selectedFormat.height,
+        ...y ? {
           cropMode: e,
           focusMode: "manual",
           keepAspectRatio: !1
@@ -2050,7 +2123,7 @@ let p = class extends N {
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
         ratioHeight: n ?? this.cropSize.ratioHeight,
         ratioWidth: l ?? this.cropSize.ratioWidth,
-        unit: u ?? this.cropSize.unit
+        unit: f ?? this.cropSize.unit
       };
     }
     this.loading = !1, this.lastAction = void 0;
@@ -2065,25 +2138,25 @@ let p = class extends N {
     if (s === 0 || i === 0)
       return;
     const n = this.cropSize.percentageWidth !== s, l = this.cropSize.percentageHeight !== i;
-    let u = this.cropSize.height, S = this.cropSize.width;
-    n && (S = Math.round(s * this.selectedFormat.width / 100)), l && (u = Math.round(
+    let f = this.cropSize.height, y = this.cropSize.width;
+    n && (y = Math.round(s * this.selectedFormat.width / 100)), l && (f = Math.round(
       i * this.selectedFormat.height / 100
     ));
-    const f = this.cropSize.focusMode;
+    const m = this.cropSize.focusMode;
     this.focusModes.find(
-      ($) => $.value === f
+      (C) => C.value === m
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
-      focusMode: f,
-      height: u,
+      focusMode: m,
+      height: f,
       percentageHeight: i,
       percentageWidth: s,
-      width: S
+      width: y
     }) : this.cropSize = {
       ...this.cropSize,
-      height: u,
+      height: f,
       percentageHeight: i,
       percentageWidth: s,
-      width: S,
+      width: y,
       x: a,
       y: r
     };
@@ -2119,7 +2192,7 @@ let p = class extends N {
       });
     else {
       const s = this.focusModes.find(
-        (u) => u.value === this.cropSize.focusMode
+        (f) => f.value === this.cropSize.focusMode
       )?.auto;
       let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, n = this.cropSize.x, l = this.cropSize.y;
       e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (n = 0, l = 0), s ? await this.handleRequestAutoCropSuggestion({
@@ -2135,40 +2208,19 @@ let p = class extends N {
         keepAspectRatio: a,
         x: n,
         y: l
-      }, this.asset || (e && e !== "free" ? this.upsertTransformation({
-        key: c.Crop,
-        value: {
-          mode: e
-        }
-      }) : this.transformations = this.transformations.filter(
-        (u) => u.key !== c.Crop
-      ));
+      };
     }
   }
   onCropFocusModeChange(t) {
-    const { mode: e } = t.detail, i = this.focusModes.find((s) => s.value === e)?.auto;
-    if (i && this.selectedFormat?.url ? this.handleRequestAutoCropSuggestion({
+    const { mode: e } = t.detail;
+    this.focusModes.find((s) => s.value === e)?.auto && this.selectedFormat?.url ? this.handleRequestAutoCropSuggestion({
       focusMode: e,
       height: this.cropSize.height,
       width: this.cropSize.width
     }) : this.cropSize = {
       ...this.cropSize,
       focusMode: e
-    }, !this.asset) {
-      const { height: s, unit: a, width: r, x: n, y: l } = this.cropSize;
-      (s || r) && this.upsertTransformation({
-        key: c.Crop,
-        value: {
-          focusMode: e,
-          height: s,
-          isFocusModeAuto: i ?? !1,
-          unit: a,
-          width: r,
-          x: n,
-          y: l
-        }
-      });
-    }
+    };
   }
   async onCropChange(t) {
     const e = this.cropSize.unit;
@@ -2180,14 +2232,14 @@ let p = class extends N {
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
       ), r = a * 100 / this.selectedFormat.height, n = s * 100 / this.selectedFormat.width;
-      let l = this.cropSize.x, u = this.cropSize.y;
-      l + n > 100 && (l = 100 - n), u + r > 100 && (u = 100 - r);
-      let S = this.cropSize.cropMode;
+      let l = this.cropSize.x, f = this.cropSize.y;
+      l + n > 100 && (l = 100 - n), f + r > 100 && (f = 100 - r);
+      let y = this.cropSize.cropMode;
       this.cropModes.find(
-        (z) => z.value === S
-      )?.auto && (S = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = n, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
+        (S) => S.value === y
+      )?.auto && (y = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = n, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
         ...this.cropSize,
-        cropMode: S,
+        cropMode: y,
         height: a,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: r,
@@ -2197,7 +2249,7 @@ let p = class extends N {
         unit: o.AspectRatio,
         width: s,
         x: l,
-        y: u
+        y: f
       };
     } else {
       const i = this.selectedFormat ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.selectedFormat ? t.detail.width * 100 / this.selectedFormat.width : 100;
@@ -2205,7 +2257,7 @@ let p = class extends N {
       a + s > 100 && (a = 100 - s), r + i > 100 && (r = 100 - i);
       let n = this.cropSize.cropMode;
       const l = this.cropModes.find(
-        (u) => u.value === n
+        (f) => f.value === n
       )?.auto;
       (t.detail.breakAspectRatio || l) && (n = "free"), t.detail.silent ? (this.cropSize.cropMode = n, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = r) : this.cropSize = {
         ...this.cropSize,
@@ -2220,26 +2272,10 @@ let p = class extends N {
         y: r
       };
     }
-    if (e !== this.cropSize.unit && (this.cropSize = {
+    e !== this.cropSize.unit && (this.cropSize = {
       ...this.cropSize,
       cropMode: "free"
-    }, this.onCropChanged()), !this.asset && !t.detail.silent) {
-      const { focusMode: i, height: s, unit: a, width: r, x: n, y: l } = this.cropSize, u = this.focusModes.find(
-        (S) => S.value === i
-      )?.auto ?? !1;
-      (s || r) && this.upsertTransformation({
-        key: c.Crop,
-        value: {
-          focusMode: i,
-          height: s,
-          isFocusModeAuto: u,
-          unit: a,
-          width: r,
-          x: n,
-          y: l
-        }
-      });
-    }
+    }, this.onCropChanged());
   }
   async onCropChanged() {
     this.focusModes.find(
@@ -2251,22 +2287,40 @@ let p = class extends N {
     });
   }
   onCropApply(t) {
+    if (this.preResetTransformations = void 0, this.lastAction = c.Crop, !this.asset) {
+      const { focusMode: l, height: f, unit: y, width: m, x: S, y: C } = this.cropSize, u = this.focusModes.find(
+        ($) => $.value === l
+      )?.auto ?? !1;
+      (f || m) && this.upsertTransformation({
+        key: c.Crop,
+        value: {
+          focusMode: l,
+          height: f,
+          isFocusModeAuto: u,
+          unit: y,
+          width: m,
+          x: Number.isFinite(S) ? S : void 0,
+          y: Number.isFinite(C) ? C : void 0
+        }
+      });
+      return;
+    }
     const { height: e, mode: i, unit: s, width: a } = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = c.Crop, !this.cropperElement || !this.selectedFormat)
+    if (!this.cropperElement || !this.selectedFormat)
       return;
     const r = this.cropSize.focusMode, n = this.focusModes.find(
       (l) => l.value === r
     )?.auto ?? !1;
     if (e && a && s) {
-      let l = a, u = e;
-      if (s === o.AspectRatio && (l = this.cropSize.percentageWidth * this.selectedFormat.width / 100, u = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
+      let l = a, f = e;
+      if (s === o.AspectRatio && (l = this.cropSize.percentageWidth * this.selectedFormat.width / 100, f = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
         this.transformations = [
           ...this.transformations,
           {
             key: c.Crop,
             value: {
               focusMode: r,
-              height: u,
+              height: f,
               isFocusModeAuto: n,
               mode: i,
               width: l
@@ -2274,19 +2328,19 @@ let p = class extends N {
           }
         ];
       else {
-        const S = this.cropSize.x / 100 * this.selectedFormat.width, f = this.cropSize.y / 100 * this.selectedFormat.height;
+        const y = this.cropSize.x / 100 * this.selectedFormat.width, m = this.cropSize.y / 100 * this.selectedFormat.height;
         this.transformations = [
           ...this.transformations,
           {
             key: c.Crop,
             value: {
               focusMode: r,
-              height: u,
+              height: f,
               isFocusModeAuto: n,
               unit: s,
               width: l,
-              x: S,
-              y: f
+              x: y,
+              y: m
             }
           }
         ];
@@ -2326,8 +2380,10 @@ let p = class extends N {
         unit: t.detail.unit,
         width: Math.max(t.detail.width, 0)
       };
-    if (!this.asset) {
-      const { height: e, unit: i, width: s } = this.resizeSize;
+  }
+  onResizeApply(t) {
+    const { height: e, unit: i, width: s } = t.detail;
+    if (this.preResetTransformations = void 0, this.lastAction = c.Resize, !this.asset) {
       (e || s) && this.upsertTransformation({
         key: c.Resize,
         value: {
@@ -2336,13 +2392,10 @@ let p = class extends N {
           width: s
         }
       });
+      return;
     }
-  }
-  onResizeApply(t) {
     if (!this.selectedFormat)
       return;
-    const { height: e, unit: i, width: s } = t.detail;
-    this.preResetTransformations = void 0, this.lastAction = c.Resize;
     const a = this.selectedFormat.width || this.defaultSize.width, r = this.selectedFormat.height || this.defaultSize.height;
     let n = s, l = e;
     this.resizeSize.unit !== i ? (n = a, l = r) : i === o.AspectRatio && (n = Math.round(s / e * r), l = r), this.transformations = [
@@ -2358,20 +2411,22 @@ let p = class extends N {
     ];
   }
   onRotationChange(t) {
-    this.rotation = t.detail, this.asset || (this.rotation ? this.upsertTransformation({
-      key: c.Rotate,
-      value: {
-        rotation: this.rotation
-      }
-    }) : this.transformations = this.transformations.filter(
-      (e) => e.key !== c.Rotate
-    ));
+    this.rotation = t.detail;
   }
   onRotationApply(t) {
-    if (!this.selectedFormat)
-      return;
     const e = t.detail;
-    this.preResetTransformations = void 0, this.lastAction = c.Rotate, this.transformations = [
+    if (this.preResetTransformations = void 0, this.lastAction = c.Rotate, !this.asset) {
+      e ? this.upsertTransformation({
+        key: c.Rotate,
+        value: {
+          rotation: e
+        }
+      }) : this.transformations = this.transformations.filter(
+        (i) => i.key !== c.Rotate
+      );
+      return;
+    }
+    this.selectedFormat && (this.transformations = [
       ...this.transformations,
       {
         key: c.Rotate,
@@ -2379,7 +2434,7 @@ let p = class extends N {
           rotation: e
         }
       }
-    ];
+    ]);
   }
   onQualityChange(t) {
     const e = t.detail;
@@ -2447,33 +2502,33 @@ let p = class extends N {
     this.selectedProxy = t ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "", this.transformations = [], this.frozenIndex = -1, this.syncQuality();
   }
   render() {
-    return x`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${_(
+    return b`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${E(
       !this.hideHeader,
-      () => x`<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, () => x`<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>`,
+      () => b`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${E(this.canReset, () => b`<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>`,
       () => Ut
     )}
-      ${_(
+      ${E(
       !this.noFormat,
-      () => x`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} .items=${this.formats} ?loading=${this.loading && this.lastAction === c.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
+      () => b`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} .items=${this.formats} ?loading=${this.loading && this.lastAction === c.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
     )}
-      ${_(
+      ${E(
       !this.noCrop,
-      () => x`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?can-apply=${!!this.asset} ?loading=${this.loading && this.lastAction === c.Crop} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
+      () => b`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === c.Crop} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
     )}
-      ${_(
+      ${E(
       !this.noResize,
-      () => x`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?can-apply=${!!this.asset} ?loading=${this.loading && this.lastAction === c.Resize} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
+      () => b`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === c.Resize} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
     )}
-      ${_(
+      ${E(
       !this.noRotate,
-      () => x`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === c.Rotate} ?can-apply=${!!this.asset} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} 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" ?can-apply=${!!this.asset} ?loading=${this.loading && this.lastAction === c.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${_(
+      () => b`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === c.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`
+    )}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === c.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${E(
       !this.noMetadata,
-      () => x`<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>`
+      () => b`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`
     )}
-      ${_(
+      ${E(
       this.useCustomExtension,
-      () => x`<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>`
+      () => b`<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>`;
   }
 };
@@ -2482,11 +2537,11 @@ p.dependencies = {
   "cx-asset-link-format-crop": g,
   "cx-asset-link-format-extension": V,
   "cx-asset-link-format-metadata": W,
-  "cx-asset-link-format-proxy": M,
+  "cx-asset-link-format-proxy": _,
   "cx-asset-link-format-quality": F,
-  "cx-asset-link-format-resize": b,
-  "cx-asset-link-format-rotation": E,
-  "cx-button": G,
+  "cx-asset-link-format-resize": w,
+  "cx-asset-link-format-rotation": M,
+  "cx-button": j,
   "cx-space": D,
   "cx-typography": T
 };
@@ -2593,24 +2648,24 @@ d([
   v()
 ], p.prototype, "preResetTransformations", 2);
 d([
-  C("transformations")
+  R("transformations")
 ], p.prototype, "handleTransformationsChange", 1);
 d([
-  C("selectedProxy")
+  R("selectedProxy")
 ], p.prototype, "handleSelectedProxyChange", 1);
 d([
-  C("loading")
+  R("loading")
 ], p.prototype, "handleLoadingChange", 1);
 p = d([
   q("cx-asset-link-format")
 ], p);
 export {
   p as C,
-  dt as D,
-  _t as F,
+  ut as D,
+  Pt as F,
   X as O,
   xi as a,
-  Pt as b,
+  _t as b,
   vt as c,
   gi as d,
   kt as e,
@@ -2619,9 +2674,9 @@ export {
   Si as h,
   yi as i,
   Tt as j,
-  st as k,
+  at as k,
   Ct as l,
-  $t as m,
+  Rt as m,
   Mt as n,
   Xt as o,
   Kt as u