@orangelogic/design-system 2.19.0-pr77202.21

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

@@ -0,0 +1,2900 @@
+import { c as bt } from "./cropper.3qRm5dEe.js";
+import { C as U } from "./button.G_W-dK6b.js";
+import E from "../components/space.js";
+import { C as W } from "./typography.trna8y2b.js";
+import { i as D, n as l, C as I, x as A, c as T } from "./custom-element.fmLrnDZr.js";
+import { h as C, a as X, b as kt } from "./endpoints.3oM4-c57.js";
+import { c as O } from "./component.styles.DtouHn2g.js";
+import { T as c, U as o } from "./asset-link-format.BSRDqHg7.js";
+import { L as N } from "./i18n.C6c6_pqI.js";
+import { w as k } from "./watch.BCJD77bD.js";
+import { s as lt, c as ct } from "./number.eX2EGPvy.js";
+import { r as v } from "./state.Dt9F_SuS.js";
+import { n as at } from "./when.Dr1es41R.js";
+import j from "../components/details.js";
+import At from "../components/divider.js";
+import B from "../components/icon.js";
+import ot from "../components/icon-button.js";
+import rt from "../components/input.js";
+import { C as tt } from "./option.pgg_ZoHY.js";
+import { C as et } from "./select.DMdl1Kdd.js";
+import { e as G } from "./query.BBf1UFkC.js";
+import { c as Q } from "./repeat.B1pVpmRx.js";
+import { o as P } from "./style-map.lEJHEwk3.js";
+import zt from "../components/tooltip.js";
+import Ct from "../components/button-group.js";
+import $t from "../components/checkbox.js";
+const Rt = window.location.origin.includes("localhost:") ? "https://local.orangelogic.com" : window.location.origin;
+function _t(t, e, i, s = Rt) {
+  const a = new URL(s + "/" + t);
+  return Array.isArray(i) ? i.forEach((h) => {
+    h[1] && a.searchParams.append(h[0], h[1]);
+  }) : i && Object.keys(i).forEach((h) => {
+    i[h] && a.searchParams.append(h, i[h]);
+  }), fetch(a, e);
+}
+const pt = (t, e) => {
+  try {
+    window.Matrix3?.ShowNotification && window.Matrix3.ShowNotification(
+      t,
+      e ? {
+        notificationType: e.notificationType
+      } : void 0
+    );
+  } catch {
+    return;
+  }
+}, dt = "CoreField.LargeSizePreview", ut = "CoreField.DocType", Mt = "Document.Title", Pt = "Document.CaptionLong", gt = "Document.FileExtension", mt = "CoreField.FileSize", ft = "CoreField.Identifier", xt = "CoreField.Keywords", yt = "CoreField.MaxHeight", St = "CoreField.MaxWidth", wt = "Document.RecordID", vt = "CoreField.DocSubType", Ft = "CoreField.TitleWithFallback", Z = "CoreField.OriginalFileName", K = "CoreField.UpdatedFileName", J = "CoreField.OriginalPreview";
+function Ht(t) {
+  return !t || Object.keys(t).length === 0 ? {} : Object.entries(t).reduce(
+    (e, [i, s]) => !s || s.length === 0 ? e : i === "Types" ? {
+      ...e,
+      SubtypeCriteria: s
+    } : {
+      ...e,
+      FacetFilters: {
+        ...e.FacetFilters,
+        [i]: s
+      }
+    },
+    {}
+  );
+}
+async function Et({
+  assetId: t,
+  extension: e,
+  format: i,
+  siteUrl: s,
+  token: a,
+  transformations: h,
+  useSession: r
+}) {
+  try {
+    return (await C.request({
+      baseURL: s,
+      method: "GET",
+      params: {
+        SourceAssetFormat: i,
+        SourceAssetRecordID: t,
+        TargetExtension: e,
+        Token: a,
+        Transformations: h,
+        UseSession: r || void 0
+      },
+      /**
+       * https://link.orangelogic.com/Tasks/41S1XH
+       */
+      timeout: 3e5,
+      // 5 minutes
+      url: X.GET_TRANSFORM_ASSET_LINK
+    })).data;
+  } catch {
+    return null;
+  }
+}
+async function Fe({
+  extraFields: t,
+  recordIds: e
+}) {
+  if (!Array.isArray(e) || e.length === 0)
+    return { facets: [], items: [], totalCount: 0 };
+  const i = t?.filter((s) => s && typeof s == "string") ?? [];
+  try {
+    return (await C.request({
+      method: "GET",
+      params: {
+        ExtraFilters: `RecordID:${e.join(" OR ")}`,
+        Fields: [
+          ...i,
+          J,
+          K,
+          Z,
+          Mt,
+          Pt
+        ],
+        SeeThru: !0
+      },
+      paramsSerializer: {
+        indexes: null
+      },
+      responseType: "json",
+      transformResponse: [
+        ...Array.isArray(C.defaults.transformResponse) ? C.defaults.transformResponse : [],
+        (a) => {
+          const h = a.contentItems?.map((r) => {
+            let p = r.fields[K] ?? "";
+            return p === "" && (p = r.fields[Z] ?? ""), {
+              name: p,
+              originalUrl: r.fields[J] ?? "",
+              recordId: r.recordID,
+              ...i.reduce(
+                (m, u) => (m[u] = r.fields[u] ?? "", m),
+                {}
+              )
+            };
+          }) ?? [];
+          return h.sort((r, p) => {
+            const m = e.indexOf(r.recordId), u = e.indexOf(p.recordId);
+            return m - u;
+          }), {
+            facets: a.facets,
+            items: h,
+            totalCount: a.totalCount
+          };
+        }
+      ],
+      url: X.GET_CONTENT_V1
+    })).data;
+  } catch {
+    return {
+      facets: [],
+      items: [],
+      totalCount: 0
+    };
+  }
+}
+async function He({
+  extraFields: t,
+  folderId: e,
+  limit: i,
+  limitedDocTypes: s,
+  searchTerm: a,
+  seeThrough: h,
+  selectedFacets: r,
+  sortOrder: p,
+  start: m
+}) {
+  const u = (t?.filter((x) => x && typeof x == "string") ?? []).map((x) => x.replace("%20", " "));
+  try {
+    return (await C.request({
+      method: "GET",
+      params: {
+        Fields: [
+          ...u,
+          Ft,
+          dt,
+          J,
+          xt,
+          St,
+          yt,
+          mt,
+          ut,
+          vt,
+          ft,
+          gt,
+          wt,
+          Z,
+          K
+        ],
+        Limit: i,
+        LimitedToDocTypes: s.length > 0 ? s : void 0,
+        ObjectRecordID: e,
+        OrderBy: p || void 0,
+        SearchTerm: a || void 0,
+        SeeThru: h,
+        Start: m,
+        ...Ht(r)
+      },
+      paramsSerializer: {
+        indexes: null
+      },
+      responseType: "json",
+      transformResponse: [
+        ...Array.isArray(C.defaults.transformResponse) ? C.defaults.transformResponse : [],
+        (y) => ({
+          facets: y.facets,
+          items: y.contentItems?.map((n) => {
+            let z = n.fields[gt] ?? "", M = n.fields[K] ?? "";
+            return z && !z.startsWith(".") && (z = "." + z), M === "" && (M = n.fields[Z] ?? ""), {
+              docSubType: n.fields[vt] ?? "",
+              docType: n.fields[ut] ?? "",
+              extension: z,
+              height: n.fields[yt] ?? "0",
+              id: n.recordID,
+              identifier: n.fields[ft] ?? "",
+              imageUrl: n.fields[dt] ?? "",
+              name: M ?? "",
+              originalUrl: n.fields[J] ?? "",
+              recordId: n.fields[wt] ?? "",
+              size: n.fields[mt] ?? "0 MB",
+              tags: n.fields[xt] ?? "",
+              width: n.fields[St] ?? "0",
+              ...u.reduce(
+                (Y, nt) => (Y[nt] = n.fields[nt] ?? "", Y),
+                {}
+              )
+            };
+          }) ?? [],
+          totalCount: y.totalCount
+        })
+      ],
+      url: X.GET_CONTENT_V2
+    })).data;
+  } catch {
+    return {
+      facets: [],
+      items: [],
+      totalCount: 0
+    };
+  }
+}
+async function Wt({
+  autoCropMode: t,
+  cropHeight: e,
+  cropWidth: i,
+  imageUrl: s,
+  useSession: a
+}) {
+  try {
+    return (await C.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(C.defaults.transformResponse) ? C.defaults.transformResponse : [],
+        (r) => ({
+          height: r.cropHeight,
+          width: r.cropWidth,
+          x: r.cropX,
+          y: r.cropY
+        })
+      ],
+      url: X.GET_CROP_ZONE_SUGGESTION
+    })).data;
+  } catch {
+    return null;
+  }
+}
+async function Ee({
+  siteUrl: t
+} = {}) {
+  try {
+    return (await C.request({
+      baseURL: t,
+      method: "GET",
+      responseType: "json",
+      transformResponse: [
+        ...Array.isArray(C.defaults.transformResponse) ? C.defaults.transformResponse : [],
+        (i) => !i || typeof i != "object" ? {
+          formatsByDocType: {
+            Audio: {},
+            Image: {},
+            Multimedia: {},
+            Video: {}
+          }
+        } : {
+          formatsByDocType: i.formatsByDocType ?? {}
+        }
+      ],
+      url: kt
+    })).data;
+  } catch {
+    return { formatsByDocType: {} };
+  }
+}
+async function We(t, e) {
+  const i = new FormData();
+  i.append("InputStream", t);
+  const s = await _t(
+    X.UPLOAD_AND_GET_RESPONSE,
+    {
+      body: i,
+      method: "POST"
+    },
+    {
+      ByPassPermissionCheck: "true",
+      ClientFileName: t.name,
+      FolderRecordID: e?.imageUploadFolderID || ""
+    }
+  ), a = s ? await s.json() : null;
+  return a ? a.downloadLink === "" ? (pt(e?.errorUploadMessage || "", {
+    notificationType: "error"
+  }), "") : a.downloadLink : (pt(e?.errorUploadMessage || "", {
+    notificationType: "error"
+  }), "");
+}
+const Dt = D`
+  .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);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    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);
+  }
+
+  .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: solid 1px var(--cx-color-neutral-200);
+    background-color: var(--cx-color-neutral-50);
+  }
+
+  .asset-link-format__undo {
+    --color: var(--cx-color-primary);
+    --background-color: transparent;
+  }
+`;
+function st({
+  asset: t,
+  baseUrl: e,
+  extension: i,
+  parameters: s,
+  transformations: a,
+  useSession: h = ""
+}) {
+  let r = e;
+  a && a.length > 0 && (r += "/t/");
+  const p = a?.findLast(
+    (u) => u.key === c.Quality
+  );
+  p && (a = [
+    ...a?.filter(
+      (u) => u.key !== c.Quality
+    ) || [],
+    p
+  ]), a?.forEach(({ key: u, value: x }) => {
+    if (u === c.Resize) {
+      const y = [
+        ...[
+          {
+            key: "re_w_",
+            value: Math.round(x.width ?? 0)
+          },
+          {
+            key: "re_h_",
+            value: Math.round(x.height ?? 0)
+          }
+        ].filter((n) => n.value !== void 0).map((n) => ({
+          key: n.key,
+          value: Math.round(Number(n.value))
+        })),
+        {
+          key: "re_rm_",
+          value: "stretch"
+        }
+      ];
+      y.forEach(({ key: n, value: z }, M) => {
+        r += `${n}${z}${M < y.length - 1 ? "," : ""}`;
+      }), r += "/";
+    }
+    if (u === c.Crop) {
+      const y = [
+        ...[
+          {
+            key: "c_",
+            value: x.mode
+          },
+          ...x.disabledSize ? [] : [
+            {
+              key: "c_w_",
+              value: Math.round(x.width ?? 0)
+            },
+            {
+              key: "c_h_",
+              value: Math.round(x.height ?? 0)
+            },
+            {
+              key: "c_x_",
+              value: Math.round(x.x ?? 0)
+            },
+            {
+              key: "c_y_",
+              value: Math.round(x.y ?? 0)
+            }
+          ]
+        ].filter((n) => n.value !== void 0 && n.value !== null).map((n) => ({
+          key: n.key,
+          value: n.value
+        })),
+        {
+          key: "c_whu_",
+          value: "pixel"
+        }
+      ];
+      y.forEach(({ key: n, value: z }, M) => {
+        const Y = ["c_w_", "c_h_", "c_x_", "c_y_"].includes(n);
+        r += `${n}${Y ? Math.round(Number(z)) : z}${M < y.length - 1 ? "," : ""}`;
+      }), r += "/";
+    }
+    if (u === c.Rotate && ([
+      {
+        key: "r_a_",
+        value: x.rotation
+      }
+    ].filter((n) => n.value !== void 0).map((n) => ({
+      key: n.key,
+      value: Math.round(Number(n.value))
+    })).forEach(({ key: n, value: z }) => {
+      r += `${n}${z}`;
+    }), r += "/"), u === c.Quality) {
+      const y = [
+        {
+          key: "q_level_",
+          value: x.quality
+        }
+      ].filter((n) => n.value !== void 0).map((n) => ({
+        key: n.key,
+        value: Math.round(Number(n.value))
+      }));
+      y.forEach(({ key: n, value: z }, M) => {
+        r += `${n}${z}${M < y.length - 1 ? "," : ""}`;
+      }), r += "/";
+    }
+    if (u === c.Metadata) {
+      const y = [
+        {
+          key: "fl_keep_metadata",
+          value: x.keepMetadata
+        }
+      ].filter((n) => n.value !== void 0).map((n) => ({ key: n.key, value: n.value }));
+      y.forEach(({ key: n }, z) => {
+        r += `${n}${z < y.length - 1 ? "," : ""}`;
+      }), r += "/";
+    }
+  }), i && (r += `${t?.identifier}${i}`);
+  const m = [];
+  return s && s.length > 0 && s.forEach(({ key: u, value: x }) => {
+    m.push(
+      `${encodeURIComponent(u.trim())}=${encodeURIComponent(x.trim())}`
+    );
+  }), m.length > 0 && (r += `?${m.join("&")}`), r.endsWith("/") && (r = r.slice(0, -1)), r;
+}
+const It = D`
+  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 {
+    display: flex;
+    flex: 1;
+  }
+`;
+var Tt = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, S = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ot(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && Tt(e, i, a), a;
+};
+let g = class extends I {
+  constructor() {
+    super(...arguments), this.localize = new N(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.lastAppliedSetting = {
+      [o.Pixel]: {
+        height: 0,
+        percentageHeight: 100,
+        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) {
+      this.aspectRatio = this.maxWidth / this.maxHeight;
+      return;
+    }
+    this.aspectRatio = 1;
+  }
+  async handleOpenChange() {
+    this.cropMode = "free", await this.updateComplete, this.open || (this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-crop-change", {
+      detail: {
+        height: this.lastAppliedSetting[o.Pixel].height,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: o.Pixel,
+        width: this.lastAppliedSetting[o.Pixel].width
+      }
+    }));
+  }
+  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) {
+        const { height: h, width: r } = bt(
+          this.maxWidth,
+          this.maxHeight,
+          s,
+          a
+        );
+        this.emit("cx-asset-link-format-crop-change", {
+          detail: {
+            height: h,
+            keepAspectRatio: !0,
+            silent: !0,
+            unit: o.Pixel,
+            width: r
+          }
+        });
+      } 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 A`<cx-details
+      class="details"
+      ?open=${this.open}
+      @cx-show=${this.onShowDetails}
+      @cx-hide=${this.onHideDetails}
+    >
+      <cx-space slot="summary" align-items="center">
+        <div part="icon">
+          <cx-icon name="crop"></cx-icon>
+        </div>
+        <cx-typography variant="body2">
+          ${this.localize.term("crop")}
+        </cx-typography>
+      </cx-space>
+      <cx-space direction="vertical" spacing="small">
+        <cx-select
+          data-testid="cx-asset-link-format-crop-mode"
+          value=${this.cropMode}
+          hoist
+          style=${P({
+      width: "100%"
+    })}
+          @cx-change=${this.onCropModeChange}
+          ?disabled=${this.loading}
+        >
+          ${Q(
+      t,
+      (i) => i.value,
+      ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
+    )}
+          ${at(
+      e.length > 0,
+      () => A`<cx-divider></cx-divider>
+                <small>${this.localize.term("autoCropping")}</small>`
+    )}
+          ${Q(
+      e,
+      (i) => i.value,
+      ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
+    )}
+        </cx-select>
+        <cx-space spacing="small">
+          <div class="crop__input-group">
+            <cx-input
+              data-testid="cx-asset-link-format-crop-width"
+              placeholder=${this.localize.term("width")}
+              type="number"
+              step="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=${P({
+      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")}
+              type="number"
+              step="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>
+        ${at(
+      this.focusModes.length > 0,
+      () => A`
+            <cx-select
+              data-testid="cx-asset-link-format-crop-focus-mode"
+              value=${this.focusMode}
+              hoist
+              style=${P({
+        width: "100%"
+      })}
+              @cx-change=${this.onFocusModeChange}
+              ?disabled=${this.loading || this.selectedMode?.disabledSize}
+            >
+              ${Q(
+        this.focusModes,
+        (i) => i.value,
+        ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
+      )}
+            </cx-select>
+          `
+    )}
+        <cx-button
+          data-testid="cx-asset-link-format-crop-apply"
+          variant="primary"
+          ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth}
+          ?loading=${this.loading}
+          style=${P({
+      marginLeft: "auto"
+    })}
+          @click=${this.handleApply}
+        >
+          ${this.localize.term("apply")}
+        </cx-button>
+      </cx-space>
+    </cx-details>`;
+  }
+};
+g.styles = [O, It];
+g.dependencies = {
+  "cx-button": U,
+  "cx-details": j,
+  "cx-divider": At,
+  "cx-icon": B,
+  "cx-icon-button": ot,
+  "cx-input": rt,
+  "cx-option": tt,
+  "cx-select": et,
+  "cx-space": E,
+  "cx-typography": W
+};
+S([
+  G(".details")
+], g.prototype, "base", 2);
+S([
+  l({ reflect: !0, type: Boolean })
+], g.prototype, "open", 2);
+S([
+  l({ reflect: !0, type: Number })
+], g.prototype, "width", 2);
+S([
+  l({ reflect: !0, type: Number })
+], g.prototype, "height", 2);
+S([
+  l({ attribute: "max-width", reflect: !0, type: Number })
+], g.prototype, "maxWidth", 2);
+S([
+  l({ attribute: "max-height", reflect: !0, type: Number })
+], g.prototype, "maxHeight", 2);
+S([
+  l({ attribute: "ratio-width", reflect: !0, type: Number })
+], g.prototype, "ratioWidth", 2);
+S([
+  l({ attribute: "ratio-height", reflect: !0, type: Number })
+], g.prototype, "ratioHeight", 2);
+S([
+  l({ attribute: "percentage-width", reflect: !0, type: Number })
+], g.prototype, "percentageWidth", 2);
+S([
+  l({ attribute: "percentage-height", reflect: !0, type: Number })
+], g.prototype, "percentageHeight", 2);
+S([
+  l({ reflect: !0, type: String })
+], g.prototype, "unit", 2);
+S([
+  l({ attribute: "disabled-apply", reflect: !0, type: Boolean })
+], g.prototype, "disabledApply", 2);
+S([
+  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], g.prototype, "lastAppliedSetting", 2);
+S([
+  l({ reflect: !0, type: Boolean })
+], g.prototype, "loading", 2);
+S([
+  l({ attribute: "crop-modes", reflect: !1, type: Array })
+], g.prototype, "cropModes", 2);
+S([
+  l({ attribute: "focus-modes", reflect: !1, type: Object })
+], g.prototype, "focusModes", 2);
+S([
+  l({ attribute: "focus-mode", reflect: !0, type: String })
+], g.prototype, "focusMode", 2);
+S([
+  l({ attribute: "crop-mode", reflect: !0, type: String })
+], g.prototype, "cropMode", 2);
+S([
+  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], g.prototype, "keepAspectRatio", 2);
+S([
+  v()
+], g.prototype, "invalidWidth", 2);
+S([
+  v()
+], g.prototype, "invalidHeight", 2);
+S([
+  v()
+], g.prototype, "aspectRatio", 2);
+S([
+  k("cropMode", { waitUntilFirstUpdate: !0 }),
+  k("maxWidth", { waitUntilFirstUpdate: !0 }),
+  k("maxHeight", { waitUntilFirstUpdate: !0 }),
+  k("keepAspectRatio")
+], g.prototype, "handleCropModeChange", 1);
+S([
+  k("open")
+], g.prototype, "handleOpenChange", 1);
+g = S([
+  T("cx-asset-link-format-crop")
+], g);
+const Nt = D`
+  .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 Lt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, ht = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ut(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && Lt(e, i, a), a;
+};
+let L = class extends I {
+  constructor() {
+    super(...arguments), this.localize = new N(this), this.value = "", this.items = [];
+  }
+  handleExtensionChange(t) {
+    const e = t.target.value;
+    this.emit("cx-asset-link-format-extension-change", {
+      detail: e
+    });
+  }
+  render() {
+    return A`
+      <cx-space direction="vertical" spacing="small" class="extension">
+        <cx-typography variant="body2">
+          ${this.localize.term("extension")}
+        </cx-typography>
+        <cx-select
+          data-label=${this.localize.term("extension")}
+          data-testid="cx-asset-link-format-extension-select"
+          value=${this.value}
+          hoist
+          @cx-change=${this.handleExtensionChange}
+        >
+          ${Q(
+      this.items,
+      (t) => t.value,
+      (t) => A`
+              <cx-option value=${t.value}>${t.displayName}</cx-option>
+            `
+    )}
+        </cx-select>
+      </cx-space>
+    `;
+  }
+};
+L.styles = [O, Nt];
+L.dependencies = {
+  "cx-option": tt,
+  "cx-select": et,
+  "cx-space": E,
+  "cx-typography": W
+};
+ht([
+  l({ reflect: !0, type: String })
+], L.prototype, "value", 2);
+ht([
+  l({ reflect: !1, type: Array })
+], L.prototype, "items", 2);
+L = ht([
+  T("cx-asset-link-format-extension")
+], L);
+const qt = D`
+  cx-details::part(base) {
+    border-bottom-width: 0;
+  }
+`;
+var Vt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, F = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? jt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && Vt(e, i, a), a;
+};
+let $ = class extends I {
+  constructor() {
+    super(...arguments), this.localize = new N(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 A`
+      <cx-details
+        class="details"
+        ?open=${this.open}
+        @cx-show=${this.onShowDetails}
+        @cx-hide=${this.onHideDetails}
+      >
+        <cx-space slot="summary" align-items="center">
+          <div part="icon">
+            <cx-icon name="photo_size_select_large"></cx-icon>
+          </div>
+          <cx-typography variant="body2">
+            ${this.localize.term("format")}
+          </cx-typography>
+        </cx-space>
+        <cx-space direction="vertical" spacing="small" class="format">
+          <cx-select
+            data-label=${this.localize.term("imageFormat")}
+            data-testid="cx-asset-link-format-proxy-select"
+            value=${this.scopedValue}
+            hoist
+            @cx-change=${this.handleProxyChange}
+            ?disabled=${this.loading}
+          >
+            ${Q(
+      this.items,
+      (t) => t.id,
+      (t) => A`
+                <cx-option value=${t.id}>${t.proxyLabel}</cx-option>
+              `
+    )}
+          </cx-select>
+          <cx-button
+            data-testid="cx-asset-link-format-proxy-apply"
+            variant="primary"
+            style=${P({
+      "margin-left": "auto"
+    })}
+            ?disabled=${this.scopedValue === this.value}
+            ?loading=${this.loading}
+            @click=${this.handleApply}
+          >
+            ${this.localize.term("apply")}
+          </cx-button>
+        </cx-space>
+      </cx-details>
+    `;
+  }
+};
+$.styles = [O, qt];
+$.dependencies = {
+  "cx-button": U,
+  "cx-details": j,
+  "cx-icon": B,
+  "cx-option": tt,
+  "cx-select": et,
+  "cx-space": E,
+  "cx-typography": W
+};
+F([
+  G(".details")
+], $.prototype, "base", 2);
+F([
+  l({ reflect: !0, type: Boolean })
+], $.prototype, "open", 2);
+F([
+  l({ reflect: !0, type: String })
+], $.prototype, "value", 2);
+F([
+  l({ reflect: !1, type: Array })
+], $.prototype, "items", 2);
+F([
+  l({ reflect: !0, type: Boolean })
+], $.prototype, "loading", 2);
+F([
+  v()
+], $.prototype, "scopedValue", 2);
+F([
+  k("value")
+], $.prototype, "handleValueChange", 1);
+F([
+  k("open", { waitUntilFirstUpdate: !0 })
+], $.prototype, "handleOpenChange", 1);
+$ = F([
+  T("cx-asset-link-format-proxy")
+], $);
+const Bt = D`
+  cx-details::part(base) {
+    border-bottom-width: 0;
+  }
+`;
+var Gt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, q = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Qt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && Gt(e, i, a), a;
+};
+let R = class extends I {
+  constructor() {
+    super(...arguments), this.localize = new N(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+  }
+  /**
+   * A computed property that checks if the current quality value is invalid.
+   * 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);
+  }
+  /**
+   * 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 A`
+      <cx-details
+        class="details"
+        ?open=${this.open}
+        @cx-show=${this.onShowDetails}
+        @cx-hide=${this.onHideDetails}
+      >
+        <cx-space slot="summary" align-items="center">
+          <div class="details__summary__icon">
+            <div part="icon">
+              <cx-icon name="blur_on"></cx-icon>
+            </div>
+          </div>
+          <cx-typography variant="body2">
+            ${this.localize.term("quality")}
+          </cx-typography>
+        </cx-space>
+        <cx-space spacing="small">
+          <cx-tooltip
+            data-testid="cx-asset-link-format-quality-tooltip"
+            content=${this.localize.term("qualityHelpText")}
+            hoist
+          >
+            <cx-input
+              data-testid="cx-asset-link-format-quality"
+              class="details__checkbox"
+              type="number"
+              value=${this.scopedValue}
+              min="0"
+              max="100"
+              step="1"
+              style=${P({
+      flex: "1"
+    })}
+              @cx-input=${this.handleQualityChange}
+            >
+            </cx-input>
+          </cx-tooltip>
+          <cx-button
+            data-testid="cx-asset-link-format-quality-apply"
+            variant="primary"
+            ?disabled=${this.invalidValue}
+            ?loading=${this.loading}
+            @click=${this.handleApply}
+          >
+            ${this.localize.term("apply")}
+          </cx-button>
+        </cx-space>
+      </cx-details>
+    `;
+  }
+};
+R.styles = [O, Bt];
+R.dependencies = {
+  "cx-button": U,
+  "cx-details": j,
+  "cx-icon": B,
+  "cx-input": rt,
+  "cx-space": E,
+  "cx-tooltip": zt,
+  "cx-typography": W
+};
+q([
+  G(".details")
+], R.prototype, "base", 2);
+q([
+  l({ reflect: !0, type: Boolean })
+], R.prototype, "open", 2);
+q([
+  l({ reflect: !0, type: Number })
+], R.prototype, "value", 2);
+q([
+  l({ reflect: !0, type: Boolean })
+], R.prototype, "loading", 2);
+q([
+  v()
+], R.prototype, "scopedValue", 2);
+q([
+  k("value")
+], R.prototype, "handleValueChange", 1);
+R = q([
+  T("cx-asset-link-format-quality")
+], R);
+const Xt = D`
+  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 {
+    display: flex;
+    flex: 1;
+  }
+`;
+var Yt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, b = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Zt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && Yt(e, i, a), a;
+};
+let w = class extends I {
+  constructor() {
+    super(...arguments), this.localize = new N(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = o.Pixel, this.lastAppliedSetting = {
+      [o.Pixel]: { height: 0, width: 0 },
+      [o.AspectRatio]: { height: 1, width: 1 }
+    }, this.loading = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
+  }
+  /**
+   * 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) {
+      this.aspectRatio = this.maxWidth / this.maxHeight;
+      return;
+    }
+    this.aspectRatio = 1;
+  }
+  async handleOpenChange() {
+    await this.updateComplete, this.open || (this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-resize-change", {
+      detail: {
+        height: this.lastAppliedSetting[o.Pixel].height,
+        keepAspectRatio: this.keepAspectRatio,
+        unit: o.Pixel,
+        width: this.lastAppliedSetting[o.Pixel].width
+      }
+    }));
+  }
+  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 A`<cx-details
+      class="details"
+      ?open=${this.open}
+      @cx-show=${this.onShowDetails}
+      @cx-hide=${this.onHideDetails}
+    >
+      <cx-space slot="summary" align-items="center">
+        <div part="icon">
+          <cx-icon name="aspect_ratio"></cx-icon>
+        </div>
+        <cx-typography variant="body2">
+          ${this.localize.term("resize")}
+        </cx-typography>
+      </cx-space>
+      <cx-space direction="vertical" spacing="small">
+        <cx-space spacing="small">
+          <div class="resize__input-group">
+            <cx-input
+              data-testid="cx-asset-link-format-resize-width"
+              placeholder=${this.localize.term("width")}
+              type="number"
+              step="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=${P({
+      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")}
+              type="number"
+              step="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>
+        <cx-button
+          data-testid="cx-asset-link-format-resize-apply"
+          variant="primary"
+          ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth}
+          ?loading=${this.loading}
+          style=${P({
+      marginLeft: "auto"
+    })}
+          @click=${this.handleApply}
+        >
+          ${this.localize.term("apply")}
+        </cx-button>
+      </cx-space>
+    </cx-details>`;
+  }
+};
+w.styles = [O, Xt];
+w.dependencies = {
+  "cx-button": U,
+  "cx-details": j,
+  "cx-icon": B,
+  "cx-icon-button": ot,
+  "cx-input": rt,
+  "cx-option": tt,
+  "cx-select": et,
+  "cx-space": E,
+  "cx-typography": W
+};
+b([
+  G(".details")
+], w.prototype, "base", 2);
+b([
+  l({ reflect: !0, type: Boolean })
+], w.prototype, "open", 2);
+b([
+  l({ reflect: !0, type: Number })
+], w.prototype, "width", 2);
+b([
+  l({ reflect: !0, type: Number })
+], w.prototype, "height", 2);
+b([
+  l({ attribute: "max-width", reflect: !0, type: Number })
+], w.prototype, "maxWidth", 2);
+b([
+  l({ attribute: "max-height", reflect: !0, type: Number })
+], w.prototype, "maxHeight", 2);
+b([
+  l({ attribute: "ratio-width", reflect: !0, type: Number })
+], w.prototype, "ratioWidth", 2);
+b([
+  l({ attribute: "ratio-height", reflect: !0, type: Number })
+], w.prototype, "ratioHeight", 2);
+b([
+  l({ reflect: !0, type: String })
+], w.prototype, "unit", 2);
+b([
+  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], w.prototype, "lastAppliedSetting", 2);
+b([
+  l({ reflect: !0, type: Boolean })
+], w.prototype, "loading", 2);
+b([
+  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], w.prototype, "keepAspectRatio", 2);
+b([
+  v()
+], w.prototype, "invalidWidth", 2);
+b([
+  v()
+], w.prototype, "invalidHeight", 2);
+b([
+  v()
+], w.prototype, "aspectRatio", 2);
+b([
+  k("cropMode", { waitUntilFirstUpdate: !0 }),
+  k("maxWidth", { waitUntilFirstUpdate: !0 }),
+  k("maxHeight", { waitUntilFirstUpdate: !0 }),
+  k("keepAspectRatio")
+], w.prototype, "handleCropModeChange", 1);
+b([
+  k("open")
+], w.prototype, "handleOpenChange", 1);
+w = b([
+  T("cx-asset-link-format-resize")
+], w);
+const Kt = D`
+  cx-details::part(base) {
+    border-bottom-width: 0;
+  }
+`;
+var Jt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, V = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? te(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && Jt(e, i, a), a;
+};
+let _ = class extends I {
+  constructor() {
+    super(...arguments), this.localize = new N(this), this.open = !1, this.value = 0, this.loading = !1, this.invalidValue = !1;
+  }
+  handleOpenChange() {
+    this.open || this.emit("cx-asset-link-format-rotation-change", {
+      detail: 0
+    });
+  }
+  handleRotationChange(t) {
+    const e = t.target.value;
+    e ? this.invalidValue = !1 : this.invalidValue = !0;
+    const i = lt(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: lt(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.invalidValue || this.value === 360 || this.value === -360 || this.loading || this.emit("cx-asset-link-format-rotation-apply", {
+      detail: this.value
+    });
+  }
+  render() {
+    return A`
+      <cx-details class="details" ?open=${this.open}>
+        <cx-space slot="summary" align-items="center">
+          <div part="icon">
+            <cx-icon name="rotate_90_degrees_cw"></cx-icon>
+          </div>
+          <cx-typography variant="body2">Rotate</cx-typography>
+        </cx-space>
+        <cx-space spacing="small">
+          <cx-button-group label=${this.localize.term("history")}>
+            <cx-icon-button
+              data-testid="cx-asset-link-format-rotation-ccw"
+              name="rotate_90_degrees_ccw"
+              label=${this.localize.term("undo")}
+              outline
+              size="small"
+              ?disabled=${this.loading || this.value === -360}
+              @click=${this.handleCounterClockwiseClick}
+            >
+            </cx-icon-button>
+            <cx-icon-button
+              data-testid="cx-asset-link-format-rotation-cw"
+              name="rotate_90_degrees_cw"
+              label=${this.localize.term("redo")}
+              outline
+              size="small"
+              ?disabled=${this.loading || this.value === 360}
+              @click=${this.handleClockwiseClick}
+            >
+            </cx-icon-button>
+          </cx-button-group>
+          <cx-input
+            data-testid="cx-asset-link-format-rotation"
+            value=${this.invalidValue ? "" : this.value.toString()}
+            placeholder="0"
+            type="number"
+            min="-360"
+            max="360"
+            ?disabled=${this.loading}
+            style=${P({
+      flex: "none",
+      width: "80px"
+    })}
+            @cx-input=${this.handleRotationChange}
+            step="1"
+          ></cx-input>
+          <cx-button
+            data-testid="cx-asset-link-format-rotation-apply"
+            variant="primary"
+            ?disabled=${this.value === 360 || this.value === -360 || this.invalidValue}
+            ?loading=${this.loading}
+            @click=${this.handleApply}
+          >
+            ${this.localize.term("apply")}
+          </cx-button>
+        </cx-space>
+      </cx-details>
+    `;
+  }
+};
+_.styles = [O, Kt];
+_.dependencies = {
+  "cx-button": U,
+  "cx-button-group": Ct,
+  "cx-details": j,
+  "cx-icon": B,
+  "cx-icon-button": ot,
+  "cx-space": E,
+  "cx-typography": W
+};
+V([
+  G(".details")
+], _.prototype, "base", 2);
+V([
+  l({ reflect: !0, type: Boolean })
+], _.prototype, "open", 2);
+V([
+  l({ reflect: !0, type: Number })
+], _.prototype, "value", 2);
+V([
+  l({ reflect: !0, type: Boolean })
+], _.prototype, "loading", 2);
+V([
+  v()
+], _.prototype, "invalidValue", 2);
+V([
+  k("open", { waitUntilFirstUpdate: !0 })
+], _.prototype, "handleOpenChange", 1);
+_ = V([
+  T("cx-asset-link-format-rotation")
+], _);
+const ee = D`
+  cx-details::part(base) {
+    border-bottom-width: 0;
+  }
+`;
+var ie = Object.defineProperty, se = Object.getOwnPropertyDescriptor, it = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? se(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && ie(e, i, a), a;
+};
+let H = class extends I {
+  constructor() {
+    super(...arguments), this.localize = new N(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 A`
+      <cx-details
+        class="details"
+        ?open=${this.open}
+        @cx-show=${this.onShowDetails}
+        @cx-hide=${this.onHideDetails}
+      >
+        <cx-space slot="summary" align-items="center">
+          <div class="details__summary__icon">
+            <div part="icon">
+              <cx-icon name="short_text"></cx-icon>
+            </div>
+          </div>
+          <cx-typography variant="body2">
+            ${this.localize.term("metadata")}
+          </cx-typography>
+        </cx-space>
+        <cx-space spacing="small">
+          <cx-tooltip
+            data-testid="cx-asset-link-format-metadata-tooltip"
+            content=${this.localize.term("metadataHelpText")}
+            hoist
+          >
+            <cx-checkbox
+              data-testid="cx-asset-link-format-metadata"
+              class="details__checkbox"
+              ?checked=${this.value}
+              @cx-change=${this.handleApply}
+            >
+              ${this.localize.term("preserveMetadata")}
+            </cx-checkbox>
+          </cx-tooltip>
+        </cx-space>
+      </cx-details>
+    `;
+  }
+};
+H.styles = [O, ee];
+H.dependencies = {
+  "cx-button": U,
+  "cx-checkbox": $t,
+  "cx-details": j,
+  "cx-icon": B,
+  "cx-space": E,
+  "cx-tooltip": zt,
+  "cx-typography": W
+};
+it([
+  G(".details")
+], H.prototype, "base", 2);
+it([
+  l({ reflect: !0, type: Boolean })
+], H.prototype, "open", 2);
+it([
+  l({ reflect: !0, type: Boolean })
+], H.prototype, "value", 2);
+H = it([
+  T("cx-asset-link-format-metadata")
+], H);
+var ae = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, f = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? oe(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && ae(e, i, a), a;
+};
+let d = class extends I {
+  constructor() {
+    super(), this.localize = new N(this), this.baseUrl = void 0, this.accessToken = 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.useCustomExtension = !1, this.lastImageSize = {
+      height: 0,
+      width: 0
+    }, 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.apiGetTransformAssetLink = Et, this.apiGetCropFocusMode = Wt, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
+  }
+  /**
+   * 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 = ct(
+      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 = ct(
+      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 st({
+      asset: this.asset,
+      baseUrl: "",
+      parameters: this.parameters,
+      transformations: this.transformations,
+      useSession: this.useSession
+    }).replace(/\/t\//g, "");
+  }
+  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") && 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.selectedFormat.extension,
+        format: e?.proxyName ?? "",
+        token: this.accessToken,
+        transformations: this.transformationString,
+        useSession: this.useSession
+      }).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: s.relativePath,
+          width: s.width
+          /**
+           * For local development uses the base URL to construct the full URL.
+           * url: `${this.baseUrl}/${response.relativePath}`,
+           */
+        });
+      });
+      const i = st({
+        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;
+  }
+  freezeTransformations() {
+    this.frozenIndex = this.transformations.length - 1;
+  }
+  async handleTransformationsChange() {
+    if (await this.updateComplete, !this.asset || !this.selectedFormat)
+      return;
+    const t = this.proxies?.find(
+      (a) => a.id === this.selectedProxy
+    );
+    this.loading = !0;
+    const e = await this.apiGetTransformAssetLink({
+      assetId: this.asset.id,
+      extension: this.selectedFormat.extension,
+      format: t?.proxyName ?? "",
+      token: this.accessToken,
+      transformations: this.transformationString,
+      useSession: this.useSession
+    });
+    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(
+      (a) => a.key === c.Metadata
+    );
+    this.selectedFormat = {
+      ...this.selectedFormat,
+      height: e.height,
+      keepMetadata: i,
+      url: e.relativePath,
+      width: e.width
+      /**
+       * For local development uses the base URL to construct the full URL.
+       * url: `${this.baseUrl}/${response.relativePath}`,
+       */
+    };
+    const s = st({
+      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: s
+    });
+  }
+  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.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.rotation = 0, this.parameters = [], this.activeSetting = "cx-asset-link-format-proxy", 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, h = a.width / i.formatWidth * e.formatWidth, r = a.height / i.formatHeight * e.formatHeight, p = a.x / i.formatWidth * e.formatWidth, m = a.y / i.formatHeight * e.formatHeight;
+        return {
+          ...s,
+          value: {
+            height: r,
+            width: h,
+            x: p,
+            y: m
+          }
+        };
+      }
+      if (s.key === c.Resize) {
+        const a = s.value, h = a.width / i.formatWidth * e.formatWidth, r = a.height / i.formatHeight * e.formatHeight;
+        return {
+          ...s,
+          value: {
+            height: r,
+            width: h
+          }
+        };
+      }
+      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
+    };
+  }
+  async 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: h,
+    ratioHeight: r,
+    ratioWidth: p,
+    unit: m,
+    useCropMode: u,
+    width: x
+  }) {
+    if (!this.selectedFormat?.url || e === "manual")
+      return;
+    this.loading = !0, this.lastAction = c.Crop;
+    const y = await this.apiGetCropFocusMode({
+      autoCropMode: e,
+      cropHeight: i,
+      cropWidth: x,
+      imageUrl: this.selectedFormat.url
+    });
+    if (y) {
+      let n = a, z = h;
+      i || (n = y.height * 100 / this.selectedFormat.height), x || (z = y.width * 100 / this.selectedFormat.width), this.cropSize = {
+        ...this.cropSize,
+        height: y.height,
+        percentageHeight: n ?? this.cropSize.percentageHeight,
+        percentageWidth: z ?? this.cropSize.percentageWidth,
+        width: y.width,
+        x: y.x * 100 / this.selectedFormat.width,
+        y: y.y * 100 / this.selectedFormat.height,
+        ...u ? {
+          cropMode: e,
+          focusMode: "manual",
+          keepAspectRatio: !1
+        } : {
+          cropMode: t ?? this.cropSize.cropMode,
+          focusMode: e
+        },
+        keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
+        ratioHeight: r ?? this.cropSize.ratioHeight,
+        ratioWidth: p ?? this.cropSize.ratioWidth,
+        unit: m ?? 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: h
+    } = e, r = this.cropSize.percentageWidth !== s, p = this.cropSize.percentageHeight !== i;
+    let m = this.cropSize.height, u = this.cropSize.width;
+    r && (u = Math.round(s * this.selectedFormat.width / 100)), p && (m = Math.round(
+      i * this.selectedFormat.height / 100
+    ));
+    const x = this.cropSize.focusMode;
+    this.focusModes.find(
+      (n) => n.value === x
+    )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
+      focusMode: x,
+      height: m,
+      percentageHeight: i,
+      percentageWidth: s,
+      width: u
+    }) : this.cropSize = {
+      ...this.cropSize,
+      height: m,
+      percentageHeight: i,
+      percentageWidth: s,
+      width: u,
+      x: a,
+      y: h
+    };
+  }
+  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(
+        (m) => m.value === this.cropSize.focusMode
+      )?.auto;
+      let a = this.cropSize.keepAspectRatio, h = this.cropSize.focusMode, r = this.cropSize.x, p = this.cropSize.y;
+      e === "free" ? (a = !1, h = "manual") : this.cropSize.unit === o.Pixel && !s && (r = 0, p = 0), s ? await this.handleRequestAutoCropSuggestion({
+        cropMode: e,
+        focusMode: h,
+        height: this.cropSize.height,
+        keepAspectRatio: a,
+        width: this.cropSize.width
+      }) : this.cropSize = {
+        ...this.cropSize,
+        cropMode: e,
+        focusMode: h,
+        keepAspectRatio: a,
+        x: r,
+        y: p
+      };
+    }
+  }
+  onCropFocusModeChange(t) {
+    const { mode: e } = t.detail;
+    this.focusModes.find((s) => s.value === e)?.auto && this.selectedFormat?.url ? this.handleRequestAutoCropSuggestion({
+      focusMode: e,
+      height: this.cropSize.height,
+      width: this.cropSize.width
+    }) : this.cropSize = {
+      ...this.cropSize,
+      focusMode: e
+    };
+  }
+  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), 1),
+        this.resizeSize.width
+      ), a = Math.min(
+        Math.max(Math.round(s / i), 1),
+        this.resizeSize.height
+      ), h = a * 100 / this.selectedFormat.height, r = s * 100 / this.selectedFormat.width;
+      let p = this.cropSize.x, m = this.cropSize.y;
+      p + r > 100 && (p = 100 - r), m + h > 100 && (m = 100 - h);
+      let u = this.cropSize.cropMode;
+      this.cropModes.find(
+        (y) => y.value === u
+      )?.auto && (u = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = h, 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: u,
+        height: a,
+        keepAspectRatio: t.detail.keepAspectRatio,
+        percentageHeight: h,
+        percentageWidth: r,
+        ratioHeight: t.detail.height,
+        ratioWidth: t.detail.width,
+        unit: o.AspectRatio,
+        width: s,
+        x: p,
+        y: m
+      };
+    } else {
+      const i = this.selectedFormat ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.selectedFormat ? t.detail.width * 100 / this.selectedFormat.width : 100;
+      let a = this.cropSize.x, h = this.cropSize.y;
+      a + s > 100 && (a = 100 - s), h + i > 100 && (h = 100 - i);
+      let r = this.cropSize.cropMode;
+      const p = this.cropModes.find(
+        (m) => m.value === r
+      )?.auto;
+      (t.detail.breakAspectRatio || p) && (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 = h) : 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: h
+      };
+    }
+    e !== this.cropSize.unit && (this.cropSize = {
+      ...this.cropSize,
+      cropMode: "free"
+    }, this.onCropChanged());
+  }
+  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.lastAction = c.Crop, !(!this.cropperElement || !this.selectedFormat))
+      if (e && a && s) {
+        let h = a, r = e;
+        if (s === o.AspectRatio && (h = this.cropSize.percentageWidth * this.selectedFormat.width / 100, r = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
+          this.transformations = [
+            ...this.transformations,
+            {
+              key: c.Crop,
+              value: {
+                height: r,
+                mode: i,
+                width: h
+              }
+            }
+          ];
+        else {
+          const p = this.cropSize.x / 100 * this.selectedFormat.width, m = this.cropSize.y / 100 * this.selectedFormat.height;
+          this.transformations = [
+            ...this.transformations,
+            {
+              key: c.Crop,
+              value: {
+                height: r,
+                unit: s,
+                width: h,
+                x: p,
+                y: m
+              }
+            }
+          ];
+        }
+      } else i && (this.transformations = [
+        ...this.transformations,
+        {
+          key: c.Crop,
+          value: {
+            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),
+        1
+      ), s = Math.max(Math.round(i / e), 1);
+      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, 1),
+        keepAspectRatio: t.detail.keepAspectRatio,
+        unit: t.detail.unit,
+        width: Math.max(t.detail.width, 1)
+      };
+  }
+  onResizeApply(t) {
+    if (!this.selectedFormat)
+      return;
+    const { height: e, unit: i, width: s } = t.detail;
+    this.lastAction = c.Resize;
+    const a = this.selectedFormat.width || this.defaultSize.width, h = this.selectedFormat.height || this.defaultSize.height;
+    let r = s, p = e;
+    this.resizeSize.unit !== i ? (r = a, p = h) : i === o.AspectRatio && (r = Math.round(s / e * h), p = h), this.transformations = [
+      ...this.transformations,
+      {
+        key: c.Resize,
+        value: {
+          height: p,
+          unit: i,
+          width: r
+        }
+      }
+    ];
+  }
+  onRotationChange(t) {
+    this.rotation = t.detail;
+  }
+  onRotationApply(t) {
+    if (!this.selectedFormat)
+      return;
+    const e = t.detail;
+    this.lastAction = c.Rotate, this.transformations = [
+      ...this.transformations,
+      {
+        key: c.Rotate,
+        value: {
+          rotation: e
+        }
+      }
+    ];
+  }
+  onQualityChange(t) {
+    if (!this.selectedFormat)
+      return;
+    const e = t.detail;
+    this.selectedFormat.quality = e, this.lastAction = c.Quality, this.transformations = [
+      ...this.transformations,
+      {
+        key: c.Quality,
+        value: {
+          quality: e
+        }
+      }
+    ];
+  }
+  onMetadataChange(t) {
+    if (!this.selectedFormat)
+      return;
+    const e = t.detail;
+    this.selectedFormat = {
+      ...this.selectedFormat,
+      keepMetadata: e
+    }, 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) {
+    if (!this.selectedFormat)
+      return;
+    const e = t.detail;
+    this.selectedFormat = {
+      ...this.selectedFormat,
+      extension: e
+    };
+  }
+  handleUndo() {
+    this.transformations = this.transformations.slice(0, -1);
+    const t = this.transformations.findLast(
+      (e) => e.key === c.Quality
+    )?.value?.quality;
+    this.selectedFormat && (this.selectedFormat = {
+      ...this.selectedFormat,
+      quality: t ?? 100
+    });
+  }
+  render() {
+    return A`<div
+      class="asset-link-format"
+      @cx-show=${this.onDetailsShow}
+      @cx-hide=${this.onDetailsHide}
+    >
+      <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-button
+          class="asset-link-format__undo"
+          variant="custom"
+          ?disabled=${this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1}
+          @click=${this.handleUndo}
+        >
+          ${this.localize.term("undo")}
+        </cx-button>
+      </cx-space>
+      <cx-asset-link-format-proxy
+        class="asset-link-format__details"
+        ?open=${this.activeSetting === "cx-asset-link-format-proxy"}
+        .items=${this.formats}
+        .value=${this.selectedProxy}
+        ?loading=${this.loading && this.lastAction === c.Proxy}
+        @cx-asset-link-format-proxy-change=${this.onProxyChange}
+      ></cx-asset-link-format-proxy>
+      <cx-asset-link-format-crop
+        class="asset-link-format__details"
+        ?open=${this.activeSetting === "cx-asset-link-format-crop"}
+        ?disabled-apply=${this.disabledCropApply}
+        ?loading=${this.loading && this.lastAction === c.Crop}
+        ?keep-aspect-ratio=${this.cropSize.keepAspectRatio}
+        focus-mode=${this.cropSize.focusMode}
+        crop-mode=${this.cropSize.cropMode}
+        width=${this.cropSize.width}
+        height=${this.cropSize.height}
+        max-width=${this.lastResizeSize[o.Pixel].width}
+        max-height=${this.lastResizeSize[o.Pixel].height}
+        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>
+      <cx-asset-link-format-resize
+        class="asset-link-format__details"
+        ?open=${this.activeSetting === "cx-asset-link-format-resize"}
+        ?loading=${this.loading && this.lastAction === c.Resize}
+        ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio}
+        width=${this.resizeSize.width}
+        height=${this.resizeSize.height}
+        max-width=${this.imageSize.width}
+        max-height=${this.imageSize.height}
+        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>
+      <cx-asset-link-format-rotation
+        class="asset-link-format__details"
+        ?loading=${this.loading && this.lastAction === c.Rotate}
+        ?open=${this.activeSetting === "cx-asset-link-format-rotation"}
+        value=${this.rotation}
+        @cx-asset-link-format-rotation-change=${this.onRotationChange}
+        @cx-asset-link-format-rotation-apply=${this.onRotationApply}
+      ></cx-asset-link-format-rotation>
+      <cx-asset-link-format-quality
+        class="asset-link-format__details"
+        ?loading=${this.loading && this.lastAction === c.Quality}
+        ?open=${this.activeSetting === "cx-asset-link-format-quality"}
+        value=${this.selectedFormat?.quality ?? 100}
+        @cx-asset-link-format-quality-change=${this.onQualityChange}
+      ></cx-asset-link-format-quality>
+      <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>
+      ${at(
+      this.useCustomExtension,
+      () => A`
+          <cx-asset-link-format-extension
+            .items=${this.extensions}
+            value=${this.selectedFormat?.extension ?? ""}
+            @cx-asset-link-format-extension-change=${this.onExtensionChange}
+          ></cx-asset-link-format-extension>
+        `
+    )}
+    </div>`;
+  }
+};
+d.styles = [O, Dt];
+d.dependencies = {
+  "cx-asset-link-format-crop": g,
+  "cx-asset-link-format-extension": L,
+  "cx-asset-link-format-metadata": H,
+  "cx-asset-link-format-proxy": $,
+  "cx-asset-link-format-quality": R,
+  "cx-asset-link-format-resize": w,
+  "cx-asset-link-format-rotation": _,
+  "cx-button": U,
+  "cx-space": E,
+  "cx-typography": W
+};
+f([
+  l({ attribute: "base-url", reflect: !0, type: String })
+], d.prototype, "baseUrl", 2);
+f([
+  l({ attribute: "access-token", reflect: !1, type: String })
+], d.prototype, "accessToken", 2);
+f([
+  l({ reflect: !1, type: Object })
+], d.prototype, "asset", 2);
+f([
+  l({ attribute: "crop-modes", reflect: !1, type: Array })
+], d.prototype, "cropModes", 2);
+f([
+  l({ attribute: "focus-modes", reflect: !1, type: Object })
+], d.prototype, "focusModes", 2);
+f([
+  l({ reflect: !1, type: Array })
+], d.prototype, "extensions", 2);
+f([
+  l({ reflect: !1, type: Array })
+], d.prototype, "proxies", 2);
+f([
+  l({ attribute: "for-cropper", reflect: !0, type: String })
+], d.prototype, "forCropper", 2);
+f([
+  l({ attribute: "use-session", reflect: !0, type: String })
+], d.prototype, "useSession", 2);
+f([
+  l({ reflect: !1, type: Array })
+], d.prototype, "transformations", 2);
+f([
+  l({ attribute: "selected-proxy", reflect: !0, type: String })
+], d.prototype, "selectedProxy", 2);
+f([
+  l({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
+], d.prototype, "useCustomExtension", 2);
+f([
+  l({ attribute: "last-image-size", reflect: !1, type: Object })
+], d.prototype, "lastImageSize", 2);
+f([
+  v()
+], d.prototype, "activeSetting", 2);
+f([
+  v()
+], d.prototype, "selectedFormat", 2);
+f([
+  v()
+], d.prototype, "resizeSize", 2);
+f([
+  v()
+], d.prototype, "cropSize", 2);
+f([
+  v()
+], d.prototype, "rotation", 2);
+f([
+  v()
+], d.prototype, "defaultSize", 2);
+f([
+  v()
+], d.prototype, "cropperElement", 2);
+f([
+  v()
+], d.prototype, "parameters", 2);
+f([
+  v()
+], d.prototype, "loading", 2);
+f([
+  v()
+], d.prototype, "lastAction", 2);
+f([
+  v()
+], d.prototype, "frozenIndex", 2);
+f([
+  k(["transformations"])
+], d.prototype, "handleTransformationsChange", 1);
+f([
+  k("selectedProxy")
+], d.prototype, "handleSelectedProxyChange", 1);
+f([
+  k("loading")
+], d.prototype, "handleLoadingChange", 1);
+d = f([
+  T("cx-asset-link-format")
+], d);
+export {
+  d as C,
+  dt as D,
+  Fe as a,
+  Ee as b,
+  He as c,
+  _t as f,
+  pt as t,
+  We as u
+};