@orangelogic/design-system 2.133.0 → 2.135.0

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

@@ -1,2166 +1,19 @@
 import "./cropper.js";
-import { C as B } from "../chunks/button.DYoFn504.js";
-import _ from "./space.js";
-import { C as F } from "../chunks/typography.DJC_UXgs.js";
-import { n, C as W } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as rt, d as ht } from "../chunks/asset.CcxcYY9d.js";
-import { c as E } from "../chunks/component.styles.CRO4Odto.js";
-import { U as a, T as l } from "../chunks/asset-link-format.QzzboHHE.js";
-import { c as N } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as U } from "../chunks/i18n.DoMIwXr2.js";
-import { w } from "../chunks/watch.CThbualB.js";
-import { s as et, c as it } from "../chunks/number.B4PQLJIg.js";
-import { b as G } from "../chunks/transformation.c-RS37zA.js";
-import { i as O, x as m, E as nt } from "../chunks/lit-element.jLBm65_O.js";
-import { r as z } from "../chunks/state.CSDxrqLd.js";
-import { n as k } from "../chunks/when.Dr1es41R.js";
-import I from "./details.js";
-import lt from "./divider.js";
-import { C as L } from "../chunks/icon.DnBh6-56.js";
-import { C as K } from "../chunks/icon-button.B-Jf9W3v.js";
-import { C as J } from "../chunks/input.CQNhMu4z.js";
-import { C as X } from "../chunks/option.SCVixE2L.js";
-import Y from "./select.js";
-import { c as ct } from "../chunks/image.BzmclWBR.js";
-import { e as V } from "../chunks/query.BBf1UFkC.js";
-import { c as j } from "../chunks/repeat.DbF2p5ae.js";
-import { o as R } from "../chunks/style-map.llVFPd__.js";
-import st from "./tooltip.js";
-import pt from "./button-group.js";
-import { C as dt } from "../chunks/checkbox.uH0uF0OV.js";
-const ut = O`.asset-link-format__details{--header-padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__details::part(icon){width:var(--cx-font-size-3x-large);height:var(--cx-font-size-3x-large);background-color:var(--cx-color-neutral-100);border-radius:var(--cx-border-radius-large);color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-large);justify-content:center;align-items:center;display:flex}.asset-link-format__details::part(input-label){color:var(--cx-color-neutral-400);margin-inline-start:var(--cx-spacing-small)}.asset-link-format__header{padding:var(--cx-spacing-medium)}.asset-link-format__section-header{padding:0 var(--cx-spacing-medium);border-top:var(--section-header-border-width,1px) solid var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-50)}.asset-link-format__undo,.asset-link-format__reset{--color:var(--cx-color-primary);--background-color:transparent}`, mt = O`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.crop__unit-select{width:120px}.crop__input-group{flex:1;display:flex}`;
-var gt = Object.defineProperty, ft = Object.getOwnPropertyDescriptor, x = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? ft(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (o = (s ? h(e, i, o) : h(o)) || o);
-  return s && o && gt(e, i, o), o;
-};
-let u = class extends W {
-  constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = a.Pixel, this.disabledApply = !1, this.canApply = !1, this.lastAppliedSetting = {
-      [a.Pixel]: {
-        height: 0,
-        percentageHeight: 100,
-        percentageWidth: 100,
-        unit: a.Pixel,
-        width: 0,
-        x: 0,
-        y: 0
-      },
-      [a.AspectRatio]: {
-        height: 1,
-        percentageHeight: 100,
-        percentageWidth: 100,
-        unit: a.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 === a.Pixel && this.width && this.height) {
-        this.aspectRatio = this.width / this.height;
-        return;
-      } else if (this.unit === a.AspectRatio && this.ratioWidth && this.ratioHeight) {
-        this.aspectRatio = this.ratioWidth / this.ratioHeight;
-        return;
-      }
-    }
-    if (this.maxWidth && this.maxHeight && Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight)) {
-      this.aspectRatio = this.maxWidth / this.maxHeight;
-      return;
-    }
-    this.aspectRatio = 1;
-  }
-  async handleOpenChange() {
-    if (this.cropMode = "free", await this.updateComplete, !this.open) {
-      if (!this.canApply)
-        return;
-      this.width = this.lastAppliedSetting[a.Pixel].width, this.height = this.lastAppliedSetting[a.Pixel].height, this.unit = a.Pixel, this.emit("cx-asset-link-format-crop-change", {
-        detail: {
-          height: this.lastAppliedSetting[a.Pixel].height,
-          keepAspectRatio: this.keepAspectRatio,
-          unit: a.Pixel,
-          width: this.lastAppliedSetting[a.Pixel].width
-        }
-      });
-    }
-  }
-  handleWidthChange(t) {
-    if (!t.target.value) {
-      this.invalidWidth = !0;
-      return;
-    }
-    this.invalidWidth = !1;
-    let e = Number(t.target.value);
-    this.unit === a.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
-    let i = this.unit === a.Pixel ? this.height : this.ratioHeight, s = !1;
-    this.keepAspectRatio && (i = Math.round(e / this.aspectRatio), this.unit === a.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 === a.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
-    let i = this.unit === a.Pixel ? this.width : this.ratioWidth, s = !1;
-    this.keepAspectRatio && (i = Math.round(e * this.aspectRatio), this.unit === a.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[a.Pixel].height,
-          keepAspectRatio: !1,
-          silent: !0,
-          unit: a.Pixel,
-          width: this.lastAppliedSetting[a.Pixel].width
-        }
-      });
-    else if (!i) {
-      const [s, o] = e.split(":").map(Number);
-      if (this.unit === a.Pixel) {
-        let r = s, h = o;
-        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: h, width: r } = ct(
-          this.maxWidth,
-          this.maxHeight,
-          s,
-          o
-        )), this.emit("cx-asset-link-format-crop-change", {
-          detail: {
-            height: h,
-            keepAspectRatio: !0,
-            silent: !0,
-            unit: a.Pixel,
-            width: r
-          }
-        });
-      } else
-        this.emit("cx-asset-link-format-crop-change", {
-          detail: {
-            height: o,
-            keepAspectRatio: !0,
-            silent: !0,
-            unit: a.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 === a.AspectRatio ? this.emit("cx-asset-link-format-crop-change", {
-      detail: {
-        height: this.lastAppliedSetting[a.AspectRatio].height,
-        keepAspectRatio: this.keepAspectRatio,
-        unit: a.AspectRatio,
-        width: this.lastAppliedSetting[a.AspectRatio].width
-      }
-    }) : this.emit("cx-asset-link-format-crop-change", {
-      detail: {
-        height: this.lastAppliedSetting[a.Pixel].height,
-        keepAspectRatio: this.keepAspectRatio,
-        unit: a.Pixel,
-        width: this.lastAppliedSetting[a.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 === a.Pixel ? this.height : this.ratioHeight,
-        keepAspectRatio: !this.keepAspectRatio,
-        unit: this.unit,
-        width: this.unit === a.Pixel ? this.width : this.ratioWidth
-      }
-    });
-  }
-  render() {
-    const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
-    return m`<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=${R({
-      width: "100%"
-    })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${j(
-      t,
-      (i) => i.value,
-      ({ label: i, value: s }) => m`<cx-option value=${s}>${i}</cx-option>`
-    )}
-          ${k(
-      e.length > 0,
-      () => m`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
-    )}
-          ${j(
-      e,
-      (i) => i.value,
-      ({ label: i, value: s }) => m`<cx-option value=${s}>${i}</cx-option>`
-    )}</cx-select><cx-space spacing="small"><div class="crop__input-group"><cx-input data-testid="cx-asset-link-format-crop-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === a.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=${R({
-      color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
-    })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === a.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=${a.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${a.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${k(
-      this.focusModes.length > 0,
-      () => m`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${R({
-        width: "100%"
-      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${j(
-        this.focusModes,
-        (i) => i.value,
-        ({ label: i, value: s }) => m`<cx-option value=${s}>${i}</cx-option>`
-      )}</cx-select>`
-    )}
-        ${k(this.canApply, () => m`<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${R({
-      marginLeft: "auto"
-    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
-  }
-};
-u.styles = [E, mt];
-u.dependencies = {
-  "cx-button": B,
-  "cx-details": I,
-  "cx-divider": lt,
-  "cx-icon": L,
-  "cx-icon-button": K,
-  "cx-input": J,
-  "cx-option": X,
-  "cx-select": Y,
-  "cx-space": _,
-  "cx-typography": F
-};
-x([
-  V(".details")
-], u.prototype, "base", 2);
-x([
-  n({ reflect: !0, type: Boolean })
-], u.prototype, "open", 2);
-x([
-  n({ reflect: !0, type: Number })
-], u.prototype, "width", 2);
-x([
-  n({ reflect: !0, type: Number })
-], u.prototype, "height", 2);
-x([
-  n({ attribute: "max-width", reflect: !0, type: Number })
-], u.prototype, "maxWidth", 2);
-x([
-  n({ attribute: "max-height", reflect: !0, type: Number })
-], u.prototype, "maxHeight", 2);
-x([
-  n({ attribute: "ratio-width", reflect: !0, type: Number })
-], u.prototype, "ratioWidth", 2);
-x([
-  n({ attribute: "ratio-height", reflect: !0, type: Number })
-], u.prototype, "ratioHeight", 2);
-x([
-  n({ attribute: "percentage-width", reflect: !0, type: Number })
-], u.prototype, "percentageWidth", 2);
-x([
-  n({ attribute: "percentage-height", reflect: !0, type: Number })
-], u.prototype, "percentageHeight", 2);
-x([
-  n({ reflect: !0, type: String })
-], u.prototype, "unit", 2);
-x([
-  n({ attribute: "disabled-apply", reflect: !0, type: Boolean })
-], u.prototype, "disabledApply", 2);
-x([
-  n({ attribute: "can-apply", reflect: !0, type: Boolean })
-], u.prototype, "canApply", 2);
-x([
-  n({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], u.prototype, "lastAppliedSetting", 2);
-x([
-  n({ reflect: !0, type: Boolean })
-], u.prototype, "loading", 2);
-x([
-  n({ attribute: "crop-modes", reflect: !1, type: Array })
-], u.prototype, "cropModes", 2);
-x([
-  n({ attribute: "focus-modes", reflect: !1, type: Object })
-], u.prototype, "focusModes", 2);
-x([
-  n({ attribute: "focus-mode", reflect: !0, type: String })
-], u.prototype, "focusMode", 2);
-x([
-  n({ attribute: "crop-mode", reflect: !0, type: String })
-], u.prototype, "cropMode", 2);
-x([
-  n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], u.prototype, "keepAspectRatio", 2);
-x([
-  z()
-], u.prototype, "invalidWidth", 2);
-x([
-  z()
-], u.prototype, "invalidHeight", 2);
-x([
-  z()
-], u.prototype, "aspectRatio", 2);
-x([
-  w("cropMode", { waitUntilFirstUpdate: !0 }),
-  w("maxWidth", { waitUntilFirstUpdate: !0 }),
-  w("maxHeight", { waitUntilFirstUpdate: !0 }),
-  w("keepAspectRatio")
-], u.prototype, "handleCropModeChange", 1);
-x([
-  w("open")
-], u.prototype, "handleOpenChange", 1);
-u = x([
-  N("cx-asset-link-format-crop")
-], u);
-const xt = O`.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, zt = Object.getOwnPropertyDescriptor, tt = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? zt(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (o = (s ? h(e, i, o) : h(o)) || o);
-  return s && o && yt(e, i, o), o;
-};
-let T = class extends W {
-  constructor() {
-    super(...arguments), this.localize = new U(this), this.value = "", this.items = [];
-  }
-  handleExtensionChange(t) {
-    const e = t.target.value;
-    this.emit("cx-asset-link-format-extension-change", {
-      detail: e
-    });
-  }
-  render() {
-    return m`<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}>${j(
-      this.items,
-      (t) => t.value,
-      (t) => m`<cx-option value=${t.value}>${t.displayName}</cx-option>`
-    )}</cx-select></cx-space>`;
-  }
-};
-T.styles = [E, xt];
-T.dependencies = {
-  "cx-option": X,
-  "cx-select": Y,
-  "cx-space": _,
-  "cx-typography": F
-};
-tt([
-  n({ reflect: !0, type: String })
-], T.prototype, "value", 2);
-tt([
-  n({ reflect: !1, type: Array })
-], T.prototype, "items", 2);
-T = tt([
-  N("cx-asset-link-format-extension")
-], T);
-const St = O`cx-details::part(base){border-bottom-width:0}`;
-var wt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, M = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? bt(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (o = (s ? h(e, i, o) : h(o)) || o);
-  return s && o && wt(e, i, o), o;
-};
-let $ = class extends W {
-  constructor() {
-    super(...arguments), this.localize = new U(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 m`<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}>${j(
-      this.items,
-      (t) => t.id,
-      (t) => m`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
-    )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${R({
-      "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 = [E, St];
-$.dependencies = {
-  "cx-button": B,
-  "cx-details": I,
-  "cx-icon": L,
-  "cx-option": X,
-  "cx-select": Y,
-  "cx-space": _,
-  "cx-typography": F
-};
-M([
-  V(".details")
-], $.prototype, "base", 2);
-M([
-  n({ reflect: !0, type: Boolean })
-], $.prototype, "open", 2);
-M([
-  n({ reflect: !0, type: String })
-], $.prototype, "value", 2);
-M([
-  n({ reflect: !1, type: Array })
-], $.prototype, "items", 2);
-M([
-  n({ reflect: !0, type: Boolean })
-], $.prototype, "loading", 2);
-M([
-  z()
-], $.prototype, "scopedValue", 2);
-M([
-  w("value")
-], $.prototype, "handleValueChange", 1);
-M([
-  w("open", { waitUntilFirstUpdate: !0 })
-], $.prototype, "handleOpenChange", 1);
-$ = M([
-  N("cx-asset-link-format-proxy")
-], $);
-const vt = O`cx-details::part(base){border-bottom-width:0}`;
-var kt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, D = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? $t(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (o = (s ? h(e, i, o) : h(o)) || o);
-  return s && o && kt(e, i, o), o;
-};
-let A = class extends W {
-  constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.value = 100, this.loading = !1, this.canApply = !1, this.scopedValue = 100;
-  }
-  /**
-   * A computed property that checks if the current quality value is invalid.
-   * The value is considered invalid if it is not a number, less than 1, greater than 100, or equal to the current value.
-   * @return {boolean} True if the value is invalid, false otherwise.
-   */
-  get invalidValue() {
-    return isNaN(Number(this.scopedValue)) || Number(this.scopedValue) < 1 || Number(this.scopedValue) > 100 || this.value === this.scopedValue;
-  }
-  handleValueChange() {
-    this.scopedValue = this.value;
-  }
-  handleQualityChange(t) {
-    const e = t.target.value;
-    this.scopedValue = Number(e), !this.canApply && !this.invalidValue && this.emit("cx-asset-link-format-quality-change", {
-      detail: this.scopedValue
-    });
-  }
-  /**
-   * Handles the application of the input quality.
-   * This method emits a custom event with the input quality when the "Apply" button is clicked.
-   * It prevents further actions if the component is currently loading.
-   */
-  handleApply() {
-    this.loading || this.emit("cx-asset-link-format-quality-change", {
-      detail: Number(this.scopedValue)
-    });
-  }
-  /**
-   * Handles showing the details section.
-   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
-   * This ensures that the details section is only shown when the user interacts with the base element.
-   */
-  onShowDetails(t) {
-    t.target !== this.base && t.stopPropagation();
-  }
-  /**
-   * Handles hiding the details section.
-   * This method prevents the event from propagating if the target is not the base element, such as tooltips, select dropdowns, or other interactive elements inside the details.
-   * This ensures that the details section is only hidden when the user interacts with the base element.
-   */
-  onHideDetails(t) {
-    t.target !== this.base && t.stopPropagation();
-  }
-  render() {
-    return m`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="blur_on"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("quality")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-quality-tooltip" content=${this.localize.term("qualityHelpText")} hoist><cx-input data-testid="cx-asset-link-format-quality" class="details__checkbox" mask="num" .maskBlocks=${{ num: { mask: Number, max: 100, min: 1 } }} value=${this.scopedValue.toString()} style=${R({
-      flex: "1"
-    })} @cx-input=${this.handleQualityChange}></cx-input></cx-tooltip>${k(this.canApply, () => m`<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, vt];
-A.dependencies = {
-  "cx-button": B,
-  "cx-details": I,
-  "cx-icon": L,
-  "cx-input": J,
-  "cx-space": _,
-  "cx-tooltip": st,
-  "cx-typography": F
-};
-D([
-  V(".details")
-], A.prototype, "base", 2);
-D([
-  n({ reflect: !0, type: Boolean })
-], A.prototype, "open", 2);
-D([
-  n({ reflect: !0, type: Number })
-], A.prototype, "value", 2);
-D([
-  n({ reflect: !0, type: Boolean })
-], A.prototype, "loading", 2);
-D([
-  n({ attribute: "can-apply", reflect: !0, type: Boolean })
-], A.prototype, "canApply", 2);
-D([
-  z()
-], A.prototype, "scopedValue", 2);
-D([
-  w("value")
-], A.prototype, "handleValueChange", 1);
-A = D([
-  N("cx-asset-link-format-quality")
-], A);
-const At = O`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.resize__unit-select{width:120px}.resize__input-group{flex:1;display:flex}`;
-var Ct = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, S = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? Rt(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (o = (s ? h(e, i, o) : h(o)) || o);
-  return s && o && Ct(e, i, o), o;
-};
-let y = class extends W {
-  constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = a.Pixel, this.lastAppliedSetting = {
-      [a.Pixel]: { height: 0, width: 0 },
-      [a.AspectRatio]: { height: 1, width: 1 }
-    }, this.loading = !1, this.canApply = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
-  }
-  /**
-   * A computed property that checks if the current resize settings match the last applied settings.
-   * This is used to disable the apply button when no changes have been made.
-   * @returns {boolean} True if the current settings match the last applied settings, false otherwise.
-   */
-  get disabledApply() {
-    return this.lastAppliedSetting[this.unit].width === this.width && this.lastAppliedSetting[this.unit].height === this.height;
-  }
-  async handleCropModeChange() {
-    if (this.keepAspectRatio) {
-      if (this.unit === a.Pixel && this.width && this.height) {
-        this.aspectRatio = this.width / this.height;
-        return;
-      } else if (this.unit === a.AspectRatio && this.ratioWidth && this.ratioHeight) {
-        this.aspectRatio = this.ratioWidth / this.ratioHeight;
-        return;
-      }
-    }
-    if (this.maxWidth && this.maxHeight && Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight)) {
-      this.aspectRatio = this.maxWidth / this.maxHeight;
-      return;
-    }
-    this.aspectRatio = 1;
-  }
-  async handleOpenChange() {
-    if (await this.updateComplete, !this.open) {
-      if (!this.canApply)
-        return;
-      this.width = this.lastAppliedSetting[a.Pixel].width, this.height = this.lastAppliedSetting[a.Pixel].height, this.unit = a.Pixel, this.emit("cx-asset-link-format-resize-change", {
-        detail: {
-          height: this.lastAppliedSetting[a.Pixel].height,
-          keepAspectRatio: this.keepAspectRatio,
-          unit: a.Pixel,
-          width: this.lastAppliedSetting[a.Pixel].width
-        }
-      });
-    }
-  }
-  handleWidthChange(t) {
-    if (!t.target.value) {
-      this.invalidWidth = !0;
-      return;
-    }
-    this.invalidWidth = !1;
-    let e = Number(t.target.value);
-    this.unit === a.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
-    let i = this.unit === a.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 === a.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
-    let i = this.unit === a.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 === a.AspectRatio ? this.emit("cx-asset-link-format-resize-change", {
-      detail: {
-        height: this.lastAppliedSetting[a.AspectRatio].height,
-        keepAspectRatio: this.keepAspectRatio,
-        unit: a.AspectRatio,
-        width: this.lastAppliedSetting[a.AspectRatio].width
-      }
-    }) : this.emit("cx-asset-link-format-resize-change", {
-      detail: {
-        height: this.lastAppliedSetting[a.Pixel].height,
-        keepAspectRatio: this.keepAspectRatio,
-        unit: a.Pixel,
-        width: this.lastAppliedSetting[a.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 === a.Pixel ? this.height : this.ratioHeight,
-        keepAspectRatio: !this.keepAspectRatio,
-        unit: this.unit,
-        width: this.unit === a.Pixel ? this.width : this.ratioWidth
-      }
-    });
-  }
-  render() {
-    return m`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="aspect_ratio"></cx-icon></div><cx-typography variant="body2">${this.localize.term("resize")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-space spacing="small"><div class="resize__input-group"><cx-input data-testid="cx-asset-link-format-resize-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === a.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=${R({
-      color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
-    })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === a.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=${a.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${a.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${k(this.canApply, () => m`<cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${R({
-      marginLeft: "auto"
-    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
-  }
-};
-y.styles = [E, At];
-y.dependencies = {
-  "cx-button": B,
-  "cx-details": I,
-  "cx-icon": L,
-  "cx-icon-button": K,
-  "cx-input": J,
-  "cx-option": X,
-  "cx-select": Y,
-  "cx-space": _,
-  "cx-typography": F
-};
-S([
-  V(".details")
-], y.prototype, "base", 2);
-S([
-  n({ reflect: !0, type: Boolean })
-], y.prototype, "open", 2);
-S([
-  n({ reflect: !0, type: Number })
-], y.prototype, "width", 2);
-S([
-  n({ reflect: !0, type: Number })
-], y.prototype, "height", 2);
-S([
-  n({ attribute: "max-width", reflect: !0, type: Number })
-], y.prototype, "maxWidth", 2);
-S([
-  n({ attribute: "max-height", reflect: !0, type: Number })
-], y.prototype, "maxHeight", 2);
-S([
-  n({ attribute: "ratio-width", reflect: !0, type: Number })
-], y.prototype, "ratioWidth", 2);
-S([
-  n({ attribute: "ratio-height", reflect: !0, type: Number })
-], y.prototype, "ratioHeight", 2);
-S([
-  n({ reflect: !0, type: String })
-], y.prototype, "unit", 2);
-S([
-  n({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], y.prototype, "lastAppliedSetting", 2);
-S([
-  n({ reflect: !0, type: Boolean })
-], y.prototype, "loading", 2);
-S([
-  n({ attribute: "can-apply", reflect: !0, type: Boolean })
-], y.prototype, "canApply", 2);
-S([
-  n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], y.prototype, "keepAspectRatio", 2);
-S([
-  z()
-], y.prototype, "invalidWidth", 2);
-S([
-  z()
-], y.prototype, "invalidHeight", 2);
-S([
-  z()
-], y.prototype, "aspectRatio", 2);
-S([
-  w("cropMode", { waitUntilFirstUpdate: !0 }),
-  w("maxWidth", { waitUntilFirstUpdate: !0 }),
-  w("maxHeight", { waitUntilFirstUpdate: !0 }),
-  w("keepAspectRatio")
-], y.prototype, "handleCropModeChange", 1);
-S([
-  w("open")
-], y.prototype, "handleOpenChange", 1);
-y = S([
-  N("cx-asset-link-format-resize")
-], y);
-const Mt = O`cx-details::part(base){border-bottom-width:0}`;
-var Pt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, q = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? Ht(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (o = (s ? h(e, i, o) : h(o)) || o);
-  return s && o && Pt(e, i, o), o;
-};
-let C = class extends W {
-  constructor() {
-    super(...arguments), this.localize = new U(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.canApply = !1;
-  }
-  handleOpenChange() {
-    if (!this.open) {
-      if (!this.canApply)
-        return;
-      this.emit("cx-asset-link-format-rotation-change", {
-        detail: 0
-      });
-    }
-  }
-  handleRotationChange(t) {
-    const e = t.target.value, i = et(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: et(t)
-    });
-  }
-  handleClockwiseClick() {
-    this.handleButtonClick(this.value + 90);
-  }
-  handleCounterClockwiseClick() {
-    this.handleButtonClick(this.value - 90);
-  }
-  /**
-   * Handles the application of the input rotation.
-   * This method emits a custom event with the input rotation when the "Apply" button is clicked.
-   * It prevents further actions if the component is currently loading.
-   */
-  handleApply() {
-    this.value === 360 || this.value === -360 || this.loading || this.emit("cx-asset-link-format-rotation-apply", {
-      detail: this.value
-    });
-  }
-  render() {
-    return m`<cx-details class="details" ?open=${this.open}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="rotate_90_degrees_cw"></cx-icon></div><cx-typography variant="body2">Rotate</cx-typography></cx-space><cx-space spacing="small"><cx-button-group label=${this.localize.term("history")}><cx-icon-button data-testid="cx-asset-link-format-rotation-ccw" name="rotate_90_degrees_ccw" label=${this.localize.term("undo")} outline size="small" ?disabled=${this.loading || this.value === -360} @click=${this.handleCounterClockwiseClick}></cx-icon-button><cx-icon-button data-testid="cx-asset-link-format-rotation-cw" name="rotate_90_degrees_cw" label=${this.localize.term("redo")} outline size="small" ?disabled=${this.loading || this.value === 360} @click=${this.handleClockwiseClick}></cx-icon-button></cx-button-group><cx-input data-testid="cx-asset-link-format-rotation" value=${(this.value + this.defaultValue).toString()} placeholder="0" mask="num" .maskBlocks=${{ num: { mask: Number, max: 360, min: -360, signed: !0 } }} ?disabled=${this.loading} style=${R({
-      flex: "none",
-      width: "80px"
-    })} @cx-input=${this.handleRotationChange}></cx-input>${k(this.canApply, () => m`<cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === 0} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
-  }
-};
-C.styles = [E, Mt];
-C.dependencies = {
-  "cx-button": B,
-  "cx-button-group": pt,
-  "cx-details": I,
-  "cx-icon": L,
-  "cx-icon-button": K,
-  "cx-space": _,
-  "cx-typography": F
-};
-q([
-  V(".details")
-], C.prototype, "base", 2);
-q([
-  n({ reflect: !0, type: Boolean })
-], C.prototype, "open", 2);
-q([
-  n({ reflect: !0, type: Number })
-], C.prototype, "value", 2);
-q([
-  n({ attribute: "default-value", reflect: !0, type: Number })
-], C.prototype, "defaultValue", 2);
-q([
-  n({ reflect: !0, type: Boolean })
-], C.prototype, "loading", 2);
-q([
-  n({ attribute: "can-apply", reflect: !0, type: Boolean })
-], C.prototype, "canApply", 2);
-q([
-  w("open", { waitUntilFirstUpdate: !0 })
-], C.prototype, "handleOpenChange", 1);
-C = q([
-  N("cx-asset-link-format-rotation")
-], C);
-const _t = O`cx-details::part(base){border-bottom-width:0}`;
-var Ft = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, Z = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? Wt(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (o = (s ? h(e, i, o) : h(o)) || o);
-  return s && o && Ft(e, i, o), o;
-};
-let H = class extends W {
-  constructor() {
-    super(...arguments), this.localize = new U(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 m`<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 = [E, _t];
-H.dependencies = {
-  "cx-button": B,
-  "cx-checkbox": dt,
-  "cx-details": I,
-  "cx-icon": L,
-  "cx-space": _,
-  "cx-tooltip": st,
-  "cx-typography": F
-};
-Z([
-  V(".details")
-], H.prototype, "base", 2);
-Z([
-  n({ reflect: !0, type: Boolean })
-], H.prototype, "open", 2);
-Z([
-  n({ reflect: !0, type: Boolean })
-], H.prototype, "value", 2);
-H = Z([
-  N("cx-asset-link-format-metadata")
-], H);
-var Et = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, p = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? Nt(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (o = (s ? h(e, i, o) : h(o)) || o);
-  return s && o && Et(e, i, o), o;
-};
-let c = class extends W {
-  constructor() {
-    super(), this.localize = new U(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
-      {
-        label: "Free",
-        value: "free"
-      },
-      {
-        label: "Widescreen (16:9)",
-        value: "16:9"
-      },
-      {
-        label: "Phone (9:16)",
-        value: "9:16"
-      },
-      {
-        label: "Presentation (4:3)",
-        value: "4:3"
-      },
-      {
-        label: "Square (1:1)",
-        value: "1:1"
-      },
-      {
-        label: "Landscape (3:2)",
-        value: "3:2"
-      },
-      {
-        label: "Portrait (2:3)",
-        value: "2:3"
-      },
-      {
-        auto: !0,
-        disabledSize: !0,
-        label: "Azure AI",
-        value: "AzureAI"
-      }
-    ], this.focusModes = [
-      {
-        label: "Manual focus",
-        value: "manual"
-      },
-      {
-        label: "Center focus",
-        value: "center"
-      },
-      {
-        auto: !0,
-        label: "Optical focus",
-        value: "Optical"
-      },
-      {
-        auto: !0,
-        label: "Google AI",
-        value: "GoogleAI"
-      },
-      {
-        auto: !0,
-        label: "Smart Swatch",
-        value: "SmartSwatch"
-      }
-    ], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", this.defaultProxy = "", this.useCustomExtension = !1, this.noMetadata = !1, this.noFormat = !1, this.noCrop = !1, this.noResize = !1, this.noRotate = !1, this.lastImageSize = {
-      height: 0,
-      width: 0
-    }, this.hideHeader = !1, this.canReset = !1, this.queryElement = null, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
-      height: 0,
-      keepAspectRatio: !0,
-      ratioHeight: 1,
-      ratioWidth: 1,
-      unit: a.Pixel,
-      width: 0
-    }, this.cropSize = {
-      cropMode: "free",
-      focusMode: "manual",
-      height: 0,
-      keepAspectRatio: !0,
-      percentageHeight: 0,
-      percentageWidth: 0,
-      ratioHeight: 1,
-      ratioWidth: 1,
-      unit: a.Pixel,
-      width: 0,
-      x: 0,
-      y: 0
-    }, this.rotation = 0, this.defaultSize = {
-      height: 0,
-      width: 0
-    }, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.preResetTransformations = void 0, this.apiGetTransformAssetLink = rt, this.apiGetCropFocusMode = ht, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
-  }
-  /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
-  get hasUnfrozenTransformations() {
-    return !(this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1);
-  }
-  /**
-   * Checks if the crop apply button should be disabled.
-   * This is determined by comparing the current crop size with the last crop size.
-   * If the current crop size is equal to the last crop size, the button is disabled.
-   * @return {boolean} - Returns true if the crop apply button should be disabled, false otherwise.
-   */
-  get disabledCropApply() {
-    const t = [
-      "height",
-      "percentageHeight",
-      "percentageWidth",
-      "unit",
-      "width",
-      "x",
-      "y"
-    ];
-    for (const e of t)
-      if (this.cropSize[e] !== this.lastCropSize[this.cropSize.unit][e])
-        return !1;
-    return !0;
-  }
-  /**
-   * Returns the list of formats available for the asset link.
-   * This is derived from the `proxies` property, filtering out any proxies that have a `cdnName`.
-   */
-  get formats() {
-    return this.proxies?.filter((t) => !t.cdnName) || [];
-  }
-  get imageSize() {
-    return {
-      height: this.selectedFormat?.height ?? 0,
-      width: this.selectedFormat?.width ?? 0
-    };
-  }
-  /**
-   * Returns the last crop size based on the transformations applied to the asset link.
-   * This is calculated by iterating through the transformations and applying the last crop, resize, or rotate transformation to the default size of the asset.
-   * It returns an object with the last crop size in both pixel and aspect ratio units.
-   */
-  get lastCropSize() {
-    const t = it(
-      this.lastImageSize.width,
-      this.lastImageSize.height
-    );
-    return {
-      [a.AspectRatio]: {
-        height: t.height,
-        percentageHeight: 100,
-        percentageWidth: 100,
-        unit: a.AspectRatio,
-        width: t.width,
-        x: 0,
-        y: 0
-      },
-      [a.Pixel]: {
-        height: this.lastImageSize.height,
-        percentageHeight: 100,
-        percentageWidth: 100,
-        unit: a.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 = it(
-      this.lastImageSize.width,
-      this.lastImageSize.height
-    );
-    return {
-      [a.AspectRatio]: {
-        height: t.height,
-        unit: a.AspectRatio,
-        width: t.width
-      },
-      [a.Pixel]: {
-        height: this.lastImageSize.height,
-        unit: a.Pixel,
-        width: this.lastImageSize.width
-      }
-    };
-  }
-  /**
-   * Returns the transformation string for the asset link.
-   */
-  get transformationString() {
-    return G({
-      asset: this.asset,
-      baseUrl: "",
-      parameters: this.parameters,
-      transformations: this.transformations,
-      useSession: this.useSession
-    }).replace(/\/t\//g, "");
-  }
-  runConnectedCallback() {
-    this.hasUpdated && (this.handleCropperSelectorChange(), this.cropperElement && (this.cropperElement.addEventListener(
-      "cx-cropper-crop-complete",
-      this.onCropComplete
-    ), this.cropperElement.addEventListener(
-      "cx-cropper-crop-drag-start",
-      this.onCropDragStart
-    )));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.cropperElement && (this.cropperElement.removeEventListener(
-      "cx-cropper-crop-complete",
-      this.onCropComplete
-    ), this.cropperElement.removeEventListener(
-      "cx-cropper-crop-drag-start",
-      this.onCropDragStart
-    ));
-  }
-  updated(t) {
-    if ((t.has("forCropper") || t.has("queryElement")) && this.handleCropperSelectorChange(), t.has("asset") && this.handleAssetChange(), t.has("proxies") && this.handleProxiesChange(), t.has("activeSetting") && this.handleActiveSettingChange(), t.has("selectedFormat") && this.handleSelectedFormatChange(), t.has("resizeSize") && this.handleResizeSizeChange(), t.has("cropSize") && this.handleCropSizeChange(), t.has("rotation") && this.handleRotationChange(), t.has("cropperElement") && this.handleCropperElementChange(), t.has("selectedFormat")) {
-      if (!this.asset || !this.selectedFormat || this.selectedFormat.extension === t.get("selectedFormat")?.extension)
-        return;
-      const e = this.proxies?.find(
-        (s) => s.id === this.selectedProxy
-      );
-      this.loading = !0, this.apiGetTransformAssetLink({
-        assetId: this.asset.id,
-        extension: this.asset.extension,
-        format: e?.proxyName ?? "",
-        siteUrl: this.baseUrl,
-        token: this.token,
-        transformations: this.transformationString
-      }).then((s) => {
-        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === l.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 = G({
-        asset: this.asset,
-        baseUrl: "",
-        extension: this.selectedFormat.extension,
-        parameters: this.parameters,
-        transformations: this.transformations,
-        useSession: this.useSession
-      });
-      this.emit("cx-asset-link-format-change", {
-        detail: i
-      });
-    }
-  }
-  getCropSize() {
-    return this.cropSize;
-  }
-  setActiveSetting(t) {
-    this.activeSetting = t;
-  }
-  freezeTransformations() {
-    this.frozenIndex = this.transformations.length - 1;
-  }
-  upsertTransformation(t) {
-    const e = this.transformations.findIndex((i) => i.key === t.key);
-    if (e >= 0) {
-      const i = [...this.transformations];
-      i[e] = t, this.transformations = i;
-    } else
-      this.transformations = [...this.transformations, t];
-  }
-  async handleTransformationsChange() {
-    if (await this.updateComplete, !this.asset) {
-      this.emit("cx-asset-link-format-change", {
-        detail: G({
-          asset: this.asset,
-          baseUrl: "",
-          options: {
-            omitZeroXY: !0
-          },
-          parameters: this.parameters,
-          transformations: this.transformations,
-          useSession: this.useSession
-        }).replace(/\/t\//g, "")
-      });
-      const r = this.transformations.findLast(
-        (f) => f.key === l.Crop && f.value.width && f.value.height
-      );
-      if (r) {
-        const { focusMode: f, height: v, unit: P, width: Q, x: at = 0, y: ot = 0 } = r.value;
-        this.cropSize = {
-          ...this.cropSize,
-          cropMode: "free",
-          focusMode: f ?? "manual",
-          height: v,
-          percentageHeight: 100,
-          percentageWidth: 100,
-          unit: P ?? a.Pixel,
-          width: Q,
-          x: at,
-          y: ot
-        };
-      } else
-        this.cropSize = {
-          ...this.cropSize,
-          cropMode: "free",
-          focusMode: "manual",
-          height: 0,
-          percentageHeight: 0,
-          percentageWidth: 0,
-          unit: a.Pixel,
-          width: 0,
-          x: 0,
-          y: 0
-        };
-      const h = this.transformations.findLast(
-        (f) => f.key === l.Resize && (f.value.width || f.value.height)
-      );
-      if (h) {
-        const { height: f = 0, unit: v, width: P = 0 } = h.value;
-        this.resizeSize = {
-          ...this.resizeSize,
-          height: f,
-          unit: v ?? a.Pixel,
-          width: P
-        };
-      } else
-        this.resizeSize = {
-          ...this.resizeSize,
-          height: 0,
-          unit: a.Pixel,
-          width: 0
-        };
-      const d = this.transformations.findLast(
-        (f) => f.key === l.Rotate
-      );
-      this.rotation = d?.value.rotation ?? 0;
-      const g = this.transformations.findLast((f) => f.key === l.Quality)?.value.quality ?? 100, b = this.transformations.some(
-        (f) => f.key === l.Metadata
-      );
-      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: b, quality: g } : this.selectedFormat = {
-        extension: "",
-        height: 0,
-        keepMetadata: b,
-        originalUrl: "",
-        quality: g,
-        rotation: 0,
-        url: "",
-        width: 0,
-        x: 0,
-        y: 0
-      };
-      return;
-    }
-    if (!this.selectedFormat)
-      return;
-    const t = this.proxies?.find(
-      (r) => r.id === this.selectedProxy
-    );
-    this.loading = !0;
-    const e = await this.apiGetTransformAssetLink({
-      assetId: this.asset.id,
-      extension: this.selectedFormat.extension,
-      format: t?.proxyName ?? "",
-      siteUrl: this.baseUrl,
-      token: this.token,
-      transformations: this.transformationString
-    });
-    if (this.loading = !1, !e?.relativePath || !this.selectedFormat)
-      return;
-    this.lastImageSize = {
-      height: e.height,
-      width: e.width
-    }, this.resizeSize = {
-      height: e.height,
-      keepAspectRatio: !0,
-      ratioHeight: 1,
-      ratioWidth: 1,
-      unit: a.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: a.Pixel,
-      width: e.width,
-      x: 0,
-      y: 0
-    }, this.lastAction === l.Rotate && (this.rotation = 0), this.lastAction = void 0;
-    const i = this.transformations.some(
-      (r) => r.key === l.Metadata
-    ), s = this.transformations.findLast(
-      (r) => r.key === l.Quality
-    );
-    this.selectedFormat = {
-      ...this.selectedFormat,
-      height: e.height,
-      keepMetadata: i,
-      quality: s?.value?.quality ?? this.selectedFormat.quality,
-      url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${e.relativePath}` : e.relativePath,
-      width: e.width
-      /**
-       * For local development uses the base URL to construct the full URL.
-       * url: `${this.baseUrl}/${response.relativePath}`,
-       */
-    };
-    const o = G({
-      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: o
-    });
-  }
-  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 === l.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: a.Pixel,
-      width: this.defaultSize.width,
-      x: 0,
-      y: 0
-    }, this.selectedProxy || (this.selectedProxy = this.proxies && this.proxies.length > 0 ? this.proxies[0].id : "");
-  }
-  handleProxiesChange() {
-    !this.proxies || this.proxies.length === 0 || (!this.selectedProxy || !this.proxies.some((t) => t.id === this.selectedProxy)) && (this.selectedProxy = this.proxies[0].id);
-  }
-  async handleSelectedProxyChange(t) {
-    if (!this.asset || !this.selectedProxy)
-      return;
-    const e = this.proxies?.find(
-      (s) => s.id === this.selectedProxy
-    );
-    if (!e || !this.selectedFormat)
-      return;
-    e.proxyName === "TRX" && (e.formatHeight = Number(this.asset.height), e.formatWidth = Number(this.asset.width));
-    const i = this.proxies?.find((s) => s.id === t);
-    i && (this.asset && i.proxyName === "TRX" && (i.formatHeight = Number(this.asset.height), i.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((s) => {
-      if (s.key === l.Crop) {
-        const o = s.value, r = o.width / i.formatWidth * e.formatWidth, h = o.height / i.formatHeight * e.formatHeight, d = o.x / i.formatWidth * e.formatWidth, g = o.y / i.formatHeight * e.formatHeight;
-        return {
-          ...s,
-          value: {
-            ...s.value,
-            height: h,
-            width: r,
-            x: d,
-            y: g
-          }
-        };
-      }
-      if (s.key === l.Resize) {
-        const o = s.value, r = o.width / i.formatWidth * e.formatWidth, h = o.height / i.formatHeight * e.formatHeight;
-        return {
-          ...s,
-          value: {
-            height: h,
-            width: r
-          }
-        };
-      }
-      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[a.Pixel].height,
-      keepAspectRatio: !0,
-      percentageHeight: 100,
-      percentageWidth: 100,
-      ratioHeight: 1,
-      ratioWidth: 1,
-      unit: a.Pixel,
-      width: this.lastCropSize[a.Pixel].width,
-      x: 0,
-      y: 0
-    }, this.resizeSize = {
-      height: this.lastResizeSize[a.Pixel].height,
-      keepAspectRatio: !0,
-      ratioHeight: 1,
-      ratioWidth: 1,
-      unit: a.Pixel,
-      width: this.lastResizeSize[a.Pixel].width
-    };
-  }
-  handleLoadingChange() {
-    this.cropperElement && (this.cropperElement.loading = this.loading);
-  }
-  handleSelectedFormatChange() {
-    !this.cropperElement || !this.selectedFormat?.url || (this.cropperElement.image = this.selectedFormat);
-  }
-  handleResizeSizeChange() {
-    this.cropperElement && (this.cropperElement.resizer = this.resizeSize);
-  }
-  handleCropSizeChange() {
-    this.cropperElement && (this.cropperElement.cropper = this.cropSize);
-  }
-  handleRotationChange() {
-    this.cropperElement && (this.cropperElement.rotation = this.rotation);
-  }
-  handleActiveSettingChange() {
-    this.cropperElement && (this.resizeSize = {
-      height: this.lastResizeSize[a.Pixel].height,
-      keepAspectRatio: !0,
-      ratioHeight: 1,
-      ratioWidth: 1,
-      unit: a.Pixel,
-      width: this.lastResizeSize[a.Pixel].width
-    }, this.cropperElement.disabled = this.activeSetting !== "cx-asset-link-format-crop");
-  }
-  async handleRequestAutoCropSuggestion({
-    cropMode: t,
-    focusMode: e,
-    height: i,
-    keepAspectRatio: s,
-    percentageHeight: o,
-    percentageWidth: r,
-    ratioHeight: h,
-    ratioWidth: d,
-    unit: g,
-    useCropMode: b,
-    width: f
-  }) {
-    if (!this.selectedFormat?.url || e === "manual")
-      return;
-    this.loading = !0, this.lastAction = l.Crop;
-    const v = await this.apiGetCropFocusMode({
-      autoCropMode: e,
-      cropHeight: i,
-      cropWidth: f,
-      imageUrl: this.selectedFormat.url
-    });
-    if (v) {
-      let P = o, Q = r;
-      i || (P = v.height * 100 / this.selectedFormat.height), f || (Q = v.width * 100 / this.selectedFormat.width), this.cropSize = {
-        ...this.cropSize,
-        height: v.height,
-        percentageHeight: P ?? this.cropSize.percentageHeight,
-        percentageWidth: Q ?? this.cropSize.percentageWidth,
-        width: v.width,
-        x: v.x * 100 / this.selectedFormat.width,
-        y: v.y * 100 / this.selectedFormat.height,
-        ...b ? {
-          cropMode: e,
-          focusMode: "manual",
-          keepAspectRatio: !1
-        } : {
-          cropMode: t ?? this.cropSize.cropMode,
-          focusMode: e
-        },
-        keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
-        ratioHeight: h ?? this.cropSize.ratioHeight,
-        ratioWidth: d ?? this.cropSize.ratioWidth,
-        unit: g ?? this.cropSize.unit
-      };
-    }
-    this.loading = !1, this.lastAction = void 0;
-  }
-  async onCropComplete(t) {
-    const { croppedArea: e } = t.detail, {
-      height: i,
-      width: s,
-      x: o,
-      y: r
-    } = e;
-    if (s === 0 || i === 0)
-      return;
-    const h = this.cropSize.percentageWidth !== s, d = this.cropSize.percentageHeight !== i;
-    let g = this.cropSize.height, b = this.cropSize.width;
-    h && (b = Math.round(s * this.selectedFormat.width / 100)), d && (g = Math.round(
-      i * this.selectedFormat.height / 100
-    ));
-    const f = this.cropSize.focusMode;
-    this.focusModes.find(
-      (P) => P.value === f
-    )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
-      focusMode: f,
-      height: g,
-      percentageHeight: i,
-      percentageWidth: s,
-      width: b
-    }) : this.cropSize = {
-      ...this.cropSize,
-      height: g,
-      percentageHeight: i,
-      percentageWidth: s,
-      width: b,
-      x: o,
-      y: r
-    };
-  }
-  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 = l.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(
-        (g) => g.value === this.cropSize.focusMode
-      )?.auto;
-      let o = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, h = this.cropSize.x, d = this.cropSize.y;
-      e === "free" ? (o = !1, r = "manual") : this.cropSize.unit === a.Pixel && !s && (h = 0, d = 0), s ? await this.handleRequestAutoCropSuggestion({
-        cropMode: e,
-        focusMode: r,
-        height: this.cropSize.height,
-        keepAspectRatio: o,
-        width: this.cropSize.width
-      }) : this.cropSize = {
-        ...this.cropSize,
-        cropMode: e,
-        focusMode: r,
-        keepAspectRatio: o,
-        x: h,
-        y: d
-      }, this.asset || (e && e !== "free" ? this.upsertTransformation({
-        key: l.Crop,
-        value: {
-          mode: e
-        }
-      }) : this.transformations = this.transformations.filter(
-        (g) => g.key !== l.Crop
-      ));
-    }
-  }
-  onCropFocusModeChange(t) {
-    const { mode: e } = t.detail, i = this.focusModes.find((s) => s.value === e)?.auto;
-    if (i && this.selectedFormat?.url ? this.handleRequestAutoCropSuggestion({
-      focusMode: e,
-      height: this.cropSize.height,
-      width: this.cropSize.width
-    }) : this.cropSize = {
-      ...this.cropSize,
-      focusMode: e
-    }, !this.asset) {
-      const { height: s, unit: o, width: r, x: h, y: d } = this.cropSize;
-      (s || r) && this.upsertTransformation({
-        key: l.Crop,
-        value: {
-          focusMode: e,
-          height: s,
-          isFocusModeAuto: i ?? !1,
-          unit: o,
-          width: r,
-          x: h,
-          y: d
-        }
-      });
-    }
-  }
-  async onCropChange(t) {
-    const e = this.cropSize.unit;
-    if (t.detail.unit === a.AspectRatio) {
-      const i = t.detail.width / t.detail.height, s = Math.min(
-        Math.max(Math.round(this.cropSize.height * i), 0),
-        this.resizeSize.width
-      ), o = Math.min(
-        Math.max(Math.round(s / i), 0),
-        this.resizeSize.height
-      ), r = o * 100 / this.selectedFormat.height, h = s * 100 / this.selectedFormat.width;
-      let d = this.cropSize.x, g = this.cropSize.y;
-      d + h > 100 && (d = 100 - h), g + r > 100 && (g = 100 - r);
-      let b = this.cropSize.cropMode;
-      this.cropModes.find(
-        (v) => v.value === b
-      )?.auto && (b = "free"), t.detail.silent ? (this.cropSize.height = o, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = h, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = a.AspectRatio, this.cropSize.width = s) : this.cropSize = {
-        ...this.cropSize,
-        cropMode: b,
-        height: o,
-        keepAspectRatio: t.detail.keepAspectRatio,
-        percentageHeight: r,
-        percentageWidth: h,
-        ratioHeight: t.detail.height,
-        ratioWidth: t.detail.width,
-        unit: a.AspectRatio,
-        width: s,
-        x: d,
-        y: g
-      };
-    } 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 o = this.cropSize.x, r = this.cropSize.y;
-      o + s > 100 && (o = 100 - s), r + i > 100 && (r = 100 - i);
-      let h = this.cropSize.cropMode;
-      const d = this.cropModes.find(
-        (g) => g.value === h
-      )?.auto;
-      (t.detail.breakAspectRatio || d) && (h = "free"), t.detail.silent ? (this.cropSize.cropMode = h, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = a.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = o, this.cropSize.y = r) : this.cropSize = {
-        ...this.cropSize,
-        cropMode: h,
-        height: t.detail.height,
-        keepAspectRatio: t.detail.keepAspectRatio,
-        percentageHeight: i,
-        percentageWidth: s,
-        unit: a.Pixel,
-        width: t.detail.width,
-        x: o,
-        y: r
-      };
-    }
-    if (e !== this.cropSize.unit && (this.cropSize = {
-      ...this.cropSize,
-      cropMode: "free"
-    }, this.onCropChanged()), !this.asset && !t.detail.silent) {
-      const { focusMode: i, height: s, unit: o, width: r, x: h, y: d } = this.cropSize, g = this.focusModes.find(
-        (b) => b.value === i
-      )?.auto ?? !1;
-      (s || r) && this.upsertTransformation({
-        key: l.Crop,
-        value: {
-          focusMode: i,
-          height: s,
-          isFocusModeAuto: g,
-          unit: o,
-          width: r,
-          x: h,
-          y: d
-        }
-      });
-    }
-  }
-  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: o } = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = l.Crop, !this.cropperElement || !this.selectedFormat)
-      return;
-    const r = this.cropSize.focusMode, h = this.focusModes.find(
-      (d) => d.value === r
-    )?.auto ?? !1;
-    if (e && o && s) {
-      let d = o, g = e;
-      if (s === a.AspectRatio && (d = this.cropSize.percentageWidth * this.selectedFormat.width / 100, g = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
-        this.transformations = [
-          ...this.transformations,
-          {
-            key: l.Crop,
-            value: {
-              focusMode: r,
-              height: g,
-              isFocusModeAuto: h,
-              mode: i,
-              width: d
-            }
-          }
-        ];
-      else {
-        const b = this.cropSize.x / 100 * this.selectedFormat.width, f = this.cropSize.y / 100 * this.selectedFormat.height;
-        this.transformations = [
-          ...this.transformations,
-          {
-            key: l.Crop,
-            value: {
-              focusMode: r,
-              height: g,
-              isFocusModeAuto: h,
-              unit: s,
-              width: d,
-              x: b,
-              y: f
-            }
-          }
-        ];
-      }
-    } else i && (this.transformations = [
-      ...this.transformations,
-      {
-        key: l.Crop,
-        value: {
-          focusMode: r,
-          isFocusModeAuto: h,
-          mode: i
-        }
-      }
-    ]);
-  }
-  onResizeChange(t) {
-    if (t.detail.unit === a.AspectRatio) {
-      const e = t.detail.width / t.detail.height, i = Math.max(
-        Math.round(this.lastResizeSize[a.Pixel].height * e),
-        0
-      ), s = Math.max(Math.round(i / e), 0);
-      this.resizeSize = {
-        ...this.resizeSize,
-        height: s,
-        keepAspectRatio: t.detail.keepAspectRatio,
-        ratioHeight: t.detail.height,
-        ratioWidth: t.detail.width,
-        unit: t.detail.unit,
-        width: i
-      };
-    } else
-      this.resizeSize = {
-        ...this.resizeSize,
-        height: Math.max(t.detail.height, 0),
-        keepAspectRatio: t.detail.keepAspectRatio,
-        unit: t.detail.unit,
-        width: Math.max(t.detail.width, 0)
-      };
-    if (!this.asset) {
-      const { height: e, unit: i, width: s } = this.resizeSize;
-      (e || s) && this.upsertTransformation({
-        key: l.Resize,
-        value: {
-          height: e,
-          unit: i,
-          width: s
-        }
-      });
-    }
-  }
-  onResizeApply(t) {
-    if (!this.selectedFormat)
-      return;
-    const { height: e, unit: i, width: s } = t.detail;
-    this.preResetTransformations = void 0, this.lastAction = l.Resize;
-    const o = this.selectedFormat.width || this.defaultSize.width, r = this.selectedFormat.height || this.defaultSize.height;
-    let h = s, d = e;
-    this.resizeSize.unit !== i ? (h = o, d = r) : i === a.AspectRatio && (h = Math.round(s / e * r), d = r), this.transformations = [
-      ...this.transformations,
-      {
-        key: l.Resize,
-        value: {
-          height: d,
-          unit: i,
-          width: h
-        }
-      }
-    ];
-  }
-  onRotationChange(t) {
-    this.rotation = t.detail, this.asset || (this.rotation ? this.upsertTransformation({
-      key: l.Rotate,
-      value: {
-        rotation: this.rotation
-      }
-    }) : this.transformations = this.transformations.filter(
-      (e) => e.key !== l.Rotate
-    ));
-  }
-  onRotationApply(t) {
-    if (!this.selectedFormat)
-      return;
-    const e = t.detail;
-    this.preResetTransformations = void 0, this.lastAction = l.Rotate, this.transformations = [
-      ...this.transformations,
-      {
-        key: l.Rotate,
-        value: {
-          rotation: e
-        }
-      }
-    ];
-  }
-  onQualityChange(t) {
-    const e = t.detail;
-    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = l.Quality;
-    const i = {
-      key: l.Quality,
-      value: {
-        quality: e
-      }
-    };
-    this.asset ? this.transformations = [...this.transformations, i] : this.upsertTransformation(i);
-  }
-  onMetadataChange(t) {
-    const e = t.detail;
-    if (this.preResetTransformations = void 0, this.selectedFormat && (this.selectedFormat = {
-      ...this.selectedFormat,
-      keepMetadata: e
-    }), !this.asset) {
-      e ? this.upsertTransformation({
-        key: l.Metadata,
-        value: {
-          keepMetadata: e
-        }
-      }) : this.transformations = this.transformations.filter(
-        (i) => i.key !== l.Metadata
-      );
-      return;
-    }
-    e ? this.transformations = [
-      ...this.transformations.filter(
-        (i) => i.key !== l.Metadata
-      ),
-      {
-        key: l.Metadata,
-        value: {
-          keepMetadata: e
-        }
-      }
-    ] : this.transformations = this.transformations.filter(
-      (i) => i.key !== l.Metadata
-    );
-  }
-  onExtensionChange(t) {
-    const e = t.detail;
-    this.selectedFormat && (this.selectedFormat = {
-      ...this.selectedFormat,
-      extension: e
-    });
-  }
-  syncQuality() {
-    const t = this.transformations.findLast(
-      (e) => e.key === l.Quality
-    )?.value?.quality;
-    this.selectedFormat && (this.selectedFormat = {
-      ...this.selectedFormat,
-      quality: t ?? 100
-    });
-  }
-  handleUndo() {
-    !this.hasUnfrozenTransformations && this.preResetTransformations !== void 0 ? (this.transformations = this.preResetTransformations, this.preResetTransformations = void 0) : this.transformations = this.transformations.slice(0, -1), this.syncQuality();
-  }
-  handleReset() {
-    this.preResetTransformations = [...this.transformations];
-    const t = !!this.defaultProxy && !!this.proxies?.some((e) => e.id === this.defaultProxy);
-    this.selectedProxy = t ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "", this.transformations = [], this.frozenIndex = -1, this.syncQuality();
-  }
-  render() {
-    return m`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${k(
-      !this.hideHeader,
-      () => m`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${k(this.canReset, () => m`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${this.transformations.length === 0} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
-      () => nt
-    )}
-      ${k(
-      !this.noFormat,
-      () => m`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} .items=${this.formats} ?loading=${this.loading && this.lastAction === l.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
-    )}
-      ${k(
-      !this.noCrop,
-      () => m`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?can-apply=${!!this.asset} ?loading=${this.loading && this.lastAction === l.Crop} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[a.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[a.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
-    )}
-      ${k(
-      !this.noResize,
-      () => m`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?can-apply=${!!this.asset} ?loading=${this.loading && this.lastAction === l.Resize} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
-    )}
-      ${k(
-      !this.noRotate,
-      () => m`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === l.Rotate} ?can-apply=${!!this.asset} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`
-    )}<cx-asset-link-format-quality class="asset-link-format__details" ?can-apply=${!!this.asset} ?loading=${this.loading && this.lastAction === l.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>${k(
-      !this.noMetadata,
-      () => m`<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>`
-    )}
-      ${k(
-      this.useCustomExtension,
-      () => m`<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>`;
-  }
-};
-c.styles = [E, ut];
-c.dependencies = {
-  "cx-asset-link-format-crop": u,
-  "cx-asset-link-format-extension": T,
-  "cx-asset-link-format-metadata": H,
-  "cx-asset-link-format-proxy": $,
-  "cx-asset-link-format-quality": A,
-  "cx-asset-link-format-resize": y,
-  "cx-asset-link-format-rotation": C,
-  "cx-button": B,
-  "cx-space": _,
-  "cx-typography": F
-};
-p([
-  n({ attribute: "base-url", type: String })
-], c.prototype, "baseUrl", 2);
-p([
-  n({ attribute: "token", type: String })
-], c.prototype, "token", 2);
-p([
-  n({ reflect: !1, type: Object })
-], c.prototype, "asset", 2);
-p([
-  n({ attribute: "crop-modes", reflect: !1, type: Array })
-], c.prototype, "cropModes", 2);
-p([
-  n({ attribute: "focus-modes", reflect: !1, type: Object })
-], c.prototype, "focusModes", 2);
-p([
-  n({ reflect: !1, type: Array })
-], c.prototype, "extensions", 2);
-p([
-  n({ reflect: !1, type: Array })
-], c.prototype, "proxies", 2);
-p([
-  n({ attribute: "for-cropper", reflect: !0, type: String })
-], c.prototype, "forCropper", 2);
-p([
-  n({ attribute: "use-session", reflect: !0, type: String })
-], c.prototype, "useSession", 2);
-p([
-  n({ reflect: !1, type: Array })
-], c.prototype, "transformations", 2);
-p([
-  n({ attribute: "selected-proxy", reflect: !0, type: String })
-], c.prototype, "selectedProxy", 2);
-p([
-  n({ attribute: "default-proxy", reflect: !0, type: String })
-], c.prototype, "defaultProxy", 2);
-p([
-  n({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
-], c.prototype, "useCustomExtension", 2);
-p([
-  n({ attribute: "no-metadata", reflect: !0, type: Boolean })
-], c.prototype, "noMetadata", 2);
-p([
-  n({ attribute: "no-format", reflect: !0, type: Boolean })
-], c.prototype, "noFormat", 2);
-p([
-  n({ attribute: "no-crop", reflect: !0, type: Boolean })
-], c.prototype, "noCrop", 2);
-p([
-  n({ attribute: "no-resize", reflect: !0, type: Boolean })
-], c.prototype, "noResize", 2);
-p([
-  n({ attribute: "no-rotate", reflect: !0, type: Boolean })
-], c.prototype, "noRotate", 2);
-p([
-  n({ attribute: "last-image-size", reflect: !1, type: Object })
-], c.prototype, "lastImageSize", 2);
-p([
-  n({ attribute: "hide-header", reflect: !1, type: Boolean })
-], c.prototype, "hideHeader", 2);
-p([
-  n({ attribute: "can-reset", type: Boolean })
-], c.prototype, "canReset", 2);
-p([
-  n({ attribute: !1, reflect: !1, type: Object })
-], c.prototype, "queryElement", 2);
-p([
-  z()
-], c.prototype, "activeSetting", 2);
-p([
-  z()
-], c.prototype, "selectedFormat", 2);
-p([
-  z()
-], c.prototype, "resizeSize", 2);
-p([
-  z()
-], c.prototype, "cropSize", 2);
-p([
-  z()
-], c.prototype, "rotation", 2);
-p([
-  z()
-], c.prototype, "defaultSize", 2);
-p([
-  z()
-], c.prototype, "cropperElement", 2);
-p([
-  z()
-], c.prototype, "parameters", 2);
-p([
-  z()
-], c.prototype, "loading", 2);
-p([
-  z()
-], c.prototype, "lastAction", 2);
-p([
-  z()
-], c.prototype, "frozenIndex", 2);
-p([
-  z()
-], c.prototype, "preResetTransformations", 2);
-p([
-  w("transformations")
-], c.prototype, "handleTransformationsChange", 1);
-p([
-  w("selectedProxy")
-], c.prototype, "handleSelectedProxyChange", 1);
-p([
-  w("loading")
-], c.prototype, "handleLoadingChange", 1);
-c = p([
-  N("cx-asset-link-format")
-], c);
+import "../chunks/button.3giRMk79.js";
+import "./space.js";
+import "../chunks/typography.DJC_UXgs.js";
+import "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { C as g } from "../chunks/asset-link-format.BBWyY5fn.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import "../chunks/asset-link-format.QzzboHHE.js";
+import "../chunks/custom-element.L4WJXn1j.js";
+import "../chunks/i18n.DJikbkDK.js";
+import "../chunks/watch.CThbualB.js";
+import "../chunks/number.B4PQLJIg.js";
+import "../chunks/transformation.c-RS37zA.js";
+import "../chunks/lit-element.jLBm65_O.js";
+import "../chunks/state.CSDxrqLd.js";
+import "../chunks/when.Dr1es41R.js";
 export {
-  c as default
+  g as default
 };