@orangelogic/design-system 2.133.0 → 2.135.0

package/library/chunks/asset-link-format.BBWyY5fn.js

@@ -0,0 +1,2627 @@
+import "../components/cropper.js";
+import { C as G } from "./button.3giRMk79.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 Tt, S as Nt, b as Lt, c as Ot } from "./endpoints.tU0_RZ_7.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 { L as O } from "./i18n.DJikbkDK.js";
+import { a as qt } from "./string.CjJ09HK3.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 zt, c as At } from "./number.B4PQLJIg.js";
+import { b as et } from "./transformation.c-RS37zA.js";
+import { r as v } from "./state.CSDxrqLd.js";
+import { n as _ } from "./when.Dr1es41R.js";
+import Z from "../components/details.js";
+import jt from "../components/divider.js";
+import { C as Y } from "./icon.DnBh6-56.js";
+import { C as ut } from "./icon-button.xobY-9OH.js";
+import { C as mt } from "./input.GUw7x9tK.js";
+import { C as rt } from "./option.uHye0aDT.js";
+import nt from "../components/select.js";
+import { c as Vt } 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 It from "../components/tooltip.js";
+import Gt from "../components/button-group.js";
+import { C as Qt } from "./checkbox.B-2O517F.js";
+function Kt(t) {
+  return t && t.length ? Bt(t) : [];
+}
+function Xt(t) {
+  return typeof t == "object" && t !== null && "URI" in t;
+}
+const Zt = {
+  artist: "Artist",
+  color: "Color",
+  createDate: "CreateDate",
+  directParentFolderIdentifier: "DirectParentFolderIdentifier",
+  docSubType: "DocSubType",
+  docType: "DocType",
+  editDate: "EditDate",
+  fileExtension: "Fileextension",
+  keyword: "Keyword",
+  mediaDate: "MediaDate",
+  mediaNumber: "MediaNumber",
+  nativeKeyword: "NativeKeyword",
+  orientation: "Orientation",
+  parentFolderIdentifier: "ParentFolderIdentifier",
+  path: "Path",
+  photographer: "Photographer",
+  purpose: "Purpose",
+  recordId: "RecordID",
+  systemIdentifier: "SystemIdentifier",
+  text: "Text",
+  title: "Title"
+}, Yt = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
+function pt(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)}`);
+  return s.length > 1 ? `(${s.join(" OR ")})` : s[0] ?? "";
+}
+function Jt(t, e) {
+  return (Array.isArray(e) ? e : [e]).map((s) => `${t}${s.operator}${s.value}`).join(" AND ");
+}
+function te(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 [r, l] of Object.entries(
+        a
+      ))
+        e.push(wt(r, l));
+      continue;
+    }
+    const n = Zt[s];
+    if (n) {
+      if (Yt.has(s)) {
+        e.push(
+          Jt(n, a)
+        );
+        continue;
+      }
+      if (s === "color") {
+        e.push(`${n}:${a}`);
+        continue;
+      }
+      if (s === "parentFolderIdentifier") {
+        const r = Array.isArray(a) ? a : [a];
+        if (r.length === 0)
+          continue;
+        const l = [
+          ...r.map((u) => `ParentFolderIdentifier:${pt(String(u))}`),
+          ...r.map((u) => `ParentAlbumIdentifier:${pt(String(u))}`)
+        ];
+        e.push(`(${l.join(" OR ")})`);
+        continue;
+      }
+      e.push(wt(n, a));
+    }
+  }
+  return e.join(" AND ");
+}
+function it(t) {
+  if ("and" in t)
+    return t.and.map(it).filter(Boolean).join(" AND ");
+  if ("or" in t) {
+    const e = t.or.map(it).filter(Boolean);
+    return e.length > 1 ? `(${e.join(" OR ")})` : e[0] ?? "";
+  }
+  if ("not" in t) {
+    const e = it(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", Ht = "CoreField.TitleWithFallback", at = "CoreField.OriginalFileName", ot = "CoreField.UpdatedFileName", X = "CoreField.OriginalPreview", ct = {
+  DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
+  FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
+  ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
+}, Wt = {
+  [dt]: ct.DEFAULT_VIEW_SIZE,
+  [Ht]: ct.FIELD_TITLE_WITH_FALLBACK,
+  [X]: ct.ORIGINAL_VIEW_SIZE
+}, se = Object.fromEntries(
+  Object.entries(Wt).map(([t, e]) => [
+    e,
+    t
+  ])
+);
+function ae(t) {
+  return Wt[t] ?? t;
+}
+function Ft(t) {
+  const e = {};
+  for (const [i, s] of Object.entries(t)) {
+    const a = se[i] ?? i;
+    e[a] = s;
+  }
+  return e;
+}
+async function Dt({
+  countPerPage: t,
+  fields: e,
+  getPermanentAssetsPaths: i,
+  isSiteBuilder: s,
+  pageNumber: a,
+  query: n,
+  securityByPassToken: r,
+  siteUrl: l,
+  sort: u,
+  token: S,
+  useSession: f
+}) {
+  const A = e?.map(ae);
+  try {
+    return (await P.request({
+      baseURL: l,
+      headers: S ? { Authorization: `Bearer ${S}` } : void 0,
+      method: "GET",
+      params: {
+        CountPerPage: t,
+        Fields: Kt(A),
+        Format: "json",
+        GetPermanentAssetsPaths: i || void 0,
+        PageNumber: a,
+        Query: it(n),
+        SecurityByPassToken: r || void 0,
+        Sort: u || void 0,
+        UseSession: f || 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
+        })
+      ],
+      url: s ? Tt.SEARCH_ASSETS : Nt["4.0"]
+    })).data;
+  } catch {
+    return { items: [], sort: "", totalCount: 0 };
+  }
+}
+async function oe({
+  assetId: t,
+  extension: e,
+  format: i,
+  siteUrl: s,
+  token: a,
+  transformations: n,
+  useSession: r
+}) {
+  try {
+    return (await P.request({
+      baseURL: s,
+      method: "GET",
+      params: {
+        SourceAssetFormat: i,
+        SourceAssetRecordID: t,
+        TargetExtension: qt(e),
+        Token: a || void 0,
+        Transformations: n,
+        UseSession: r || void 0
+      },
+      /**
+       * https://link.orangelogic.com/Tasks/41S1XH
+       */
+      timeout: 3e5,
+      // 5 minutes
+      url: Et.GET_TRANSFORM_ASSET_LINK
+    })).data;
+  } catch {
+    return null;
+  }
+}
+const re = 50;
+function ne(t, e) {
+  const i = [];
+  for (let s = 0; s < t.length; s += e)
+    i.push(t.slice(s, s + e));
+  return i;
+}
+async function gi({
+  extraFields: t,
+  getPermanentAssetsPaths: e,
+  isSiteBuilder: i,
+  recordIds: s,
+  securityByPassToken: a,
+  token: n
+}) {
+  if (!Array.isArray(s) || s.length === 0)
+    return { facets: [], items: [], totalCount: 0 };
+  const r = t?.filter((m) => m && typeof m == "string") ?? [], l = [
+    ...r,
+    X,
+    ot,
+    at,
+    ee,
+    ie,
+    st
+  ], u = ne(s, re), S = await Promise.all(
+    u.map(
+      (m) => Dt({
+        countPerPage: m.length,
+        fields: l,
+        getPermanentAssetsPaths: e,
+        isSiteBuilder: i,
+        pageNumber: 1,
+        query: { recordId: m },
+        securityByPassToken: a,
+        token: n
+      })
+    )
+  ), f = new Map(s.map((m, R) => [m, R])), A = 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),
+      ...r.reduce(
+        (Q, b) => (Q[b] = w(m, b), Q),
+        {}
+      )
+    };
+  }).sort(
+    (m, R) => (f.get(m.recordId) ?? 1 / 0) - (f.get(R.recordId) ?? 1 / 0)
+  ), $ = S.reduce(
+    (m, R) => m + R.totalCount,
+    0
+  );
+  return { facets: [], items: A, totalCount: $ };
+}
+function w(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 : "";
+}
+async function xi({
+  countPerPage: t,
+  directParentFolderIdentifier: e,
+  extraFields: i,
+  getPermanentAssetsPaths: s,
+  isSiteBuilder: a,
+  limitedDocTypes: n,
+  pageNumber: r,
+  parentFolderIdentifier: l,
+  searchTerm: u,
+  securityByPassToken: S,
+  sortOrder: f,
+  token: A
+}) {
+  if (!e && !l)
+    return { facets: [], items: [], totalCount: 0 };
+  const $ = (i?.filter((b) => b && typeof b == "string") ?? []).map((b) => b.replace("%20", " ")), m = {
+    directParentFolderIdentifier: e,
+    parentFolderIdentifier: l,
+    ...n.length > 0 ? { docType: [bt.Image, bt.Audio] } : {}
+  }, R = await Dt({
+    countPerPage: t,
+    fields: [
+      ...$,
+      Ht,
+      dt,
+      X,
+      Rt,
+      Pt,
+      _t,
+      Ct,
+      vt,
+      Mt,
+      $t,
+      kt,
+      st,
+      at,
+      ot
+    ],
+    getPermanentAssetsPaths: s,
+    isSiteBuilder: a,
+    pageNumber: r,
+    query: m,
+    securityByPassToken: S,
+    sort: void 0,
+    token: A
+  }), Q = R.items.map((b) => {
+    let K = w(b, kt), lt = w(b, ot), gt = w(b, dt);
+    K && !K.startsWith(".") && (K = "." + K), lt === "" && (lt = w(b, at)), K.toLowerCase() === ".gif" && (gt = w(b, X));
+    const xt = w(b, st);
+    return {
+      docSubType: w(b, Mt),
+      docType: w(b, vt) || "",
+      extension: K,
+      height: w(b, _t) || "0",
+      id: xt,
+      identifier: w(b, $t),
+      imageUrl: gt,
+      name: lt,
+      originalUrl: w(b, X),
+      recordId: xt,
+      size: w(b, Ct) || "0 MB",
+      tags: w(b, Rt),
+      width: w(b, Pt) || "0",
+      ...$.reduce(
+        (yt, St) => (yt[St] = w(b, St), yt),
+        {}
+      )
+    };
+  });
+  return {
+    facets: [],
+    items: Q,
+    totalCount: R.totalCount
+  };
+}
+async function he({
+  autoCropMode: t,
+  cropHeight: e,
+  cropWidth: i,
+  imageUrl: s,
+  useSession: a
+}) {
+  try {
+    return (await P.request({
+      method: "GET",
+      params: {
+        AutoCropMode: t,
+        CropHeight: e,
+        CropWidth: i,
+        ImageUrl: s && new URL(s, window.location.origin).href,
+        UseSession: a || void 0
+      },
+      responseType: "json",
+      timeout: 3e5,
+      // 5 minutes
+      transformResponse: [
+        ...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [],
+        (r) => ({
+          height: r.cropHeight,
+          width: r.cropWidth,
+          x: r.cropX,
+          y: r.cropY
+        })
+      ],
+      url: Et.GET_CROP_ZONE_SUGGESTION
+    })).data;
+  } catch {
+    return null;
+  }
+}
+async function yi({
+  assetRecordId: t,
+  siteUrl: e,
+  token: i,
+  useSession: s
+}) {
+  try {
+    return (await P.request({
+      baseURL: e,
+      method: "GET",
+      params: {
+        RecordId: t,
+        Token: i,
+        UseSession: s || void 0
+      },
+      responseType: "json",
+      transformResponse: [
+        ...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [],
+        (n) => !n || typeof n != "object" ? [] : n.proxies?.map((r) => ({
+          cdnName: r.cdnName,
+          extension: r.extension,
+          formatHeight: r.formatHeight,
+          formatWidth: r.formatWidth,
+          height: r.height,
+          permanentLink: r.permanentLink,
+          proxyLabel: r.proxyLabel,
+          proxyName: r.proxyName,
+          width: r.width
+        })) ?? []
+      ],
+      url: Ot
+    })).data;
+  } catch {
+    return [];
+  }
+}
+async function Si({
+  siteUrl: t
+} = {}) {
+  try {
+    return (await P.request({
+      baseURL: t,
+      method: "GET",
+      responseType: "json",
+      transformResponse: [
+        ...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [],
+        (i) => !i || typeof i != "object" ? {
+          formatsByDocType: {
+            Audio: {},
+            Image: {},
+            Multimedia: {},
+            Video: {}
+          }
+        } : {
+          formatsByDocType: i.formatsByDocType ?? {}
+        }
+      ],
+      url: Lt
+    })).data;
+  } catch {
+    return { formatsByDocType: {} };
+  }
+}
+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) => {
+  for (var a = s > 1 ? void 0 : s ? de(e, i) : e, n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (a = (s ? r(e, i, a) : r(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 = {
+      [o.Pixel]: {
+        height: 0,
+        percentageHeight: 100,
+        percentageWidth: 100,
+        unit: o.Pixel,
+        width: 0,
+        x: 0,
+        y: 0
+      },
+      [o.AspectRatio]: {
+        height: 1,
+        percentageHeight: 100,
+        percentageWidth: 100,
+        unit: o.AspectRatio,
+        width: 1,
+        x: 0,
+        y: 0
+      }
+    }, this.loading = !1, this.cropModes = [], this.focusModes = [], this.focusMode = "manual", this.cropMode = "free", this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
+  }
+  get selectedMode() {
+    return this.cropModes.find((t) => t.value === this.cropMode);
+  }
+  async handleCropModeChange() {
+    if (typeof this.cropMode == "string" && /^\d+:\d+$/.test(this.cropMode)) {
+      const [t, e] = this.cropMode.split(":").map(Number);
+      this.aspectRatio = t / e;
+      return;
+    }
+    if (this.keepAspectRatio) {
+      if (this.unit === o.Pixel && this.width && this.height) {
+        this.aspectRatio = this.width / this.height;
+        return;
+      } else if (this.unit === o.AspectRatio && this.ratioWidth && this.ratioHeight) {
+        this.aspectRatio = this.ratioWidth / this.ratioHeight;
+        return;
+      }
+    }
+    if (this.maxWidth && this.maxHeight && Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight)) {
+      this.aspectRatio = this.maxWidth / this.maxHeight;
+      return;
+    }
+    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
+        }
+      });
+    }
+  }
+  handleWidthChange(t) {
+    if (!t.target.value) {
+      this.invalidWidth = !0;
+      return;
+    }
+    this.invalidWidth = !1;
+    let e = Number(t.target.value);
+    this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
+    let i = this.unit === o.Pixel ? this.height : this.ratioHeight, s = !1;
+    this.keepAspectRatio && (i = Math.round(e / this.aspectRatio), this.unit === o.Pixel && i > this.maxHeight && (i = this.maxHeight, s = !0)), this.invalidHeight = !1, this.emit("cx-asset-link-format-crop-change", {
+      detail: {
+        breakAspectRatio: s,
+        height: i,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: this.unit,
+        width: e
+      }
+    });
+  }
+  handleHeightChange(t) {
+    if (!t.target.value) {
+      this.invalidHeight = !0;
+      return;
+    }
+    this.invalidHeight = !1;
+    let e = Number(t.target.value);
+    this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
+    let i = this.unit === o.Pixel ? this.width : this.ratioWidth, s = !1;
+    this.keepAspectRatio && (i = Math.round(e * this.aspectRatio), this.unit === o.Pixel && i > this.maxWidth && (i = this.maxWidth, s = !0)), this.invalidWidth = !1, this.emit("cx-asset-link-format-crop-change", {
+      detail: {
+        breakAspectRatio: s,
+        height: e,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: this.unit,
+        width: i
+      }
+    });
+  }
+  onCropModeChange(t) {
+    const e = t.target.value, i = this.cropModes.find((s) => s.value === e)?.auto;
+    if (e === "free")
+      this.selectedMode?.auto && this.emit("cx-asset-link-format-crop-change", {
+        detail: {
+          height: this.lastAppliedSetting[o.Pixel].height,
+          keepAspectRatio: !1,
+          silent: !0,
+          unit: o.Pixel,
+          width: this.lastAppliedSetting[o.Pixel].width
+        }
+      });
+    else if (!i) {
+      const [s, a] = e.split(":").map(Number);
+      if (this.unit === o.Pixel) {
+        let n = s, r = a;
+        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: r, width: n } = Vt(
+          this.maxWidth,
+          this.maxHeight,
+          s,
+          a
+        )), this.emit("cx-asset-link-format-crop-change", {
+          detail: {
+            height: r,
+            keepAspectRatio: !0,
+            silent: !0,
+            unit: o.Pixel,
+            width: n
+          }
+        });
+      } else
+        this.emit("cx-asset-link-format-crop-change", {
+          detail: {
+            height: a,
+            keepAspectRatio: !0,
+            silent: !0,
+            unit: o.AspectRatio,
+            width: s
+          }
+        });
+    }
+    this.emit("cx-asset-link-format-crop-mode-change", {
+      detail: {
+        mode: e
+      }
+    });
+  }
+  onFocusModeChange(t) {
+    const e = t.target.value;
+    this.emit("cx-asset-link-format-crop-focus-mode-change", {
+      detail: {
+        mode: e
+      }
+    });
+  }
+  /**
+   * Handles the change of the unit of measurement for the crop settings.
+   * When the unit is changed to Aspect Ratio, it emits an event with the last applied settings for Aspect Ratio.
+   * When the unit is changed to Pixels, it emits an event with the last applied settings for Pixels.
+   * This allows the parent component to update the crop settings accordingly.
+   */
+  onUnitChange(t) {
+    t.target.value === o.AspectRatio ? this.emit("cx-asset-link-format-crop-change", {
+      detail: {
+        height: this.lastAppliedSetting[o.AspectRatio].height,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: o.AspectRatio,
+        width: this.lastAppliedSetting[o.AspectRatio].width
+      }
+    }) : 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.emit("cx-asset-link-format-crop-mode-change", {
+      detail: {
+        mode: "free"
+      }
+    });
+  }
+  handleInputChange(t) {
+    t.stopPropagation(), this.emit("cx-asset-link-format-crop-changed");
+  }
+  handleApply() {
+    this.loading || this.emit("cx-asset-link-format-crop-apply", {
+      detail: {
+        height: this.height,
+        unit: this.unit,
+        width: this.width
+      }
+    });
+  }
+  /**
+   * Handles showing the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only shown when the user interacts with the base element.
+   */
+  onShowDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  /**
+   * Handles hiding the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only hidden when the user interacts with the base element.
+   */
+  onHideDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  handleAspectRatioClick() {
+    this.keepAspectRatio && this.cropMode !== "free" && this.emit("cx-asset-link-format-crop-mode-change", {
+      detail: {
+        mode: "free"
+      }
+    }), this.emit("cx-asset-link-format-crop-change", {
+      detail: {
+        height: this.unit === o.Pixel ? this.height : this.ratioHeight,
+        keepAspectRatio: !this.keepAspectRatio,
+        unit: this.unit,
+        width: this.unit === o.Pixel ? this.width : this.ratioWidth
+      }
+    });
+  }
+  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({
+      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>`
+    )}
+          ${_(
+      e.length > 0,
+      () => x`<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>`
+    )}</cx-select><cx-space spacing="small"><div class="crop__input-group"><cx-input data-testid="cx-asset-link-format-crop-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-change=${this.handleInputChange} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
+                W
+              </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-crop-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${I({
+      color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
+    })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} ?disabled=${this.loading} @cx-change=${this.handleInputChange} @cx-input=${this.handleHeightChange} required><cx-typography slot="prefix" variant="body3" part="input-label">
+                H
+              </cx-typography></cx-input></div><cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${_(
+      this.focusModes.length > 0,
+      () => x`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${I({
+        width: "100%"
+      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${tt(
+        this.focusModes,
+        (i) => i.value,
+        ({ label: i, value: s }) => x`<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({
+      marginLeft: "auto"
+    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
+  }
+};
+g.styles = [U, ce];
+g.dependencies = {
+  "cx-button": G,
+  "cx-details": Z,
+  "cx-divider": jt,
+  "cx-icon": Y,
+  "cx-icon-button": ut,
+  "cx-input": mt,
+  "cx-option": rt,
+  "cx-select": nt,
+  "cx-space": D,
+  "cx-typography": T
+};
+y([
+  J(".details")
+], g.prototype, "base", 2);
+y([
+  h({ reflect: !0, type: Boolean })
+], g.prototype, "open", 2);
+y([
+  h({ reflect: !0, type: Number })
+], g.prototype, "width", 2);
+y([
+  h({ reflect: !0, type: Number })
+], g.prototype, "height", 2);
+y([
+  h({ attribute: "max-width", reflect: !0, type: Number })
+], g.prototype, "maxWidth", 2);
+y([
+  h({ attribute: "max-height", reflect: !0, type: Number })
+], g.prototype, "maxHeight", 2);
+y([
+  h({ attribute: "ratio-width", reflect: !0, type: Number })
+], g.prototype, "ratioWidth", 2);
+y([
+  h({ attribute: "ratio-height", reflect: !0, type: Number })
+], g.prototype, "ratioHeight", 2);
+y([
+  h({ attribute: "percentage-width", reflect: !0, type: Number })
+], g.prototype, "percentageWidth", 2);
+y([
+  h({ attribute: "percentage-height", reflect: !0, type: Number })
+], g.prototype, "percentageHeight", 2);
+y([
+  h({ reflect: !0, type: String })
+], g.prototype, "unit", 2);
+y([
+  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([
+  h({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], g.prototype, "lastAppliedSetting", 2);
+y([
+  h({ reflect: !0, type: Boolean })
+], g.prototype, "loading", 2);
+y([
+  h({ attribute: "crop-modes", reflect: !1, type: Array })
+], g.prototype, "cropModes", 2);
+y([
+  h({ attribute: "focus-modes", reflect: !1, type: Object })
+], g.prototype, "focusModes", 2);
+y([
+  h({ attribute: "focus-mode", reflect: !0, type: String })
+], g.prototype, "focusMode", 2);
+y([
+  h({ attribute: "crop-mode", reflect: !0, type: String })
+], g.prototype, "cropMode", 2);
+y([
+  h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], g.prototype, "keepAspectRatio", 2);
+y([
+  v()
+], g.prototype, "invalidWidth", 2);
+y([
+  v()
+], g.prototype, "invalidHeight", 2);
+y([
+  v()
+], g.prototype, "aspectRatio", 2);
+y([
+  C("cropMode", { waitUntilFirstUpdate: !0 }),
+  C("maxWidth", { waitUntilFirstUpdate: !0 }),
+  C("maxHeight", { waitUntilFirstUpdate: !0 }),
+  C("keepAspectRatio")
+], g.prototype, "handleCropModeChange", 1);
+y([
+  C("open")
+], g.prototype, "handleOpenChange", 1);
+g = y([
+  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) => {
+  for (var a = s > 1 ? void 0 : s ? fe(e, i) : e, n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && me(e, i, a), a;
+};
+let V = class extends N {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.value = "", this.items = [];
+  }
+  handleExtensionChange(t) {
+    const e = t.target.value;
+    this.emit("cx-asset-link-format-extension-change", {
+      detail: e
+    });
+  }
+  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(
+      this.items,
+      (t) => t.value,
+      (t) => x`<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-space": D,
+  "cx-typography": T
+};
+ft([
+  h({ reflect: !0, type: String })
+], V.prototype, "value", 2);
+ft([
+  h({ reflect: !1, type: Array })
+], V.prototype, "items", 2);
+V = ft([
+  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) => {
+  for (var a = s > 1 ? void 0 : s ? ye(e, i) : e, n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && xe(e, i, a), a;
+};
+let M = class extends N {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
+  }
+  handleValueChange() {
+    this.scopedValue = this.value;
+  }
+  handleOpenChange() {
+    this.open || (this.scopedValue = this.value);
+  }
+  handleProxyChange(t) {
+    const e = t.target.value;
+    this.scopedValue = e;
+  }
+  /**
+   * Handles the application of the selected proxy format.
+   * This method emits a custom event with the selected proxy format when the "Apply" button is clicked.
+   * It prevents further actions if the component is currently loading.
+   */
+  handleApply() {
+    if (this.loading)
+      return;
+    const t = this.items.find(
+      (e) => e.id === this.scopedValue
+    );
+    t && this.emit("cx-asset-link-format-proxy-change", {
+      detail: t
+    });
+  }
+  /**
+   * Handles showing the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only shown when the user interacts with the base element.
+   */
+  onShowDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  /**
+   * Handles hiding the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only hidden when the user interacts with the base element.
+   */
+  onHideDetails(t) {
+    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(
+      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({
+      "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,
+  "cx-details": Z,
+  "cx-icon": Y,
+  "cx-option": rt,
+  "cx-select": nt,
+  "cx-space": D,
+  "cx-typography": T
+};
+H([
+  J(".details")
+], M.prototype, "base", 2);
+H([
+  h({ reflect: !0, type: Boolean })
+], M.prototype, "open", 2);
+H([
+  h({ reflect: !0, type: String })
+], M.prototype, "value", 2);
+H([
+  h({ reflect: !1, type: Array })
+], M.prototype, "items", 2);
+H([
+  h({ reflect: !0, type: Boolean })
+], M.prototype, "loading", 2);
+H([
+  v()
+], M.prototype, "scopedValue", 2);
+H([
+  C("value")
+], M.prototype, "handleValueChange", 1);
+H([
+  C("open", { waitUntilFirstUpdate: !0 })
+], M.prototype, "handleOpenChange", 1);
+M = H([
+  q("cx-asset-link-format-proxy")
+], M);
+const Se = L`cx-details::part(base){border-bottom-width:0}`;
+var be = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, B = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ze(e, i) : e, n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && be(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;
+  }
+  /**
+   * A computed property that checks if the current quality value is invalid.
+   * The value is considered invalid if it is not a number, less than 1, greater than 100, or equal to the current value.
+   * @return {boolean} True if the value is invalid, false otherwise.
+   */
+  get invalidValue() {
+    return isNaN(Number(this.scopedValue)) || Number(this.scopedValue) < 1 || Number(this.scopedValue) > 100 || this.value === this.scopedValue;
+  }
+  handleValueChange() {
+    this.scopedValue = this.value;
+  }
+  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
+    });
+  }
+  /**
+   * Handles the application of the input quality.
+   * This method emits a custom event with the input quality when the "Apply" button is clicked.
+   * It prevents further actions if the component is currently loading.
+   */
+  handleApply() {
+    this.loading || this.emit("cx-asset-link-format-quality-change", {
+      detail: Number(this.scopedValue)
+    });
+  }
+  /**
+   * Handles showing the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only shown when the user interacts with the base element.
+   */
+  onShowDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  /**
+   * Handles hiding the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only hidden when the user interacts with the base element.
+   */
+  onHideDetails(t) {
+    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({
+      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>`;
+  }
+};
+F.styles = [U, Se];
+F.dependencies = {
+  "cx-button": G,
+  "cx-details": Z,
+  "cx-icon": Y,
+  "cx-input": mt,
+  "cx-space": D,
+  "cx-tooltip": It,
+  "cx-typography": T
+};
+B([
+  J(".details")
+], F.prototype, "base", 2);
+B([
+  h({ reflect: !0, type: Boolean })
+], F.prototype, "open", 2);
+B([
+  h({ reflect: !0, type: Number })
+], F.prototype, "value", 2);
+B([
+  h({ reflect: !0, type: Boolean })
+], F.prototype, "loading", 2);
+B([
+  h({ attribute: "can-apply", reflect: !0, type: Boolean })
+], F.prototype, "canApply", 2);
+B([
+  v()
+], F.prototype, "scopedValue", 2);
+B([
+  C("value")
+], F.prototype, "handleValueChange", 1);
+F = B([
+  q("cx-asset-link-format-quality")
+], F);
+const Ae = 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) => {
+  for (var a = s > 1 ? void 0 : s ? ve(e, i) : e, n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && we(e, i, a), a;
+};
+let z = 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;
+  }
+  /**
+   * A computed property that checks if the current resize settings match the last applied settings.
+   * This is used to disable the apply button when no changes have been made.
+   * @returns {boolean} True if the current settings match the last applied settings, false otherwise.
+   */
+  get disabledApply() {
+    return this.lastAppliedSetting[this.unit].width === this.width && this.lastAppliedSetting[this.unit].height === this.height;
+  }
+  async handleCropModeChange() {
+    if (this.keepAspectRatio) {
+      if (this.unit === o.Pixel && this.width && this.height) {
+        this.aspectRatio = this.width / this.height;
+        return;
+      } else if (this.unit === o.AspectRatio && this.ratioWidth && this.ratioHeight) {
+        this.aspectRatio = this.ratioWidth / this.ratioHeight;
+        return;
+      }
+    }
+    if (this.maxWidth && this.maxHeight && Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight)) {
+      this.aspectRatio = this.maxWidth / this.maxHeight;
+      return;
+    }
+    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
+        }
+      });
+    }
+  }
+  handleWidthChange(t) {
+    if (!t.target.value) {
+      this.invalidWidth = !0;
+      return;
+    }
+    this.invalidWidth = !1;
+    let e = Number(t.target.value);
+    this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
+    let i = this.unit === o.Pixel ? this.height : this.ratioHeight;
+    this.keepAspectRatio && (i = Math.min(
+      Math.round(e / this.aspectRatio),
+      this.maxHeight
+    ), this.invalidHeight = !1), this.emit("cx-asset-link-format-resize-change", {
+      detail: {
+        height: i,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: this.unit,
+        width: e
+      }
+    });
+  }
+  handleHeightChange(t) {
+    if (!t.target.value) {
+      this.invalidHeight = !0;
+      return;
+    }
+    this.invalidHeight = !1;
+    let e = Number(t.target.value);
+    this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
+    let i = this.unit === o.Pixel ? this.width : this.ratioWidth;
+    this.keepAspectRatio && (i = Math.min(
+      Math.round(e * this.aspectRatio),
+      this.maxWidth
+    ), this.invalidWidth = !1), this.emit("cx-asset-link-format-resize-change", {
+      detail: {
+        height: e,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: this.unit,
+        width: i
+      }
+    });
+  }
+  onUnitChange(t) {
+    t.target.value === o.AspectRatio ? this.emit("cx-asset-link-format-resize-change", {
+      detail: {
+        height: this.lastAppliedSetting[o.AspectRatio].height,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: o.AspectRatio,
+        width: this.lastAppliedSetting[o.AspectRatio].width
+      }
+    }) : 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
+      }
+    });
+  }
+  handleApply() {
+    this.loading || this.emit("cx-asset-link-format-resize-apply", {
+      detail: {
+        height: this.height,
+        unit: this.unit,
+        width: this.width
+      }
+    });
+  }
+  /**
+   * Handles showing the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only shown when the user interacts with the base element.
+   */
+  onShowDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  /**
+   * Handles hiding the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only hidden when the user interacts with the base element.
+   */
+  onHideDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  handleAspectRatioClick() {
+    this.emit("cx-asset-link-format-resize-change", {
+      detail: {
+        height: this.unit === o.Pixel ? this.height : this.ratioHeight,
+        keepAspectRatio: !this.keepAspectRatio,
+        unit: this.unit,
+        width: this.unit === o.Pixel ? this.width : this.ratioWidth
+      }
+    });
+  }
+  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">
+                W
+              </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-resize-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${I({
+      color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
+    })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} @cx-input=${this.handleHeightChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
+                H
+              </cx-typography></cx-input></div><cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${_(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({
+      marginLeft: "auto"
+    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
+  }
+};
+z.styles = [U, Ae];
+z.dependencies = {
+  "cx-button": G,
+  "cx-details": Z,
+  "cx-icon": Y,
+  "cx-icon-button": ut,
+  "cx-input": mt,
+  "cx-option": rt,
+  "cx-select": nt,
+  "cx-space": D,
+  "cx-typography": T
+};
+k([
+  J(".details")
+], z.prototype, "base", 2);
+k([
+  h({ reflect: !0, type: Boolean })
+], z.prototype, "open", 2);
+k([
+  h({ reflect: !0, type: Number })
+], z.prototype, "width", 2);
+k([
+  h({ reflect: !0, type: Number })
+], z.prototype, "height", 2);
+k([
+  h({ attribute: "max-width", reflect: !0, type: Number })
+], z.prototype, "maxWidth", 2);
+k([
+  h({ attribute: "max-height", reflect: !0, type: Number })
+], z.prototype, "maxHeight", 2);
+k([
+  h({ attribute: "ratio-width", reflect: !0, type: Number })
+], z.prototype, "ratioWidth", 2);
+k([
+  h({ attribute: "ratio-height", reflect: !0, type: Number })
+], z.prototype, "ratioHeight", 2);
+k([
+  h({ reflect: !0, type: String })
+], z.prototype, "unit", 2);
+k([
+  h({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], z.prototype, "lastAppliedSetting", 2);
+k([
+  h({ reflect: !0, type: Boolean })
+], z.prototype, "loading", 2);
+k([
+  h({ attribute: "can-apply", reflect: !0, type: Boolean })
+], z.prototype, "canApply", 2);
+k([
+  h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], z.prototype, "keepAspectRatio", 2);
+k([
+  v()
+], z.prototype, "invalidWidth", 2);
+k([
+  v()
+], z.prototype, "invalidHeight", 2);
+k([
+  v()
+], z.prototype, "aspectRatio", 2);
+k([
+  C("cropMode", { waitUntilFirstUpdate: !0 }),
+  C("maxWidth", { waitUntilFirstUpdate: !0 }),
+  C("maxHeight", { waitUntilFirstUpdate: !0 }),
+  C("keepAspectRatio")
+], z.prototype, "handleCropModeChange", 1);
+k([
+  C("open")
+], z.prototype, "handleOpenChange", 1);
+z = k([
+  q("cx-asset-link-format-resize")
+], z);
+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, n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && Ce(e, i, a), a;
+};
+let E = 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;
+  }
+  handleOpenChange() {
+    if (!this.open) {
+      if (!this.canApply)
+        return;
+      this.emit("cx-asset-link-format-rotation-change", {
+        detail: 0
+      });
+    }
+  }
+  handleRotationChange(t) {
+    const e = t.target.value, i = zt(Number(e));
+    (Number(e) > 360 || Number(e) < -360) && (t.target.value = i.toString()), this.emit("cx-asset-link-format-rotation-change", {
+      detail: i
+    });
+  }
+  handleButtonClick(t) {
+    this.emit("cx-asset-link-format-rotation-change", {
+      detail: zt(t)
+    });
+  }
+  handleClockwiseClick() {
+    this.handleButtonClick(this.value + 90);
+  }
+  handleCounterClockwiseClick() {
+    this.handleButtonClick(this.value - 90);
+  }
+  /**
+   * Handles the application of the input rotation.
+   * This method emits a custom event with the input rotation when the "Apply" button is clicked.
+   * It prevents further actions if the component is currently loading.
+   */
+  handleApply() {
+    this.value === 360 || this.value === -360 || this.loading || this.emit("cx-asset-link-format-rotation-apply", {
+      detail: this.value
+    });
+  }
+  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({
+      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>`;
+  }
+};
+E.styles = [U, ke];
+E.dependencies = {
+  "cx-button": G,
+  "cx-button-group": Gt,
+  "cx-details": Z,
+  "cx-icon": Y,
+  "cx-icon-button": ut,
+  "cx-space": D,
+  "cx-typography": T
+};
+j([
+  J(".details")
+], E.prototype, "base", 2);
+j([
+  h({ reflect: !0, type: Boolean })
+], E.prototype, "open", 2);
+j([
+  h({ reflect: !0, type: Number })
+], E.prototype, "value", 2);
+j([
+  h({ attribute: "default-value", reflect: !0, type: Number })
+], E.prototype, "defaultValue", 2);
+j([
+  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([
+  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, n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && _e(e, i, a), a;
+};
+let W = class extends N {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = !1;
+  }
+  handleApply(t) {
+    this.emit("cx-asset-link-format-metadata-change", {
+      detail: t.target.checked
+    });
+  }
+  /**
+   * Handles showing the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only shown when the user interacts with the base element.
+   */
+  onShowDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  /**
+   * Handles hiding the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only hidden when the user interacts with the base element.
+   */
+  onHideDetails(t) {
+    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>`;
+  }
+};
+W.styles = [U, Re];
+W.dependencies = {
+  "cx-button": G,
+  "cx-checkbox": Qt,
+  "cx-details": Z,
+  "cx-icon": Y,
+  "cx-space": D,
+  "cx-tooltip": It,
+  "cx-typography": T
+};
+ht([
+  J(".details")
+], W.prototype, "base", 2);
+ht([
+  h({ reflect: !0, type: Boolean })
+], W.prototype, "open", 2);
+ht([
+  h({ reflect: !0, type: Boolean })
+], W.prototype, "value", 2);
+W = ht([
+  q("cx-asset-link-format-metadata")
+], W);
+var Me = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, d = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Fe(e, i) : e, n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && Me(e, i, a), a;
+};
+let p = class extends N {
+  constructor() {
+    super(), this.localize = new O(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
+      {
+        label: "Free",
+        value: "free"
+      },
+      {
+        label: "Widescreen (16:9)",
+        value: "16:9"
+      },
+      {
+        label: "Phone (9:16)",
+        value: "9:16"
+      },
+      {
+        label: "Presentation (4:3)",
+        value: "4:3"
+      },
+      {
+        label: "Square (1:1)",
+        value: "1:1"
+      },
+      {
+        label: "Landscape (3:2)",
+        value: "3:2"
+      },
+      {
+        label: "Portrait (2:3)",
+        value: "2:3"
+      },
+      {
+        auto: !0,
+        disabledSize: !0,
+        label: "Azure AI",
+        value: "AzureAI"
+      }
+    ], this.focusModes = [
+      {
+        label: "Manual focus",
+        value: "manual"
+      },
+      {
+        label: "Center focus",
+        value: "center"
+      },
+      {
+        auto: !0,
+        label: "Optical focus",
+        value: "Optical"
+      },
+      {
+        auto: !0,
+        label: "Google AI",
+        value: "GoogleAI"
+      },
+      {
+        auto: !0,
+        label: "Smart Swatch",
+        value: "SmartSwatch"
+      }
+    ], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", this.defaultProxy = "", this.useCustomExtension = !1, this.noMetadata = !1, this.noFormat = !1, this.noCrop = !1, this.noResize = !1, this.noRotate = !1, this.lastImageSize = {
+      height: 0,
+      width: 0
+    }, this.hideHeader = !1, this.canReset = !1, this.queryElement = null, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
+      height: 0,
+      keepAspectRatio: !0,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: 0
+    }, this.cropSize = {
+      cropMode: "free",
+      focusMode: "manual",
+      height: 0,
+      keepAspectRatio: !0,
+      percentageHeight: 0,
+      percentageWidth: 0,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: 0,
+      x: 0,
+      y: 0
+    }, 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 = oe, this.apiGetCropFocusMode = he, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
+  }
+  /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
+  get hasUnfrozenTransformations() {
+    return !(this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1);
+  }
+  /**
+   * Checks if the crop apply button should be disabled.
+   * This is determined by comparing the current crop size with the last crop size.
+   * If the current crop size is equal to the last crop size, the button is disabled.
+   * @return {boolean} - Returns true if the crop apply button should be disabled, false otherwise.
+   */
+  get disabledCropApply() {
+    const t = [
+      "height",
+      "percentageHeight",
+      "percentageWidth",
+      "unit",
+      "width",
+      "x",
+      "y"
+    ];
+    for (const e of t)
+      if (this.cropSize[e] !== this.lastCropSize[this.cropSize.unit][e])
+        return !1;
+    return !0;
+  }
+  /**
+   * Returns the list of formats available for the asset link.
+   * This is derived from the `proxies` property, filtering out any proxies that have a `cdnName`.
+   */
+  get formats() {
+    return this.proxies?.filter((t) => !t.cdnName) || [];
+  }
+  get imageSize() {
+    return {
+      height: this.selectedFormat?.height ?? 0,
+      width: this.selectedFormat?.width ?? 0
+    };
+  }
+  /**
+   * Returns the last crop size based on the transformations applied to the asset link.
+   * This is calculated by iterating through the transformations and applying the last crop, resize, or rotate transformation to the default size of the asset.
+   * It returns an object with the last crop size in both pixel and aspect ratio units.
+   */
+  get lastCropSize() {
+    const t = At(
+      this.lastImageSize.width,
+      this.lastImageSize.height
+    );
+    return {
+      [o.AspectRatio]: {
+        height: t.height,
+        percentageHeight: 100,
+        percentageWidth: 100,
+        unit: o.AspectRatio,
+        width: t.width,
+        x: 0,
+        y: 0
+      },
+      [o.Pixel]: {
+        height: this.lastImageSize.height,
+        percentageHeight: 100,
+        percentageWidth: 100,
+        unit: o.Pixel,
+        width: this.lastImageSize.width,
+        x: 0,
+        y: 0
+      }
+    };
+  }
+  /**
+   * Returns the last resize size based on the transformations applied to the asset link.
+   * This is calculated by iterating through the transformations and applying the last crop, resize, or rotate transformation to the default size of the asset.
+   * It returns an object with the last resize size in both pixel and aspect ratio units.
+   */
+  get lastResizeSize() {
+    const t = At(
+      this.lastImageSize.width,
+      this.lastImageSize.height
+    );
+    return {
+      [o.AspectRatio]: {
+        height: t.height,
+        unit: o.AspectRatio,
+        width: t.width
+      },
+      [o.Pixel]: {
+        height: this.lastImageSize.height,
+        unit: o.Pixel,
+        width: this.lastImageSize.width
+      }
+    };
+  }
+  /**
+   * Returns the transformation string for the asset link.
+   */
+  get transformationString() {
+    return et({
+      asset: this.asset,
+      baseUrl: "",
+      parameters: this.parameters,
+      transformations: this.transformations,
+      useSession: this.useSession
+    }).replace(/\/t\//g, "");
+  }
+  runConnectedCallback() {
+    this.hasUpdated && (this.handleCropperSelectorChange(), this.cropperElement && (this.cropperElement.addEventListener(
+      "cx-cropper-crop-complete",
+      this.onCropComplete
+    ), this.cropperElement.addEventListener(
+      "cx-cropper-crop-drag-start",
+      this.onCropDragStart
+    )));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cropperElement && (this.cropperElement.removeEventListener(
+      "cx-cropper-crop-complete",
+      this.onCropComplete
+    ), this.cropperElement.removeEventListener(
+      "cx-cropper-crop-drag-start",
+      this.onCropDragStart
+    ));
+  }
+  updated(t) {
+    if ((t.has("forCropper") || t.has("queryElement")) && this.handleCropperSelectorChange(), t.has("asset") && this.handleAssetChange(), t.has("proxies") && this.handleProxiesChange(), t.has("activeSetting") && this.handleActiveSettingChange(), t.has("selectedFormat") && this.handleSelectedFormatChange(), t.has("resizeSize") && this.handleResizeSizeChange(), t.has("cropSize") && this.handleCropSizeChange(), t.has("rotation") && this.handleRotationChange(), t.has("cropperElement") && this.handleCropperElementChange(), t.has("selectedFormat")) {
+      if (!this.asset || !this.selectedFormat || this.selectedFormat.extension === t.get("selectedFormat")?.extension)
+        return;
+      const e = this.proxies?.find(
+        (s) => s.id === this.selectedProxy
+      );
+      this.loading = !0, this.apiGetTransformAssetLink({
+        assetId: this.asset.id,
+        extension: 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 === c.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+          height: s.height,
+          width: s.width
+        }, this.selectedFormat = {
+          ...this.selectedFormat,
+          height: s.height,
+          url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${s.relativePath}` : s.relativePath,
+          width: s.width
+          /**
+           * For local development uses the base URL to construct the full URL.
+           * url: `${this.baseUrl}/${response.relativePath}`,
+           */
+        });
+      });
+      const i = et({
+        asset: this.asset,
+        baseUrl: "",
+        extension: this.selectedFormat.extension,
+        parameters: this.parameters,
+        transformations: this.transformations,
+        useSession: this.useSession
+      });
+      this.emit("cx-asset-link-format-change", {
+        detail: i
+      });
+    }
+  }
+  getCropSize() {
+    return this.cropSize;
+  }
+  setActiveSetting(t) {
+    this.activeSetting = t;
+  }
+  freezeTransformations() {
+    this.frozenIndex = this.transformations.length - 1;
+  }
+  upsertTransformation(t) {
+    const e = this.transformations.findIndex((i) => i.key === t.key);
+    if (e >= 0) {
+      const i = [...this.transformations];
+      i[e] = t, this.transformations = i;
+    } else
+      this.transformations = [...this.transformations, t];
+  }
+  async handleTransformationsChange() {
+    if (await this.updateComplete, !this.asset) {
+      this.emit("cx-asset-link-format-change", {
+        detail: et({
+          asset: this.asset,
+          baseUrl: "",
+          options: {
+            omitZeroXY: !0
+          },
+          parameters: this.parameters,
+          transformations: this.transformations,
+          useSession: this.useSession
+        }).replace(/\/t\//g, "")
+      });
+      const n = this.transformations.findLast(
+        (f) => f.key === c.Crop && f.value.width && f.value.height
+      );
+      if (n) {
+        const { focusMode: f, height: A, unit: $, width: m, x: R = 0, y: Q = 0 } = n.value;
+        this.cropSize = {
+          ...this.cropSize,
+          cropMode: "free",
+          focusMode: f ?? "manual",
+          height: A,
+          percentageHeight: 100,
+          percentageWidth: 100,
+          unit: $ ?? o.Pixel,
+          width: m,
+          x: R,
+          y: Q
+        };
+      } else
+        this.cropSize = {
+          ...this.cropSize,
+          cropMode: "free",
+          focusMode: "manual",
+          height: 0,
+          percentageHeight: 0,
+          percentageWidth: 0,
+          unit: o.Pixel,
+          width: 0,
+          x: 0,
+          y: 0
+        };
+      const r = this.transformations.findLast(
+        (f) => f.key === c.Resize && (f.value.width || f.value.height)
+      );
+      if (r) {
+        const { height: f = 0, unit: A, width: $ = 0 } = r.value;
+        this.resizeSize = {
+          ...this.resizeSize,
+          height: f,
+          unit: A ?? o.Pixel,
+          width: $
+        };
+      } else
+        this.resizeSize = {
+          ...this.resizeSize,
+          height: 0,
+          unit: o.Pixel,
+          width: 0
+        };
+      const l = this.transformations.findLast(
+        (f) => f.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
+      );
+      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: S, quality: u } : this.selectedFormat = {
+        extension: "",
+        height: 0,
+        keepMetadata: S,
+        originalUrl: "",
+        quality: u,
+        rotation: 0,
+        url: "",
+        width: 0,
+        x: 0,
+        y: 0
+      };
+      return;
+    }
+    if (!this.selectedFormat)
+      return;
+    const t = this.proxies?.find(
+      (n) => n.id === this.selectedProxy
+    );
+    this.loading = !0;
+    const e = await this.apiGetTransformAssetLink({
+      assetId: this.asset.id,
+      extension: this.selectedFormat.extension,
+      format: t?.proxyName ?? "",
+      siteUrl: this.baseUrl,
+      token: this.token,
+      transformations: this.transformationString
+    });
+    if (this.loading = !1, !e?.relativePath || !this.selectedFormat)
+      return;
+    this.lastImageSize = {
+      height: e.height,
+      width: e.width
+    }, this.resizeSize = {
+      height: e.height,
+      keepAspectRatio: !0,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: e.width
+    }, this.cropSize = {
+      cropMode: "free",
+      focusMode: "manual",
+      height: e.height,
+      keepAspectRatio: this.cropSize.keepAspectRatio,
+      percentageHeight: 100,
+      percentageWidth: 100,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: e.width,
+      x: 0,
+      y: 0
+    }, this.lastAction === c.Rotate && (this.rotation = 0), this.lastAction = void 0;
+    const i = this.transformations.some(
+      (n) => n.key === c.Metadata
+    ), s = this.transformations.findLast(
+      (n) => n.key === c.Quality
+    );
+    this.selectedFormat = {
+      ...this.selectedFormat,
+      height: e.height,
+      keepMetadata: i,
+      quality: s?.value?.quality ?? this.selectedFormat.quality,
+      url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${e.relativePath}` : e.relativePath,
+      width: e.width
+      /**
+       * For local development uses the base URL to construct the full URL.
+       * url: `${this.baseUrl}/${response.relativePath}`,
+       */
+    };
+    const a = et({
+      asset: this.asset,
+      baseUrl: "",
+      extension: this.selectedFormat.extension,
+      parameters: this.parameters,
+      transformations: this.transformations,
+      useSession: this.useSession
+    });
+    this.emit("cx-asset-link-format-change", {
+      detail: a
+    });
+  }
+  handleCropperElementChange() {
+    this.cropperElement && (this.cropperElement.resizer = this.resizeSize, this.cropperElement.cropper = this.cropSize, this.cropperElement.rotation = this.rotation, this.cropperElement.disabled = this.activeSetting !== "cx-asset-link-format-crop", this.cropperElement.addEventListener(
+      "cx-cropper-crop-complete",
+      this.onCropComplete
+    ), this.cropperElement.addEventListener(
+      "cx-cropper-crop-drag-start",
+      this.onCropDragStart
+    ), this.cropperElement.loadable = !0);
+  }
+  handleCropperSelectorChange() {
+    this.forCropper && (this.queryElement ? this.cropperElement = this.queryElement.querySelector(`#${this.forCropper}`) : this.cropperElement = document.getElementById(this.forCropper));
+  }
+  handleAssetChange() {
+    if (!this.asset)
+      return;
+    this.freezeTransformations(), this.asset.width && this.asset.height && (this.defaultSize = {
+      height: Number.parseInt(this.asset.height, 10),
+      width: Number.parseInt(this.asset.width, 10)
+    });
+    const t = this.transformations.findLast(
+      (e) => e.key === c.Quality
+    );
+    this.selectedFormat = {
+      extension: this.asset.extension,
+      height: this.defaultSize.height,
+      keepMetadata: !1,
+      originalUrl: this.asset.originalUrl,
+      quality: t?.value?.quality || 100,
+      rotation: 0,
+      url: this.asset.imageUrl,
+      width: this.defaultSize.width,
+      x: 0,
+      y: 0
+    }, this.resizeSize = {
+      ...this.resizeSize,
+      height: this.defaultSize.height,
+      width: this.defaultSize.width
+    }, this.cropSize = {
+      cropMode: "free",
+      focusMode: "manual",
+      height: this.defaultSize.height,
+      keepAspectRatio: !0,
+      percentageHeight: 100,
+      percentageWidth: 100,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: this.defaultSize.width,
+      x: 0,
+      y: 0
+    }, this.selectedProxy || (this.selectedProxy = this.proxies && this.proxies.length > 0 ? this.proxies[0].id : "");
+  }
+  handleProxiesChange() {
+    !this.proxies || this.proxies.length === 0 || (!this.selectedProxy || !this.proxies.some((t) => t.id === this.selectedProxy)) && (this.selectedProxy = this.proxies[0].id);
+  }
+  async handleSelectedProxyChange(t) {
+    if (!this.asset || !this.selectedProxy)
+      return;
+    const e = this.proxies?.find(
+      (s) => s.id === this.selectedProxy
+    );
+    if (!e || !this.selectedFormat)
+      return;
+    e.proxyName === "TRX" && (e.formatHeight = Number(this.asset.height), e.formatWidth = Number(this.asset.width));
+    const i = this.proxies?.find((s) => s.id === t);
+    i && (this.asset && i.proxyName === "TRX" && (i.formatHeight = Number(this.asset.height), i.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((s) => {
+      if (s.key === c.Crop) {
+        const a = s.value, n = a.width / i.formatWidth * e.formatWidth, r = a.height / i.formatHeight * e.formatHeight, l = a.x / i.formatWidth * e.formatWidth, u = a.y / i.formatHeight * e.formatHeight;
+        return {
+          ...s,
+          value: {
+            ...s.value,
+            height: r,
+            width: n,
+            x: l,
+            y: u
+          }
+        };
+      }
+      if (s.key === c.Resize) {
+        const a = s.value, n = a.width / i.formatWidth * e.formatWidth, r = a.height / i.formatHeight * e.formatHeight;
+        return {
+          ...s,
+          value: {
+            height: r,
+            width: n
+          }
+        };
+      }
+      return s;
+    })), this.defaultSize = {
+      height: e.formatHeight || this.defaultSize.height,
+      width: e.formatWidth || this.defaultSize.width
+    }, this.selectedFormat = {
+      ...this.selectedFormat,
+      height: this.defaultSize.height,
+      width: this.defaultSize.width
+    }, await this.updateComplete, this.cropSize = {
+      cropMode: "free",
+      focusMode: "manual",
+      height: this.lastCropSize[o.Pixel].height,
+      keepAspectRatio: !0,
+      percentageHeight: 100,
+      percentageWidth: 100,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: this.lastCropSize[o.Pixel].width,
+      x: 0,
+      y: 0
+    }, this.resizeSize = {
+      height: this.lastResizeSize[o.Pixel].height,
+      keepAspectRatio: !0,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: this.lastResizeSize[o.Pixel].width
+    };
+  }
+  handleLoadingChange() {
+    this.cropperElement && (this.cropperElement.loading = this.loading);
+  }
+  handleSelectedFormatChange() {
+    !this.cropperElement || !this.selectedFormat?.url || (this.cropperElement.image = this.selectedFormat);
+  }
+  handleResizeSizeChange() {
+    this.cropperElement && (this.cropperElement.resizer = this.resizeSize);
+  }
+  handleCropSizeChange() {
+    this.cropperElement && (this.cropperElement.cropper = this.cropSize);
+  }
+  handleRotationChange() {
+    this.cropperElement && (this.cropperElement.rotation = this.rotation);
+  }
+  handleActiveSettingChange() {
+    this.cropperElement && (this.resizeSize = {
+      height: this.lastResizeSize[o.Pixel].height,
+      keepAspectRatio: !0,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: this.lastResizeSize[o.Pixel].width
+    }, this.cropperElement.disabled = this.activeSetting !== "cx-asset-link-format-crop");
+  }
+  async handleRequestAutoCropSuggestion({
+    cropMode: t,
+    focusMode: e,
+    height: i,
+    keepAspectRatio: s,
+    percentageHeight: a,
+    percentageWidth: n,
+    ratioHeight: r,
+    ratioWidth: l,
+    unit: u,
+    useCropMode: S,
+    width: f
+  }) {
+    if (!this.selectedFormat?.url || e === "manual")
+      return;
+    this.loading = !0, this.lastAction = c.Crop;
+    const A = await this.apiGetCropFocusMode({
+      autoCropMode: e,
+      cropHeight: i,
+      cropWidth: f,
+      imageUrl: this.selectedFormat.url
+    });
+    if (A) {
+      let $ = a, m = n;
+      i || ($ = A.height * 100 / this.selectedFormat.height), f || (m = A.width * 100 / this.selectedFormat.width), this.cropSize = {
+        ...this.cropSize,
+        height: A.height,
+        percentageHeight: $ ?? this.cropSize.percentageHeight,
+        percentageWidth: m ?? this.cropSize.percentageWidth,
+        width: A.width,
+        x: A.x * 100 / this.selectedFormat.width,
+        y: A.y * 100 / this.selectedFormat.height,
+        ...S ? {
+          cropMode: e,
+          focusMode: "manual",
+          keepAspectRatio: !1
+        } : {
+          cropMode: t ?? this.cropSize.cropMode,
+          focusMode: e
+        },
+        keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
+        ratioHeight: r ?? this.cropSize.ratioHeight,
+        ratioWidth: l ?? this.cropSize.ratioWidth,
+        unit: u ?? this.cropSize.unit
+      };
+    }
+    this.loading = !1, this.lastAction = void 0;
+  }
+  async onCropComplete(t) {
+    const { croppedArea: e } = t.detail, {
+      height: i,
+      width: s,
+      x: a,
+      y: n
+    } = e;
+    if (s === 0 || i === 0)
+      return;
+    const r = this.cropSize.percentageWidth !== s, l = this.cropSize.percentageHeight !== i;
+    let u = this.cropSize.height, S = this.cropSize.width;
+    r && (S = Math.round(s * this.selectedFormat.width / 100)), l && (u = Math.round(
+      i * this.selectedFormat.height / 100
+    ));
+    const f = this.cropSize.focusMode;
+    this.focusModes.find(
+      ($) => $.value === f
+    )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
+      focusMode: f,
+      height: u,
+      percentageHeight: i,
+      percentageWidth: s,
+      width: S
+    }) : this.cropSize = {
+      ...this.cropSize,
+      height: u,
+      percentageHeight: i,
+      percentageWidth: s,
+      width: S,
+      x: a,
+      y: n
+    };
+  }
+  onCropDragStart() {
+    let t = this.cropSize.cropMode;
+    const e = this.cropModes.find(
+      (i) => i.value === t
+    )?.auto;
+    (this.cropSize.focusMode !== "manual" || e) && (e && (t = "free"), this.cropSize = {
+      ...this.cropSize,
+      cropMode: t,
+      focusMode: "manual"
+    });
+  }
+  onDetailsShow(t) {
+    const e = t.target;
+    e.shadowRoot?.querySelector(".details") && (this.activeSetting = e.localName);
+  }
+  onDetailsHide(t) {
+    this.activeSetting === t.target.localName && (this.activeSetting = "");
+  }
+  onProxyChange(t) {
+    const e = t.detail;
+    this.lastAction = c.Proxy, this.selectedProxy = e.id;
+  }
+  async onCropModeChange(t) {
+    const { mode: e } = t.detail;
+    if (this.cropModes.find((s) => s.value === e)?.auto)
+      await this.handleRequestAutoCropSuggestion({
+        focusMode: e,
+        useCropMode: !0
+      });
+    else {
+      const s = this.focusModes.find(
+        (u) => u.value === this.cropSize.focusMode
+      )?.auto;
+      let a = this.cropSize.keepAspectRatio, n = this.cropSize.focusMode, r = this.cropSize.x, l = this.cropSize.y;
+      e === "free" ? (a = !1, n = "manual") : this.cropSize.unit === o.Pixel && !s && (r = 0, l = 0), s ? await this.handleRequestAutoCropSuggestion({
+        cropMode: e,
+        focusMode: n,
+        height: this.cropSize.height,
+        keepAspectRatio: a,
+        width: this.cropSize.width
+      }) : this.cropSize = {
+        ...this.cropSize,
+        cropMode: e,
+        focusMode: n,
+        keepAspectRatio: a,
+        x: r,
+        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({
+      focusMode: e,
+      height: this.cropSize.height,
+      width: this.cropSize.width
+    }) : this.cropSize = {
+      ...this.cropSize,
+      focusMode: e
+    }, !this.asset) {
+      const { height: s, unit: a, width: n, x: r, y: l } = this.cropSize;
+      (s || n) && this.upsertTransformation({
+        key: c.Crop,
+        value: {
+          focusMode: e,
+          height: s,
+          isFocusModeAuto: i ?? !1,
+          unit: a,
+          width: n,
+          x: r,
+          y: l
+        }
+      });
+    }
+  }
+  async onCropChange(t) {
+    const e = this.cropSize.unit;
+    if (t.detail.unit === o.AspectRatio) {
+      const i = t.detail.width / t.detail.height, s = Math.min(
+        Math.max(Math.round(this.cropSize.height * i), 0),
+        this.resizeSize.width
+      ), a = Math.min(
+        Math.max(Math.round(s / i), 0),
+        this.resizeSize.height
+      ), n = a * 100 / this.selectedFormat.height, r = s * 100 / this.selectedFormat.width;
+      let l = this.cropSize.x, u = this.cropSize.y;
+      l + r > 100 && (l = 100 - r), u + n > 100 && (u = 100 - n);
+      let S = this.cropSize.cropMode;
+      this.cropModes.find(
+        (A) => A.value === S
+      )?.auto && (S = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = n, this.cropSize.percentageWidth = r, 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,
+        height: a,
+        keepAspectRatio: t.detail.keepAspectRatio,
+        percentageHeight: n,
+        percentageWidth: r,
+        ratioHeight: t.detail.height,
+        ratioWidth: t.detail.width,
+        unit: o.AspectRatio,
+        width: s,
+        x: l,
+        y: u
+      };
+    } else {
+      const i = this.selectedFormat ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.selectedFormat ? t.detail.width * 100 / this.selectedFormat.width : 100;
+      let a = this.cropSize.x, n = this.cropSize.y;
+      a + s > 100 && (a = 100 - s), n + i > 100 && (n = 100 - i);
+      let r = this.cropSize.cropMode;
+      const l = this.cropModes.find(
+        (u) => u.value === r
+      )?.auto;
+      (t.detail.breakAspectRatio || l) && (r = "free"), t.detail.silent ? (this.cropSize.cropMode = r, 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 = n) : this.cropSize = {
+        ...this.cropSize,
+        cropMode: r,
+        height: t.detail.height,
+        keepAspectRatio: t.detail.keepAspectRatio,
+        percentageHeight: i,
+        percentageWidth: s,
+        unit: o.Pixel,
+        width: t.detail.width,
+        x: a,
+        y: n
+      };
+    }
+    if (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: n, x: r, y: l } = this.cropSize, u = this.focusModes.find(
+        (S) => S.value === i
+      )?.auto ?? !1;
+      (s || n) && this.upsertTransformation({
+        key: c.Crop,
+        value: {
+          focusMode: i,
+          height: s,
+          isFocusModeAuto: u,
+          unit: a,
+          width: n,
+          x: r,
+          y: l
+        }
+      });
+    }
+  }
+  async onCropChanged() {
+    this.focusModes.find(
+      (e) => e.value === this.cropSize.focusMode
+    )?.auto && await this.handleRequestAutoCropSuggestion({
+      focusMode: this.cropSize.focusMode,
+      height: this.cropSize.height,
+      width: this.cropSize.width
+    });
+  }
+  onCropApply(t) {
+    const { height: e, mode: i, unit: s, width: a } = t.detail;
+    if (this.preResetTransformations = void 0, this.lastAction = c.Crop, !this.cropperElement || !this.selectedFormat)
+      return;
+    const n = this.cropSize.focusMode, r = this.focusModes.find(
+      (l) => l.value === n
+    )?.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)
+        this.transformations = [
+          ...this.transformations,
+          {
+            key: c.Crop,
+            value: {
+              focusMode: n,
+              height: u,
+              isFocusModeAuto: r,
+              mode: i,
+              width: l
+            }
+          }
+        ];
+      else {
+        const S = this.cropSize.x / 100 * this.selectedFormat.width, f = this.cropSize.y / 100 * this.selectedFormat.height;
+        this.transformations = [
+          ...this.transformations,
+          {
+            key: c.Crop,
+            value: {
+              focusMode: n,
+              height: u,
+              isFocusModeAuto: r,
+              unit: s,
+              width: l,
+              x: S,
+              y: f
+            }
+          }
+        ];
+      }
+    } else i && (this.transformations = [
+      ...this.transformations,
+      {
+        key: c.Crop,
+        value: {
+          focusMode: n,
+          isFocusModeAuto: r,
+          mode: i
+        }
+      }
+    ]);
+  }
+  onResizeChange(t) {
+    if (t.detail.unit === o.AspectRatio) {
+      const e = t.detail.width / t.detail.height, i = Math.max(
+        Math.round(this.lastResizeSize[o.Pixel].height * e),
+        0
+      ), s = Math.max(Math.round(i / e), 0);
+      this.resizeSize = {
+        ...this.resizeSize,
+        height: s,
+        keepAspectRatio: t.detail.keepAspectRatio,
+        ratioHeight: t.detail.height,
+        ratioWidth: t.detail.width,
+        unit: t.detail.unit,
+        width: i
+      };
+    } else
+      this.resizeSize = {
+        ...this.resizeSize,
+        height: Math.max(t.detail.height, 0),
+        keepAspectRatio: t.detail.keepAspectRatio,
+        unit: t.detail.unit,
+        width: Math.max(t.detail.width, 0)
+      };
+    if (!this.asset) {
+      const { height: e, unit: i, width: s } = this.resizeSize;
+      (e || s) && this.upsertTransformation({
+        key: c.Resize,
+        value: {
+          height: e,
+          unit: i,
+          width: s
+        }
+      });
+    }
+  }
+  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, n = this.selectedFormat.height || this.defaultSize.height;
+    let r = s, l = e;
+    this.resizeSize.unit !== i ? (r = a, l = n) : i === o.AspectRatio && (r = Math.round(s / e * n), l = n), this.transformations = [
+      ...this.transformations,
+      {
+        key: c.Resize,
+        value: {
+          height: l,
+          unit: i,
+          width: r
+        }
+      }
+    ];
+  }
+  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
+    ));
+  }
+  onRotationApply(t) {
+    if (!this.selectedFormat)
+      return;
+    const e = t.detail;
+    this.preResetTransformations = void 0, this.lastAction = c.Rotate, this.transformations = [
+      ...this.transformations,
+      {
+        key: c.Rotate,
+        value: {
+          rotation: e
+        }
+      }
+    ];
+  }
+  onQualityChange(t) {
+    const e = t.detail;
+    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = c.Quality;
+    const i = {
+      key: c.Quality,
+      value: {
+        quality: e
+      }
+    };
+    this.asset ? this.transformations = [...this.transformations, i] : this.upsertTransformation(i);
+  }
+  onMetadataChange(t) {
+    const e = t.detail;
+    if (this.preResetTransformations = void 0, this.selectedFormat && (this.selectedFormat = {
+      ...this.selectedFormat,
+      keepMetadata: e
+    }), !this.asset) {
+      e ? this.upsertTransformation({
+        key: c.Metadata,
+        value: {
+          keepMetadata: e
+        }
+      }) : this.transformations = this.transformations.filter(
+        (i) => i.key !== c.Metadata
+      );
+      return;
+    }
+    e ? this.transformations = [
+      ...this.transformations.filter(
+        (i) => i.key !== c.Metadata
+      ),
+      {
+        key: c.Metadata,
+        value: {
+          keepMetadata: e
+        }
+      }
+    ] : this.transformations = this.transformations.filter(
+      (i) => i.key !== c.Metadata
+    );
+  }
+  onExtensionChange(t) {
+    const e = t.detail;
+    this.selectedFormat && (this.selectedFormat = {
+      ...this.selectedFormat,
+      extension: e
+    });
+  }
+  syncQuality() {
+    const t = this.transformations.findLast(
+      (e) => e.key === c.Quality
+    )?.value?.quality;
+    this.selectedFormat && (this.selectedFormat = {
+      ...this.selectedFormat,
+      quality: t ?? 100
+    });
+  }
+  handleUndo() {
+    !this.hasUnfrozenTransformations && this.preResetTransformations !== void 0 ? (this.transformations = this.preResetTransformations, this.preResetTransformations = void 0) : this.transformations = this.transformations.slice(0, -1), this.syncQuality();
+  }
+  handleReset() {
+    this.preResetTransformations = [...this.transformations];
+    const t = !!this.defaultProxy && !!this.proxies?.some((e) => e.id === this.defaultProxy);
+    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}>${_(
+      !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>`,
+      () => Ut
+    )}
+      ${_(
+      !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>`
+    )}
+      ${_(
+      !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>`
+    )}
+      ${_(
+      !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>`
+    )}
+      ${_(
+      !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>${_(
+      !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>`
+    )}
+      ${_(
+      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>`
+    )}</div>`;
+  }
+};
+p.styles = [U, le];
+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-quality": F,
+  "cx-asset-link-format-resize": z,
+  "cx-asset-link-format-rotation": E,
+  "cx-button": G,
+  "cx-space": D,
+  "cx-typography": T
+};
+d([
+  h({ attribute: "base-url", type: String })
+], p.prototype, "baseUrl", 2);
+d([
+  h({ attribute: "token", type: String })
+], p.prototype, "token", 2);
+d([
+  h({ reflect: !1, type: Object })
+], p.prototype, "asset", 2);
+d([
+  h({ attribute: "crop-modes", reflect: !1, type: Array })
+], p.prototype, "cropModes", 2);
+d([
+  h({ attribute: "focus-modes", reflect: !1, type: Object })
+], p.prototype, "focusModes", 2);
+d([
+  h({ reflect: !1, type: Array })
+], p.prototype, "extensions", 2);
+d([
+  h({ reflect: !1, type: Array })
+], p.prototype, "proxies", 2);
+d([
+  h({ attribute: "for-cropper", reflect: !0, type: String })
+], p.prototype, "forCropper", 2);
+d([
+  h({ attribute: "use-session", reflect: !0, type: String })
+], p.prototype, "useSession", 2);
+d([
+  h({ reflect: !1, type: Array })
+], p.prototype, "transformations", 2);
+d([
+  h({ attribute: "selected-proxy", reflect: !0, type: String })
+], p.prototype, "selectedProxy", 2);
+d([
+  h({ attribute: "default-proxy", reflect: !0, type: String })
+], p.prototype, "defaultProxy", 2);
+d([
+  h({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
+], p.prototype, "useCustomExtension", 2);
+d([
+  h({ attribute: "no-metadata", reflect: !0, type: Boolean })
+], p.prototype, "noMetadata", 2);
+d([
+  h({ attribute: "no-format", reflect: !0, type: Boolean })
+], p.prototype, "noFormat", 2);
+d([
+  h({ attribute: "no-crop", reflect: !0, type: Boolean })
+], p.prototype, "noCrop", 2);
+d([
+  h({ attribute: "no-resize", reflect: !0, type: Boolean })
+], p.prototype, "noResize", 2);
+d([
+  h({ attribute: "no-rotate", reflect: !0, type: Boolean })
+], p.prototype, "noRotate", 2);
+d([
+  h({ attribute: "last-image-size", reflect: !1, type: Object })
+], p.prototype, "lastImageSize", 2);
+d([
+  h({ attribute: "hide-header", reflect: !1, type: Boolean })
+], p.prototype, "hideHeader", 2);
+d([
+  h({ attribute: "can-reset", type: Boolean })
+], p.prototype, "canReset", 2);
+d([
+  h({ attribute: !1, reflect: !1, type: Object })
+], p.prototype, "queryElement", 2);
+d([
+  v()
+], p.prototype, "activeSetting", 2);
+d([
+  v()
+], p.prototype, "selectedFormat", 2);
+d([
+  v()
+], p.prototype, "resizeSize", 2);
+d([
+  v()
+], p.prototype, "cropSize", 2);
+d([
+  v()
+], p.prototype, "rotation", 2);
+d([
+  v()
+], p.prototype, "defaultSize", 2);
+d([
+  v()
+], p.prototype, "cropperElement", 2);
+d([
+  v()
+], p.prototype, "parameters", 2);
+d([
+  v()
+], p.prototype, "loading", 2);
+d([
+  v()
+], p.prototype, "lastAction", 2);
+d([
+  v()
+], p.prototype, "frozenIndex", 2);
+d([
+  v()
+], p.prototype, "preResetTransformations", 2);
+d([
+  C("transformations")
+], p.prototype, "handleTransformationsChange", 1);
+d([
+  C("selectedProxy")
+], p.prototype, "handleSelectedProxyChange", 1);
+d([
+  C("loading")
+], p.prototype, "handleLoadingChange", 1);
+p = d([
+  q("cx-asset-link-format")
+], p);
+export {
+  p as C,
+  dt as D,
+  _t as F,
+  X as O,
+  xi as a,
+  Pt as b,
+  vt as c,
+  gi as d,
+  kt as e,
+  ee as f,
+  Ht as g,
+  Si as h,
+  yi as i,
+  Ct as j,
+  $t as k,
+  Mt as l,
+  Dt as m,
+  st as n,
+  Xt as o,
+  Kt as u
+};