@orangelogic/design-system 2.0.0-29DUO2-beta-1

package/library/components/asset-link-format.js

@@ -0,0 +1,2616 @@
+import "../chunks/cropper.tSDgXKqJ.js";
+import { C as q } from "../chunks/button.Dy5bRiPQ.js";
+import H from "./space.js";
+import { C as W } from "../chunks/typography.oDzoLbZS.js";
+import { n as l, C as F } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { b as rt, c as ht } from "../chunks/asset.DRyD94KY.js";
+import { c as E } from "../chunks/component.styles.DMSLciL5.js";
+import { T as c, U as o } from "../chunks/asset-link-format.BSRDqHg7.js";
+import { c as N } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as O } from "../chunks/i18n.Bge6Wbrz.js";
+import { w as k } from "../chunks/watch.q1sEjPWL.js";
+import { s as it, c as st } from "../chunks/number.CjNxU7Xs.js";
+import { i as D, x as b, E as lt } from "../chunks/lit-element.jLBm65_O.js";
+import { r as z } from "../chunks/state.CSDxrqLd.js";
+import { n as G } from "../chunks/when.Dr1es41R.js";
+import L from "./details.js";
+import nt from "./divider.js";
+import j from "./icon.js";
+import K from "./icon-button.js";
+import tt from "./input.js";
+import { C as X } from "../chunks/option.CiBFEqo6.js";
+import Y from "./select.js";
+import { c as ct } from "../chunks/image.mbpyiQpQ.js";
+import { e as T } from "../chunks/query.BBf1UFkC.js";
+import { c as Q } from "../chunks/repeat.DbF2p5ae.js";
+import { o as M } from "../chunks/style-map.llVFPd__.js";
+import at from "./tooltip.js";
+import pt from "./button-group.js";
+import dt from "./checkbox.js";
+const ut = 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 J({
+  asset: t,
+  baseUrl: e,
+  extension: i,
+  parameters: s,
+  transformations: a,
+  useSession: h = ""
+}) {
+  let r = e;
+  a && a.length > 0 && (r += "/t/");
+  const m = a?.findLast(
+    (v) => v.key === c.Quality
+  );
+  m && (a = [
+    ...a?.filter(
+      (v) => v.key !== c.Quality
+    ) || [],
+    m
+  ]), a?.forEach(({ key: v, value: w }) => {
+    if (v === c.Resize) {
+      const x = [
+        ...[
+          {
+            key: "re_w_",
+            value: Math.round(w.width ?? 0)
+          },
+          {
+            key: "re_h_",
+            value: Math.round(w.height ?? 0)
+          }
+        ].filter((n) => n.value !== void 0).map((n) => ({
+          key: n.key,
+          value: Math.round(Number(n.value))
+        })),
+        {
+          key: "re_rm_",
+          value: "stretch"
+        }
+      ];
+      x.forEach(({ key: n, value: $ }, B) => {
+        r += `${n}${$}${B < x.length - 1 ? "," : ""}`;
+      }), r += "/";
+    }
+    if (v === c.Crop) {
+      const x = [
+        ...[
+          {
+            key: "c_",
+            value: w.mode
+          },
+          ...w.disabledSize ? [] : [
+            {
+              key: "c_w_",
+              value: Math.round(w.width ?? 0)
+            },
+            {
+              key: "c_h_",
+              value: Math.round(w.height ?? 0)
+            },
+            {
+              key: "c_x_",
+              value: Math.round(w.x ?? 0)
+            },
+            {
+              key: "c_y_",
+              value: Math.round(w.y ?? 0)
+            }
+          ]
+        ].filter((n) => n.value !== void 0 && n.value !== null).map((n) => ({
+          key: n.key,
+          value: n.value
+        })),
+        {
+          key: "c_whu_",
+          value: "pixel"
+        }
+      ];
+      x.forEach(({ key: n, value: $ }, B) => {
+        const ot = ["c_w_", "c_h_", "c_x_", "c_y_"].includes(n);
+        r += `${n}${ot ? Math.round(Number($)) : $}${B < x.length - 1 ? "," : ""}`;
+      }), r += "/";
+    }
+    if (v === c.Rotate && ([
+      {
+        key: "r_a_",
+        value: w.rotation
+      }
+    ].filter((n) => n.value !== void 0).map((n) => ({
+      key: n.key,
+      value: Math.round(Number(n.value))
+    })).forEach(({ key: n, value: $ }) => {
+      r += `${n}${$}`;
+    }), r += "/"), v === c.Quality) {
+      const x = [
+        {
+          key: "q_level_",
+          value: w.quality
+        }
+      ].filter((n) => n.value !== void 0).map((n) => ({
+        key: n.key,
+        value: Math.round(Number(n.value))
+      }));
+      x.forEach(({ key: n, value: $ }, B) => {
+        r += `${n}${$}${B < x.length - 1 ? "," : ""}`;
+      }), r += "/";
+    }
+    if (v === c.Metadata) {
+      const x = [
+        {
+          key: "fl_keep_metadata",
+          value: w.keepMetadata
+        }
+      ].filter((n) => n.value !== void 0).map((n) => ({ key: n.key, value: n.value }));
+      x.forEach(({ key: n }, $) => {
+        r += `${n}${$ < x.length - 1 ? "," : ""}`;
+      }), r += "/";
+    }
+  }), i && (r += `${t?.identifier}${i}`);
+  const y = [];
+  return s && s.length > 0 && s.forEach(({ key: v, value: w }) => {
+    y.push(
+      `${encodeURIComponent(v.trim())}=${encodeURIComponent(w.trim())}`
+    );
+  }), y.length > 0 && (r += `?${y.join("&")}`), r.endsWith("/") && (r = r.slice(0, -1)), r;
+}
+const gt = 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 mt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, g = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? xt(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 && mt(e, i, a), a;
+};
+let d = class extends F {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.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 } = ct(
+          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 b`<cx-details
+      class="details"
+      ?open=${this.open}
+      @cx-show=${this.onShowDetails}
+      @cx-hide=${this.onHideDetails}
+    >
+      <cx-space slot="summary" align-items="center">
+        <div part="icon">
+          <cx-icon name="crop"></cx-icon>
+        </div>
+        <cx-typography variant="body2">
+          ${this.localize.term("crop")}
+        </cx-typography>
+      </cx-space>
+      <cx-space direction="vertical" spacing="small">
+        <cx-select
+          data-testid="cx-asset-link-format-crop-mode"
+          value=${this.cropMode}
+          hoist
+          style=${M({
+      width: "100%"
+    })}
+          @cx-change=${this.onCropModeChange}
+          ?disabled=${this.loading}
+        >
+          ${Q(
+      t,
+      (i) => i.value,
+      ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
+    )}
+          ${G(
+      e.length > 0,
+      () => b`<cx-divider></cx-divider>
+                <small>${this.localize.term("autoCropping")}</small>`
+    )}
+          ${Q(
+      e,
+      (i) => i.value,
+      ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
+    )}
+        </cx-select>
+        <cx-space spacing="small">
+          <div class="crop__input-group">
+            <cx-input
+              data-testid="cx-asset-link-format-crop-width"
+              placeholder=${this.localize.term("width")}
+              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=${M({
+      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>
+        ${G(
+      this.focusModes.length > 0,
+      () => b`
+            <cx-select
+              data-testid="cx-asset-link-format-crop-focus-mode"
+              value=${this.focusMode}
+              hoist
+              style=${M({
+        width: "100%"
+      })}
+              @cx-change=${this.onFocusModeChange}
+              ?disabled=${this.loading || this.selectedMode?.disabledSize}
+            >
+              ${Q(
+        this.focusModes,
+        (i) => i.value,
+        ({ label: i, value: s }) => b`<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=${M({
+      marginLeft: "auto"
+    })}
+          @click=${this.handleApply}
+        >
+          ${this.localize.term("apply")}
+        </cx-button>
+      </cx-space>
+    </cx-details>`;
+  }
+};
+d.styles = [E, gt];
+d.dependencies = {
+  "cx-button": q,
+  "cx-details": L,
+  "cx-divider": nt,
+  "cx-icon": j,
+  "cx-icon-button": K,
+  "cx-input": tt,
+  "cx-option": X,
+  "cx-select": Y,
+  "cx-space": H,
+  "cx-typography": W
+};
+g([
+  T(".details")
+], d.prototype, "base", 2);
+g([
+  l({ reflect: !0, type: Boolean })
+], d.prototype, "open", 2);
+g([
+  l({ reflect: !0, type: Number })
+], d.prototype, "width", 2);
+g([
+  l({ reflect: !0, type: Number })
+], d.prototype, "height", 2);
+g([
+  l({ attribute: "max-width", reflect: !0, type: Number })
+], d.prototype, "maxWidth", 2);
+g([
+  l({ attribute: "max-height", reflect: !0, type: Number })
+], d.prototype, "maxHeight", 2);
+g([
+  l({ attribute: "ratio-width", reflect: !0, type: Number })
+], d.prototype, "ratioWidth", 2);
+g([
+  l({ attribute: "ratio-height", reflect: !0, type: Number })
+], d.prototype, "ratioHeight", 2);
+g([
+  l({ attribute: "percentage-width", reflect: !0, type: Number })
+], d.prototype, "percentageWidth", 2);
+g([
+  l({ attribute: "percentage-height", reflect: !0, type: Number })
+], d.prototype, "percentageHeight", 2);
+g([
+  l({ reflect: !0, type: String })
+], d.prototype, "unit", 2);
+g([
+  l({ attribute: "disabled-apply", reflect: !0, type: Boolean })
+], d.prototype, "disabledApply", 2);
+g([
+  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], d.prototype, "lastAppliedSetting", 2);
+g([
+  l({ reflect: !0, type: Boolean })
+], d.prototype, "loading", 2);
+g([
+  l({ attribute: "crop-modes", reflect: !1, type: Array })
+], d.prototype, "cropModes", 2);
+g([
+  l({ attribute: "focus-modes", reflect: !1, type: Object })
+], d.prototype, "focusModes", 2);
+g([
+  l({ attribute: "focus-mode", reflect: !0, type: String })
+], d.prototype, "focusMode", 2);
+g([
+  l({ attribute: "crop-mode", reflect: !0, type: String })
+], d.prototype, "cropMode", 2);
+g([
+  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], d.prototype, "keepAspectRatio", 2);
+g([
+  z()
+], d.prototype, "invalidWidth", 2);
+g([
+  z()
+], d.prototype, "invalidHeight", 2);
+g([
+  z()
+], d.prototype, "aspectRatio", 2);
+g([
+  k("cropMode", { waitUntilFirstUpdate: !0 }),
+  k("maxWidth", { waitUntilFirstUpdate: !0 }),
+  k("maxHeight", { waitUntilFirstUpdate: !0 }),
+  k("keepAspectRatio")
+], d.prototype, "handleCropModeChange", 1);
+g([
+  k("open")
+], d.prototype, "handleOpenChange", 1);
+d = g([
+  N("cx-asset-link-format-crop")
+], d);
+const ft = 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 yt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, et = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? vt(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 U = class extends F {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.value = "", this.items = [];
+  }
+  handleExtensionChange(t) {
+    const e = t.target.value;
+    this.emit("cx-asset-link-format-extension-change", {
+      detail: e
+    });
+  }
+  render() {
+    return b`
+      <cx-space direction="vertical" spacing="small" class="extension">
+        <cx-typography variant="body2">
+          ${this.localize.term("extension")}
+        </cx-typography>
+        <cx-select
+          data-label=${this.localize.term("extension")}
+          data-testid="cx-asset-link-format-extension-select"
+          value=${this.value}
+          hoist
+          @cx-change=${this.handleExtensionChange}
+        >
+          ${Q(
+      this.items,
+      (t) => t.value,
+      (t) => b`
+              <cx-option value=${t.value}>${t.displayName}</cx-option>
+            `
+    )}
+        </cx-select>
+      </cx-space>
+    `;
+  }
+};
+U.styles = [E, ft];
+U.dependencies = {
+  "cx-option": X,
+  "cx-select": Y,
+  "cx-space": H,
+  "cx-typography": W
+};
+et([
+  l({ reflect: !0, type: String })
+], U.prototype, "value", 2);
+et([
+  l({ reflect: !1, type: Array })
+], U.prototype, "items", 2);
+U = et([
+  N("cx-asset-link-format-extension")
+], U);
+const wt = D`
+  cx-details::part(base) {
+    border-bottom-width: 0;
+  }
+`;
+var zt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, _ = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? St(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 && zt(e, i, a), a;
+};
+let C = class extends F {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
+  }
+  handleValueChange() {
+    this.scopedValue = this.value;
+  }
+  handleOpenChange() {
+    this.open || (this.scopedValue = this.value);
+  }
+  handleProxyChange(t) {
+    const e = t.target.value;
+    this.scopedValue = e;
+  }
+  /**
+   * Handles the application of the selected proxy format.
+   * This method emits a custom event with the selected proxy format when the "Apply" button is clicked.
+   * It prevents further actions if the component is currently loading.
+   */
+  handleApply() {
+    if (this.loading)
+      return;
+    const t = this.items.find(
+      (e) => e.id === this.scopedValue
+    );
+    t && this.emit("cx-asset-link-format-proxy-change", {
+      detail: t
+    });
+  }
+  /**
+   * Handles showing the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only shown when the user interacts with the base element.
+   */
+  onShowDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  /**
+   * Handles hiding the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only hidden when the user interacts with the base element.
+   */
+  onHideDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  render() {
+    return b`
+      <cx-details
+        class="details"
+        ?open=${this.open}
+        @cx-show=${this.onShowDetails}
+        @cx-hide=${this.onHideDetails}
+      >
+        <cx-space slot="summary" align-items="center">
+          <div part="icon">
+            <cx-icon name="photo_size_select_large"></cx-icon>
+          </div>
+          <cx-typography variant="body2">
+            ${this.localize.term("format")}
+          </cx-typography>
+        </cx-space>
+        <cx-space direction="vertical" spacing="small" class="format">
+          <cx-select
+            data-label=${this.localize.term("imageFormat")}
+            data-testid="cx-asset-link-format-proxy-select"
+            value=${this.scopedValue}
+            hoist
+            @cx-change=${this.handleProxyChange}
+            ?disabled=${this.loading}
+          >
+            ${Q(
+      this.items,
+      (t) => t.id,
+      (t) => b`
+                <cx-option value=${t.id}>${t.proxyLabel}</cx-option>
+              `
+    )}
+          </cx-select>
+          <cx-button
+            data-testid="cx-asset-link-format-proxy-apply"
+            variant="primary"
+            style=${M({
+      "margin-left": "auto"
+    })}
+            ?disabled=${this.scopedValue === this.value}
+            ?loading=${this.loading}
+            @click=${this.handleApply}
+          >
+            ${this.localize.term("apply")}
+          </cx-button>
+        </cx-space>
+      </cx-details>
+    `;
+  }
+};
+C.styles = [E, wt];
+C.dependencies = {
+  "cx-button": q,
+  "cx-details": L,
+  "cx-icon": j,
+  "cx-option": X,
+  "cx-select": Y,
+  "cx-space": H,
+  "cx-typography": W
+};
+_([
+  T(".details")
+], C.prototype, "base", 2);
+_([
+  l({ reflect: !0, type: Boolean })
+], C.prototype, "open", 2);
+_([
+  l({ reflect: !0, type: String })
+], C.prototype, "value", 2);
+_([
+  l({ reflect: !1, type: Array })
+], C.prototype, "items", 2);
+_([
+  l({ reflect: !0, type: Boolean })
+], C.prototype, "loading", 2);
+_([
+  z()
+], C.prototype, "scopedValue", 2);
+_([
+  k("value")
+], C.prototype, "handleValueChange", 1);
+_([
+  k("open", { waitUntilFirstUpdate: !0 })
+], C.prototype, "handleOpenChange", 1);
+C = _([
+  N("cx-asset-link-format-proxy")
+], C);
+const bt = D`
+  cx-details::part(base) {
+    border-bottom-width: 0;
+  }
+`;
+var kt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, I = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? $t(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 && kt(e, i, a), a;
+};
+let A = class extends F {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+  }
+  /**
+   * A computed property that checks if the current quality value is invalid.
+   * 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 b`
+      <cx-details
+        class="details"
+        ?open=${this.open}
+        @cx-show=${this.onShowDetails}
+        @cx-hide=${this.onHideDetails}
+      >
+        <cx-space slot="summary" align-items="center">
+          <div class="details__summary__icon">
+            <div part="icon">
+              <cx-icon name="blur_on"></cx-icon>
+            </div>
+          </div>
+          <cx-typography variant="body2">
+            ${this.localize.term("quality")}
+          </cx-typography>
+        </cx-space>
+        <cx-space spacing="small">
+          <cx-tooltip
+            data-testid="cx-asset-link-format-quality-tooltip"
+            content=${this.localize.term("qualityHelpText")}
+            hoist
+          >
+            <cx-input
+              data-testid="cx-asset-link-format-quality"
+              class="details__checkbox"
+              type="number"
+              value=${this.scopedValue}
+              min="0"
+              max="100"
+              step="1"
+              style=${M({
+      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>
+    `;
+  }
+};
+A.styles = [E, bt];
+A.dependencies = {
+  "cx-button": q,
+  "cx-details": L,
+  "cx-icon": j,
+  "cx-input": tt,
+  "cx-space": H,
+  "cx-tooltip": at,
+  "cx-typography": W
+};
+I([
+  T(".details")
+], A.prototype, "base", 2);
+I([
+  l({ reflect: !0, type: Boolean })
+], A.prototype, "open", 2);
+I([
+  l({ reflect: !0, type: Number })
+], A.prototype, "value", 2);
+I([
+  l({ reflect: !0, type: Boolean })
+], A.prototype, "loading", 2);
+I([
+  z()
+], A.prototype, "scopedValue", 2);
+I([
+  k("value")
+], A.prototype, "handleValueChange", 1);
+A = I([
+  N("cx-asset-link-format-quality")
+], A);
+const Ct = 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 At = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, S = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Rt(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 && At(e, i, a), a;
+};
+let f = class extends F {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = o.Pixel, this.lastAppliedSetting = {
+      [o.Pixel]: { height: 0, width: 0 },
+      [o.AspectRatio]: { height: 1, width: 1 }
+    }, this.loading = !1, this.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 b`<cx-details
+      class="details"
+      ?open=${this.open}
+      @cx-show=${this.onShowDetails}
+      @cx-hide=${this.onHideDetails}
+    >
+      <cx-space slot="summary" align-items="center">
+        <div part="icon">
+          <cx-icon name="aspect_ratio"></cx-icon>
+        </div>
+        <cx-typography variant="body2">
+          ${this.localize.term("resize")}
+        </cx-typography>
+      </cx-space>
+      <cx-space direction="vertical" spacing="small">
+        <cx-space spacing="small">
+          <div class="resize__input-group">
+            <cx-input
+              data-testid="cx-asset-link-format-resize-width"
+              placeholder=${this.localize.term("width")}
+              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=${M({
+      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=${M({
+      marginLeft: "auto"
+    })}
+          @click=${this.handleApply}
+        >
+          ${this.localize.term("apply")}
+        </cx-button>
+      </cx-space>
+    </cx-details>`;
+  }
+};
+f.styles = [E, Ct];
+f.dependencies = {
+  "cx-button": q,
+  "cx-details": L,
+  "cx-icon": j,
+  "cx-icon-button": K,
+  "cx-input": tt,
+  "cx-option": X,
+  "cx-select": Y,
+  "cx-space": H,
+  "cx-typography": W
+};
+S([
+  T(".details")
+], f.prototype, "base", 2);
+S([
+  l({ reflect: !0, type: Boolean })
+], f.prototype, "open", 2);
+S([
+  l({ reflect: !0, type: Number })
+], f.prototype, "width", 2);
+S([
+  l({ reflect: !0, type: Number })
+], f.prototype, "height", 2);
+S([
+  l({ attribute: "max-width", reflect: !0, type: Number })
+], f.prototype, "maxWidth", 2);
+S([
+  l({ attribute: "max-height", reflect: !0, type: Number })
+], f.prototype, "maxHeight", 2);
+S([
+  l({ attribute: "ratio-width", reflect: !0, type: Number })
+], f.prototype, "ratioWidth", 2);
+S([
+  l({ attribute: "ratio-height", reflect: !0, type: Number })
+], f.prototype, "ratioHeight", 2);
+S([
+  l({ reflect: !0, type: String })
+], f.prototype, "unit", 2);
+S([
+  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], f.prototype, "lastAppliedSetting", 2);
+S([
+  l({ reflect: !0, type: Boolean })
+], f.prototype, "loading", 2);
+S([
+  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], f.prototype, "keepAspectRatio", 2);
+S([
+  z()
+], f.prototype, "invalidWidth", 2);
+S([
+  z()
+], f.prototype, "invalidHeight", 2);
+S([
+  z()
+], f.prototype, "aspectRatio", 2);
+S([
+  k("cropMode", { waitUntilFirstUpdate: !0 }),
+  k("maxWidth", { waitUntilFirstUpdate: !0 }),
+  k("maxHeight", { waitUntilFirstUpdate: !0 }),
+  k("keepAspectRatio")
+], f.prototype, "handleCropModeChange", 1);
+S([
+  k("open")
+], f.prototype, "handleOpenChange", 1);
+f = S([
+  N("cx-asset-link-format-resize")
+], f);
+const Mt = D`
+  cx-details::part(base) {
+    border-bottom-width: 0;
+  }
+`;
+var _t = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, V = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Pt(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 && _t(e, i, a), a;
+};
+let R = class extends F {
+  constructor() {
+    super(...arguments), this.localize = new O(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 = it(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: it(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 b`
+      <cx-details class="details" ?open=${this.open}>
+        <cx-space slot="summary" align-items="center">
+          <div part="icon">
+            <cx-icon name="rotate_90_degrees_cw"></cx-icon>
+          </div>
+          <cx-typography variant="body2">Rotate</cx-typography>
+        </cx-space>
+        <cx-space spacing="small">
+          <cx-button-group label=${this.localize.term("history")}>
+            <cx-icon-button
+              data-testid="cx-asset-link-format-rotation-ccw"
+              name="rotate_90_degrees_ccw"
+              label=${this.localize.term("undo")}
+              outline
+              size="small"
+              ?disabled=${this.loading || this.value === -360}
+              @click=${this.handleCounterClockwiseClick}
+            >
+            </cx-icon-button>
+            <cx-icon-button
+              data-testid="cx-asset-link-format-rotation-cw"
+              name="rotate_90_degrees_cw"
+              label=${this.localize.term("redo")}
+              outline
+              size="small"
+              ?disabled=${this.loading || this.value === 360}
+              @click=${this.handleClockwiseClick}
+            >
+            </cx-icon-button>
+          </cx-button-group>
+          <cx-input
+            data-testid="cx-asset-link-format-rotation"
+            value=${this.invalidValue ? "" : this.value.toString()}
+            placeholder="0"
+            type="number"
+            min="-360"
+            max="360"
+            ?disabled=${this.loading}
+            style=${M({
+      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>
+    `;
+  }
+};
+R.styles = [E, Mt];
+R.dependencies = {
+  "cx-button": q,
+  "cx-button-group": pt,
+  "cx-details": L,
+  "cx-icon": j,
+  "cx-icon-button": K,
+  "cx-space": H,
+  "cx-typography": W
+};
+V([
+  T(".details")
+], R.prototype, "base", 2);
+V([
+  l({ reflect: !0, type: Boolean })
+], R.prototype, "open", 2);
+V([
+  l({ reflect: !0, type: Number })
+], R.prototype, "value", 2);
+V([
+  l({ reflect: !0, type: Boolean })
+], R.prototype, "loading", 2);
+V([
+  z()
+], R.prototype, "invalidValue", 2);
+V([
+  k("open", { waitUntilFirstUpdate: !0 })
+], R.prototype, "handleOpenChange", 1);
+R = V([
+  N("cx-asset-link-format-rotation")
+], R);
+const Ht = D`
+  cx-details::part(base) {
+    border-bottom-width: 0;
+  }
+`;
+var Wt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, Z = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ft(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 && Wt(e, i, a), a;
+};
+let P = class extends F {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = !1;
+  }
+  handleApply(t) {
+    this.emit("cx-asset-link-format-metadata-change", {
+      detail: t.target.checked
+    });
+  }
+  /**
+   * Handles showing the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only shown when the user interacts with the base element.
+   */
+  onShowDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  /**
+   * Handles hiding the details section.
+   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
+   * This ensures that the details section is only hidden when the user interacts with the base element.
+   */
+  onHideDetails(t) {
+    t.target !== this.base && t.stopPropagation();
+  }
+  render() {
+    return b`
+      <cx-details
+        class="details"
+        ?open=${this.open}
+        @cx-show=${this.onShowDetails}
+        @cx-hide=${this.onHideDetails}
+      >
+        <cx-space slot="summary" align-items="center">
+          <div class="details__summary__icon">
+            <div part="icon">
+              <cx-icon name="short_text"></cx-icon>
+            </div>
+          </div>
+          <cx-typography variant="body2">
+            ${this.localize.term("metadata")}
+          </cx-typography>
+        </cx-space>
+        <cx-space spacing="small">
+          <cx-tooltip
+            data-testid="cx-asset-link-format-metadata-tooltip"
+            content=${this.localize.term("metadataHelpText")}
+            hoist
+          >
+            <cx-checkbox
+              data-testid="cx-asset-link-format-metadata"
+              class="details__checkbox"
+              ?checked=${this.value}
+              @cx-change=${this.handleApply}
+            >
+              ${this.localize.term("preserveMetadata")}
+            </cx-checkbox>
+          </cx-tooltip>
+        </cx-space>
+      </cx-details>
+    `;
+  }
+};
+P.styles = [E, Ht];
+P.dependencies = {
+  "cx-button": q,
+  "cx-checkbox": dt,
+  "cx-details": L,
+  "cx-icon": j,
+  "cx-space": H,
+  "cx-tooltip": at,
+  "cx-typography": W
+};
+Z([
+  T(".details")
+], P.prototype, "base", 2);
+Z([
+  l({ reflect: !0, type: Boolean })
+], P.prototype, "open", 2);
+Z([
+  l({ reflect: !0, type: Boolean })
+], P.prototype, "value", 2);
+P = Z([
+  N("cx-asset-link-format-metadata")
+], P);
+var Et = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Nt(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 && Et(e, i, a), a;
+};
+let p = class extends F {
+  constructor() {
+    super(), this.localize = new O(this), this.baseUrl = 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.hideHeader = !1, this.queryElement = null, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
+      height: 0,
+      keepAspectRatio: !0,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: 0
+    }, this.cropSize = {
+      cropMode: "free",
+      focusMode: "manual",
+      height: 0,
+      keepAspectRatio: !0,
+      percentageHeight: 0,
+      percentageWidth: 0,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: 0,
+      x: 0,
+      y: 0
+    }, this.rotation = 0, this.defaultSize = {
+      height: 0,
+      width: 0
+    }, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.apiGetTransformAssetLink = rt, this.apiGetCropFocusMode = ht, 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 = st(
+      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 = st(
+      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 J({
+      asset: this.asset,
+      baseUrl: "",
+      parameters: this.parameters,
+      transformations: this.transformations,
+      useSession: this.useSession
+    }).replace(/\/t\//g, "");
+  }
+  runConnectedCallback() {
+    this.hasUpdated && this.cropperElement && (this.cropperElement.addEventListener(
+      "cx-cropper-crop-complete",
+      this.onCropComplete
+    ), this.cropperElement.addEventListener(
+      "cx-cropper-crop-drag-start",
+      this.onCropDragStart
+    ));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cropperElement && (this.cropperElement.removeEventListener(
+      "cx-cropper-crop-complete",
+      this.onCropComplete
+    ), this.cropperElement.removeEventListener(
+      "cx-cropper-crop-drag-start",
+      this.onCropDragStart
+    ));
+  }
+  updated(t) {
+    if ((t.has("forCropper") || t.has("queryElement")) && this.handleCropperSelectorChange(), t.has("asset") && this.handleAssetChange(), t.has("proxies") && this.handleProxiesChange(), t.has("activeSetting") && this.handleActiveSettingChange(), t.has("selectedFormat") && this.handleSelectedFormatChange(), t.has("resizeSize") && this.handleResizeSizeChange(), t.has("cropSize") && this.handleCropSizeChange(), t.has("rotation") && this.handleRotationChange(), t.has("cropperElement") && this.handleCropperElementChange(), t.has("selectedFormat")) {
+      if (!this.asset || !this.selectedFormat || this.selectedFormat.extension === t.get("selectedFormat")?.extension)
+        return;
+      const e = this.proxies?.find(
+        (s) => s.id === this.selectedProxy
+      );
+      this.loading = !0, this.apiGetTransformAssetLink({
+        assetId: this.asset.id,
+        extension: this.asset.extension,
+        format: e?.proxyName ?? "",
+        transformations: this.transformationString
+      }).then((s) => {
+        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === c.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+          height: s.height,
+          width: s.width
+        }, this.selectedFormat = {
+          ...this.selectedFormat,
+          height: s.height,
+          url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${s.relativePath}` : s.relativePath,
+          width: s.width
+          /**
+           * For local development uses the base URL to construct the full URL.
+           * url: `${this.baseUrl}/${response.relativePath}`,
+           */
+        });
+      });
+      const i = J({
+        asset: this.asset,
+        baseUrl: "",
+        extension: this.selectedFormat.extension,
+        parameters: this.parameters,
+        transformations: this.transformations,
+        useSession: this.useSession
+      });
+      this.emit("cx-asset-link-format-change", {
+        detail: i
+      });
+    }
+  }
+  getCropSize() {
+    return this.cropSize;
+  }
+  setActiveSetting(t) {
+    this.activeSetting = t;
+  }
+  freezeTransformations() {
+    this.frozenIndex = this.transformations.length - 1;
+  }
+  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 ?? "",
+      transformations: this.transformationString
+    });
+    if (this.loading = !1, !e?.relativePath || !this.selectedFormat)
+      return;
+    this.lastImageSize = {
+      height: e.height,
+      width: e.width
+    }, this.resizeSize = {
+      height: e.height,
+      keepAspectRatio: !0,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: e.width
+    }, this.cropSize = {
+      cropMode: "free",
+      focusMode: "manual",
+      height: e.height,
+      keepAspectRatio: this.cropSize.keepAspectRatio,
+      percentageHeight: 100,
+      percentageWidth: 100,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: e.width,
+      x: 0,
+      y: 0
+    }, this.lastAction === c.Rotate && (this.rotation = 0), this.lastAction = void 0;
+    const i = this.transformations.some(
+      (a) => a.key === c.Metadata
+    );
+    this.selectedFormat = {
+      ...this.selectedFormat,
+      height: e.height,
+      keepMetadata: i,
+      url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${e.relativePath}` : e.relativePath,
+      width: e.width
+      /**
+       * For local development uses the base URL to construct the full URL.
+       * url: `${this.baseUrl}/${response.relativePath}`,
+       */
+    };
+    const s = J({
+      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.queryElement ? this.cropperElement = this.queryElement.querySelector(`#${this.forCropper}`) : this.cropperElement = document.getElementById(this.forCropper));
+  }
+  handleAssetChange() {
+    if (!this.asset)
+      return;
+    this.freezeTransformations(), this.asset.width && this.asset.height && (this.defaultSize = {
+      height: Number.parseInt(this.asset.height, 10),
+      width: Number.parseInt(this.asset.width, 10)
+    });
+    const t = this.transformations.findLast(
+      (e) => e.key === c.Quality
+    );
+    this.selectedFormat = {
+      extension: this.asset.extension,
+      height: this.defaultSize.height,
+      keepMetadata: !1,
+      originalUrl: this.asset.originalUrl,
+      quality: t?.value?.quality || 100,
+      rotation: 0,
+      url: this.asset.imageUrl,
+      width: this.defaultSize.width,
+      x: 0,
+      y: 0
+    }, this.resizeSize = {
+      ...this.resizeSize,
+      height: this.defaultSize.height,
+      width: this.defaultSize.width
+    }, this.cropSize = {
+      cropMode: "free",
+      focusMode: "manual",
+      height: this.defaultSize.height,
+      keepAspectRatio: !0,
+      percentageHeight: 100,
+      percentageWidth: 100,
+      ratioHeight: 1,
+      ratioWidth: 1,
+      unit: o.Pixel,
+      width: this.defaultSize.width,
+      x: 0,
+      y: 0
+    }, this.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, m = a.x / i.formatWidth * e.formatWidth, y = a.y / i.formatHeight * e.formatHeight;
+        return {
+          ...s,
+          value: {
+            height: r,
+            width: h,
+            x: m,
+            y
+          }
+        };
+      }
+      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: m,
+    unit: y,
+    useCropMode: v,
+    width: w
+  }) {
+    if (!this.selectedFormat?.url || e === "manual")
+      return;
+    this.loading = !0, this.lastAction = c.Crop;
+    const x = await this.apiGetCropFocusMode({
+      autoCropMode: e,
+      cropHeight: i,
+      cropWidth: w,
+      imageUrl: this.selectedFormat.url
+    });
+    if (x) {
+      let n = a, $ = h;
+      i || (n = x.height * 100 / this.selectedFormat.height), w || ($ = x.width * 100 / this.selectedFormat.width), this.cropSize = {
+        ...this.cropSize,
+        height: x.height,
+        percentageHeight: n ?? this.cropSize.percentageHeight,
+        percentageWidth: $ ?? this.cropSize.percentageWidth,
+        width: x.width,
+        x: x.x * 100 / this.selectedFormat.width,
+        y: x.y * 100 / this.selectedFormat.height,
+        ...v ? {
+          cropMode: e,
+          focusMode: "manual",
+          keepAspectRatio: !1
+        } : {
+          cropMode: t ?? this.cropSize.cropMode,
+          focusMode: e
+        },
+        keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
+        ratioHeight: r ?? this.cropSize.ratioHeight,
+        ratioWidth: m ?? this.cropSize.ratioWidth,
+        unit: y ?? 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, m = this.cropSize.percentageHeight !== i;
+    let y = this.cropSize.height, v = this.cropSize.width;
+    r && (v = Math.round(s * this.selectedFormat.width / 100)), m && (y = Math.round(
+      i * this.selectedFormat.height / 100
+    ));
+    const w = this.cropSize.focusMode;
+    this.focusModes.find(
+      (n) => n.value === w
+    )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
+      focusMode: w,
+      height: y,
+      percentageHeight: i,
+      percentageWidth: s,
+      width: v
+    }) : this.cropSize = {
+      ...this.cropSize,
+      height: y,
+      percentageHeight: i,
+      percentageWidth: s,
+      width: v,
+      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(
+        (y) => y.value === this.cropSize.focusMode
+      )?.auto;
+      let a = this.cropSize.keepAspectRatio, h = this.cropSize.focusMode, r = this.cropSize.x, m = this.cropSize.y;
+      e === "free" ? (a = !1, h = "manual") : this.cropSize.unit === o.Pixel && !s && (r = 0, m = 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: m
+      };
+    }
+  }
+  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), 0),
+        this.resizeSize.width
+      ), a = Math.min(
+        Math.max(Math.round(s / i), 0),
+        this.resizeSize.height
+      ), h = a * 100 / this.selectedFormat.height, r = s * 100 / this.selectedFormat.width;
+      let m = this.cropSize.x, y = this.cropSize.y;
+      m + r > 100 && (m = 100 - r), y + h > 100 && (y = 100 - h);
+      let v = this.cropSize.cropMode;
+      this.cropModes.find(
+        (x) => x.value === v
+      )?.auto && (v = "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: v,
+        height: a,
+        keepAspectRatio: t.detail.keepAspectRatio,
+        percentageHeight: h,
+        percentageWidth: r,
+        ratioHeight: t.detail.height,
+        ratioWidth: t.detail.width,
+        unit: o.AspectRatio,
+        width: s,
+        x: m,
+        y
+      };
+    } 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 m = this.cropModes.find(
+        (y) => y.value === r
+      )?.auto;
+      (t.detail.breakAspectRatio || m) && (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 m = this.cropSize.x / 100 * this.selectedFormat.width, y = this.cropSize.y / 100 * this.selectedFormat.height;
+          this.transformations = [
+            ...this.transformations,
+            {
+              key: c.Crop,
+              value: {
+                height: r,
+                unit: s,
+                width: h,
+                x: m,
+                y
+              }
+            }
+          ];
+        }
+      } 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),
+        0
+      ), s = Math.max(Math.round(i / e), 0);
+      this.resizeSize = {
+        ...this.resizeSize,
+        height: s,
+        keepAspectRatio: t.detail.keepAspectRatio,
+        ratioHeight: t.detail.height,
+        ratioWidth: t.detail.width,
+        unit: t.detail.unit,
+        width: i
+      };
+    } else
+      this.resizeSize = {
+        ...this.resizeSize,
+        height: Math.max(t.detail.height, 0),
+        keepAspectRatio: t.detail.keepAspectRatio,
+        unit: t.detail.unit,
+        width: Math.max(t.detail.width, 0)
+      };
+  }
+  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, m = e;
+    this.resizeSize.unit !== i ? (r = a, m = h) : i === o.AspectRatio && (r = Math.round(s / e * h), m = h), this.transformations = [
+      ...this.transformations,
+      {
+        key: c.Resize,
+        value: {
+          height: m,
+          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 b`<div
+      class="asset-link-format"
+      @cx-show=${this.onDetailsShow}
+      @cx-hide=${this.onDetailsHide}
+    >
+      ${G(
+      !this.hideHeader,
+      () => b`
+          <cx-space
+            class="asset-link-format__section-header"
+            direction="horizontal"
+            spacing="small"
+            align-items="center"
+            justify-content="space-between"
+          >
+            <cx-typography variant="body3">
+              ${this.localize.term("transformations")}
+            </cx-typography>
+            <cx-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>
+        `,
+      () => lt
+    )}
+      <cx-asset-link-format-proxy
+        class="asset-link-format__details"
+        value=${this.selectedProxy ?? ""}
+        ?open=${this.activeSetting === "cx-asset-link-format-proxy"}
+        .items=${this.formats}
+        ?loading=${this.loading && this.lastAction === c.Proxy}
+        @cx-asset-link-format-proxy-change=${this.onProxyChange}
+      ></cx-asset-link-format-proxy>
+      <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>
+      ${G(
+      this.useCustomExtension,
+      () => b`
+          <cx-asset-link-format-extension
+            .items=${this.extensions}
+            value=${this.selectedFormat?.extension ?? ""}
+            @cx-asset-link-format-extension-change=${this.onExtensionChange}
+          ></cx-asset-link-format-extension>
+        `
+    )}
+    </div>`;
+  }
+};
+p.styles = [E, ut];
+p.dependencies = {
+  "cx-asset-link-format-crop": d,
+  "cx-asset-link-format-extension": U,
+  "cx-asset-link-format-metadata": P,
+  "cx-asset-link-format-proxy": C,
+  "cx-asset-link-format-quality": A,
+  "cx-asset-link-format-resize": f,
+  "cx-asset-link-format-rotation": R,
+  "cx-button": q,
+  "cx-space": H,
+  "cx-typography": W
+};
+u([
+  l({ attribute: "base-url", reflect: !0, type: String })
+], p.prototype, "baseUrl", 2);
+u([
+  l({ reflect: !1, type: Object })
+], p.prototype, "asset", 2);
+u([
+  l({ attribute: "crop-modes", reflect: !1, type: Array })
+], p.prototype, "cropModes", 2);
+u([
+  l({ attribute: "focus-modes", reflect: !1, type: Object })
+], p.prototype, "focusModes", 2);
+u([
+  l({ reflect: !1, type: Array })
+], p.prototype, "extensions", 2);
+u([
+  l({ reflect: !1, type: Array })
+], p.prototype, "proxies", 2);
+u([
+  l({ attribute: "for-cropper", reflect: !0, type: String })
+], p.prototype, "forCropper", 2);
+u([
+  l({ attribute: "use-session", reflect: !0, type: String })
+], p.prototype, "useSession", 2);
+u([
+  l({ reflect: !1, type: Array })
+], p.prototype, "transformations", 2);
+u([
+  l({ attribute: "selected-proxy", reflect: !0, type: String })
+], p.prototype, "selectedProxy", 2);
+u([
+  l({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
+], p.prototype, "useCustomExtension", 2);
+u([
+  l({ attribute: "last-image-size", reflect: !1, type: Object })
+], p.prototype, "lastImageSize", 2);
+u([
+  l({ attribute: "hide-header", reflect: !1, type: Boolean })
+], p.prototype, "hideHeader", 2);
+u([
+  l({ attribute: !1, reflect: !1, type: Object })
+], p.prototype, "queryElement", 2);
+u([
+  z()
+], p.prototype, "activeSetting", 2);
+u([
+  z()
+], p.prototype, "selectedFormat", 2);
+u([
+  z()
+], p.prototype, "resizeSize", 2);
+u([
+  z()
+], p.prototype, "cropSize", 2);
+u([
+  z()
+], p.prototype, "rotation", 2);
+u([
+  z()
+], p.prototype, "defaultSize", 2);
+u([
+  z()
+], p.prototype, "cropperElement", 2);
+u([
+  z()
+], p.prototype, "parameters", 2);
+u([
+  z()
+], p.prototype, "loading", 2);
+u([
+  z()
+], p.prototype, "lastAction", 2);
+u([
+  z()
+], p.prototype, "frozenIndex", 2);
+u([
+  k(["transformations"])
+], p.prototype, "handleTransformationsChange", 1);
+u([
+  k("selectedProxy")
+], p.prototype, "handleSelectedProxyChange", 1);
+u([
+  k("loading")
+], p.prototype, "handleLoadingChange", 1);
+p = u([
+  N("cx-asset-link-format")
+], p);
+export {
+  p as default
+};