@orangelogic/design-system 2.100.0 → 2.102.0

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

@@ -1,42 +1,42 @@
 import "../chunks/cropper.Bib8Abm3.js";
-import { C as U } from "../chunks/button.DfRnA70F.js";
-import P from "./space.js";
-import { C as _ } from "../chunks/typography.DJC_UXgs.js";
-import { n as h, C as H } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { b as at, c as ot } from "../chunks/asset.CKtT9q4k.js";
-import { c as W } from "../chunks/component.styles.CRO4Odto.js";
-import { U as a, T as d } from "../chunks/asset-link-format.BSRDqHg7.js";
-import { c as F } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as E } from "../chunks/i18n.DK1uYlJT.js";
-import { w as S } from "../chunks/watch.BCJD77bD.js";
+import { C as B } from "../chunks/button.DfRnA70F.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 { b as rt, c as ht } from "../chunks/asset.CtL7ACp7.js";
+import { c as E } from "../chunks/component.styles.CRO4Odto.js";
+import { U as a, T as l } from "../chunks/asset-link-format.BSRDqHg7.js";
+import { c as N } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as U } from "../chunks/i18n.DK1uYlJT.js";
+import { w } from "../chunks/watch.BCJD77bD.js";
 import { s as et, c as it } from "../chunks/number.B4PQLJIg.js";
-import { b as Y } from "../chunks/transformation.Cqz3hPaQ.js";
-import { i as N, x as m, E as rt } from "../chunks/lit-element.jLBm65_O.js";
-import { r as f } from "../chunks/state.CSDxrqLd.js";
-import { n as C } from "../chunks/when.Dr1es41R.js";
-import T from "./details.js";
-import ht from "./divider.js";
-import I from "./icon.js";
+import { b as G } from "../chunks/transformation.Dir8s_wm.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 L from "./icon.js";
 import { C as K } from "../chunks/icon-button.CN0NGNQx.js";
-import Z from "./input.js";
-import { C as Q } from "../chunks/option.B7SoEb_q.js";
-import G from "./select.js";
-import { c as nt } from "../chunks/image.9qwbjGNb.js";
+import J from "./input.js";
+import { C as X } from "../chunks/option.B7SoEb_q.js";
+import Y from "./select.js";
+import { c as ct } from "../chunks/image.9qwbjGNb.js";
 import { e as V } from "../chunks/query.BBf1UFkC.js";
-import { c as L } from "../chunks/repeat.DbF2p5ae.js";
-import { o as A } from "../chunks/style-map.llVFPd__.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 lt from "./button-group.js";
-import ct from "./checkbox.js";
-const pt = N`.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}`, dt = N`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 ut = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? mt(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (o = (s ? n(e, i, o) : n(o)) || o);
-  return s && o && ut(e, i, o), o;
+import pt from "./button-group.js";
+import dt from "./checkbox.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 p = class extends H {
+let u = class extends W {
   constructor() {
-    super(...arguments), this.localize = new E(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.lastAppliedSetting = {
+    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,
@@ -75,21 +75,25 @@ let p = class extends H {
         return;
       }
     }
-    if (this.maxWidth && this.maxHeight) {
+    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() {
-    this.cropMode = "free", await this.updateComplete, this.open || (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
-      }
-    }));
+    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) {
@@ -144,19 +148,19 @@ let p = class extends H {
     else if (!i) {
       const [s, o] = e.split(":").map(Number);
       if (this.unit === a.Pixel) {
-        const { height: r, width: n } = nt(
+        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", {
+        )), this.emit("cx-asset-link-format-crop-change", {
           detail: {
-            height: r,
+            height: h,
             keepAspectRatio: !0,
             silent: !0,
             unit: a.Pixel,
-            width: n
+            width: r
           }
         });
       } else
@@ -255,141 +259,145 @@ let p = class extends H {
   }
   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=${A({
+    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}>${L(
+    })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${j(
       t,
       (i) => i.value,
       ({ label: i, value: s }) => m`<cx-option value=${s}>${i}</cx-option>`
     )}
-          ${C(
+          ${k(
       e.length > 0,
       () => m`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
     )}
-          ${L(
+          ${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=${A({
+              </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>${C(
+              </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=${A({
+      () => 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}>${L(
+      })} @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>`
-    )}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${A({
+    )}
+        ${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>`;
+    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
   }
 };
-p.styles = [W, dt];
-p.dependencies = {
-  "cx-button": U,
-  "cx-details": T,
-  "cx-divider": ht,
-  "cx-icon": I,
+u.styles = [E, mt];
+u.dependencies = {
+  "cx-button": B,
+  "cx-details": I,
+  "cx-divider": lt,
+  "cx-icon": L,
   "cx-icon-button": K,
-  "cx-input": Z,
-  "cx-option": Q,
-  "cx-select": G,
-  "cx-space": P,
-  "cx-typography": _
+  "cx-input": J,
+  "cx-option": X,
+  "cx-select": Y,
+  "cx-space": _,
+  "cx-typography": F
 };
-u([
+x([
   V(".details")
-], p.prototype, "base", 2);
-u([
-  h({ reflect: !0, type: Boolean })
-], p.prototype, "open", 2);
-u([
-  h({ reflect: !0, type: Number })
-], p.prototype, "width", 2);
-u([
-  h({ reflect: !0, type: Number })
-], p.prototype, "height", 2);
-u([
-  h({ attribute: "max-width", reflect: !0, type: Number })
-], p.prototype, "maxWidth", 2);
-u([
-  h({ attribute: "max-height", reflect: !0, type: Number })
-], p.prototype, "maxHeight", 2);
-u([
-  h({ attribute: "ratio-width", reflect: !0, type: Number })
-], p.prototype, "ratioWidth", 2);
-u([
-  h({ attribute: "ratio-height", reflect: !0, type: Number })
-], p.prototype, "ratioHeight", 2);
-u([
-  h({ attribute: "percentage-width", reflect: !0, type: Number })
-], p.prototype, "percentageWidth", 2);
-u([
-  h({ attribute: "percentage-height", reflect: !0, type: Number })
-], p.prototype, "percentageHeight", 2);
-u([
-  h({ reflect: !0, type: String })
-], p.prototype, "unit", 2);
-u([
-  h({ attribute: "disabled-apply", reflect: !0, type: Boolean })
-], p.prototype, "disabledApply", 2);
-u([
-  h({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], p.prototype, "lastAppliedSetting", 2);
-u([
-  h({ reflect: !0, type: Boolean })
-], p.prototype, "loading", 2);
-u([
-  h({ attribute: "crop-modes", reflect: !1, type: Array })
-], p.prototype, "cropModes", 2);
-u([
-  h({ attribute: "focus-modes", reflect: !1, type: Object })
-], p.prototype, "focusModes", 2);
-u([
-  h({ attribute: "focus-mode", reflect: !0, type: String })
-], p.prototype, "focusMode", 2);
-u([
-  h({ attribute: "crop-mode", reflect: !0, type: String })
-], p.prototype, "cropMode", 2);
-u([
-  h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], p.prototype, "keepAspectRatio", 2);
-u([
-  f()
-], p.prototype, "invalidWidth", 2);
-u([
-  f()
-], p.prototype, "invalidHeight", 2);
-u([
-  f()
-], p.prototype, "aspectRatio", 2);
-u([
-  S("cropMode", { waitUntilFirstUpdate: !0 }),
-  S("maxWidth", { waitUntilFirstUpdate: !0 }),
-  S("maxHeight", { waitUntilFirstUpdate: !0 }),
-  S("keepAspectRatio")
-], p.prototype, "handleCropModeChange", 1);
-u([
-  S("open")
-], p.prototype, "handleOpenChange", 1);
-p = u([
-  F("cx-asset-link-format-crop")
-], p);
-const gt = N`.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 xt = Object.defineProperty, ft = Object.getOwnPropertyDescriptor, J = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? ft(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (o = (s ? n(e, i, o) : n(o)) || o);
-  return s && o && xt(e, i, o), o;
+], 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 O = class extends H {
+let T = class extends W {
   constructor() {
-    super(...arguments), this.localize = new E(this), this.value = "", this.items = [];
+    super(...arguments), this.localize = new U(this), this.value = "", this.items = [];
   }
   handleExtensionChange(t) {
     const e = t.target.value;
@@ -398,38 +406,38 @@ let O = class extends H {
     });
   }
   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}>${L(
+    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>`;
   }
 };
-O.styles = [W, gt];
-O.dependencies = {
-  "cx-option": Q,
-  "cx-select": G,
-  "cx-space": P,
-  "cx-typography": _
+T.styles = [E, xt];
+T.dependencies = {
+  "cx-option": X,
+  "cx-select": Y,
+  "cx-space": _,
+  "cx-typography": F
 };
-J([
-  h({ reflect: !0, type: String })
-], O.prototype, "value", 2);
-J([
-  h({ reflect: !1, type: Array })
-], O.prototype, "items", 2);
-O = J([
-  F("cx-asset-link-format-extension")
-], O);
-const yt = N`cx-details::part(base){border-bottom-width:0}`;
-var zt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, R = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? St(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (o = (s ? n(e, i, o) : n(o)) || o);
-  return s && o && zt(e, i, o), o;
+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 w = class extends H {
+let $ = class extends W {
   constructor() {
-    super(...arguments), this.localize = new E(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
+    super(...arguments), this.localize = new U(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
   }
   handleValueChange() {
     this.scopedValue = this.value;
@@ -473,61 +481,61 @@ let w = class extends H {
     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}>${L(
+    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=${A({
+    )}</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>`;
   }
 };
-w.styles = [W, yt];
-w.dependencies = {
-  "cx-button": U,
-  "cx-details": T,
-  "cx-icon": I,
-  "cx-option": Q,
-  "cx-select": G,
-  "cx-space": P,
-  "cx-typography": _
+$.styles = [E, St];
+$.dependencies = {
+  "cx-button": B,
+  "cx-details": I,
+  "cx-icon": L,
+  "cx-option": X,
+  "cx-select": Y,
+  "cx-space": _,
+  "cx-typography": F
 };
-R([
+M([
   V(".details")
-], w.prototype, "base", 2);
-R([
-  h({ reflect: !0, type: Boolean })
-], w.prototype, "open", 2);
-R([
-  h({ reflect: !0, type: String })
-], w.prototype, "value", 2);
-R([
-  h({ reflect: !1, type: Array })
-], w.prototype, "items", 2);
-R([
-  h({ reflect: !0, type: Boolean })
-], w.prototype, "loading", 2);
-R([
-  f()
-], w.prototype, "scopedValue", 2);
-R([
-  S("value")
-], w.prototype, "handleValueChange", 1);
-R([
-  S("open", { waitUntilFirstUpdate: !0 })
-], w.prototype, "handleOpenChange", 1);
-w = R([
-  F("cx-asset-link-format-proxy")
-], w);
-const wt = N`cx-details::part(base){border-bottom-width:0}`;
-var bt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, D = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? vt(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (o = (s ? n(e, i, o) : n(o)) || o);
-  return s && o && bt(e, i, o), o;
+], $.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 b = class extends H {
+let A = class extends W {
   constructor() {
-    super(...arguments), this.localize = new E(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+    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.
@@ -542,7 +550,9 @@ let b = class extends H {
   }
   handleQualityChange(t) {
     const e = t.target.value;
-    this.scopedValue = Number(e);
+    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.
@@ -571,54 +581,57 @@ let b = class extends H {
     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=${A({
+    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><cx-button data-testid="cx-asset-link-format-quality-apply" variant="primary" ?disabled=${this.invalidValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
+    })} @cx-input=${this.handleQualityChange}></cx-input></cx-tooltip>${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>`;
   }
 };
-b.styles = [W, wt];
-b.dependencies = {
-  "cx-button": U,
-  "cx-details": T,
-  "cx-icon": I,
-  "cx-input": Z,
-  "cx-space": P,
+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": _
+  "cx-typography": F
 };
 D([
   V(".details")
-], b.prototype, "base", 2);
+], A.prototype, "base", 2);
+D([
+  n({ reflect: !0, type: Boolean })
+], A.prototype, "open", 2);
 D([
-  h({ reflect: !0, type: Boolean })
-], b.prototype, "open", 2);
+  n({ reflect: !0, type: Number })
+], A.prototype, "value", 2);
 D([
-  h({ reflect: !0, type: Number })
-], b.prototype, "value", 2);
+  n({ reflect: !0, type: Boolean })
+], A.prototype, "loading", 2);
 D([
-  h({ reflect: !0, type: Boolean })
-], b.prototype, "loading", 2);
+  n({ attribute: "can-apply", reflect: !0, type: Boolean })
+], A.prototype, "canApply", 2);
 D([
-  f()
-], b.prototype, "scopedValue", 2);
+  z()
+], A.prototype, "scopedValue", 2);
 D([
-  S("value")
-], b.prototype, "handleValueChange", 1);
-b = D([
-  F("cx-asset-link-format-quality")
-], b);
-const kt = N`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 $t = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, y = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? Ct(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (o = (s ? n(e, i, o) : n(o)) || o);
-  return s && o && $t(e, i, o), o;
+  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 g = class extends H {
+let y = class extends W {
   constructor() {
-    super(...arguments), this.localize = new E(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 = {
+    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.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
+    }, 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.
@@ -638,21 +651,25 @@ let g = class extends H {
         return;
       }
     }
-    if (this.maxWidth && this.maxHeight) {
+    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() {
-    await this.updateComplete, this.open || (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
-      }
-    }));
+    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) {
@@ -751,98 +768,105 @@ let g = class extends H {
   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=${A({
+              </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><cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${A({
+              </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>`;
+    })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
   }
 };
-g.styles = [W, kt];
-g.dependencies = {
-  "cx-button": U,
-  "cx-details": T,
-  "cx-icon": I,
+y.styles = [E, At];
+y.dependencies = {
+  "cx-button": B,
+  "cx-details": I,
+  "cx-icon": L,
   "cx-icon-button": K,
-  "cx-input": Z,
-  "cx-option": Q,
-  "cx-select": G,
-  "cx-space": P,
-  "cx-typography": _
+  "cx-input": J,
+  "cx-option": X,
+  "cx-select": Y,
+  "cx-space": _,
+  "cx-typography": F
 };
-y([
+S([
   V(".details")
-], g.prototype, "base", 2);
-y([
-  h({ reflect: !0, type: Boolean })
-], g.prototype, "open", 2);
-y([
-  h({ reflect: !0, type: Number })
-], g.prototype, "width", 2);
-y([
-  h({ reflect: !0, type: Number })
-], g.prototype, "height", 2);
-y([
-  h({ attribute: "max-width", reflect: !0, type: Number })
-], g.prototype, "maxWidth", 2);
-y([
-  h({ attribute: "max-height", reflect: !0, type: Number })
-], g.prototype, "maxHeight", 2);
-y([
-  h({ attribute: "ratio-width", reflect: !0, type: Number })
-], g.prototype, "ratioWidth", 2);
-y([
-  h({ attribute: "ratio-height", reflect: !0, type: Number })
-], g.prototype, "ratioHeight", 2);
-y([
-  h({ reflect: !0, type: String })
-], g.prototype, "unit", 2);
-y([
-  h({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], g.prototype, "lastAppliedSetting", 2);
-y([
-  h({ reflect: !0, type: Boolean })
-], g.prototype, "loading", 2);
-y([
-  h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], g.prototype, "keepAspectRatio", 2);
-y([
-  f()
-], g.prototype, "invalidWidth", 2);
-y([
-  f()
-], g.prototype, "invalidHeight", 2);
-y([
-  f()
-], g.prototype, "aspectRatio", 2);
-y([
-  S("cropMode", { waitUntilFirstUpdate: !0 }),
-  S("maxWidth", { waitUntilFirstUpdate: !0 }),
-  S("maxHeight", { waitUntilFirstUpdate: !0 }),
-  S("keepAspectRatio")
-], g.prototype, "handleCropModeChange", 1);
-y([
-  S("open")
-], g.prototype, "handleOpenChange", 1);
-g = y([
-  F("cx-asset-link-format-resize")
-], g);
-const At = N`cx-details::part(base){border-bottom-width:0}`;
-var Rt = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, q = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? Mt(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (o = (s ? n(e, i, o) : n(o)) || o);
-  return s && o && Rt(e, i, o), o;
+], 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 v = class extends H {
+let C = class extends W {
   constructor() {
-    super(...arguments), this.localize = new E(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1;
+    super(...arguments), this.localize = new U(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.canApply = !1;
   }
   handleOpenChange() {
-    this.open || this.emit("cx-asset-link-format-rotation-change", {
-      detail: 0
-    });
+    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));
@@ -872,52 +896,55 @@ let v = class extends H {
     });
   }
   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=${A({
+    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><cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === 0} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
+    })} @cx-input=${this.handleRotationChange}></cx-input>${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>`;
   }
 };
-v.styles = [W, At];
-v.dependencies = {
-  "cx-button": U,
-  "cx-button-group": lt,
-  "cx-details": T,
-  "cx-icon": I,
+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": P,
-  "cx-typography": _
+  "cx-space": _,
+  "cx-typography": F
 };
 q([
   V(".details")
-], v.prototype, "base", 2);
+], C.prototype, "base", 2);
 q([
-  h({ reflect: !0, type: Boolean })
-], v.prototype, "open", 2);
+  n({ reflect: !0, type: Boolean })
+], C.prototype, "open", 2);
 q([
-  h({ reflect: !0, type: Number })
-], v.prototype, "value", 2);
+  n({ reflect: !0, type: Number })
+], C.prototype, "value", 2);
 q([
-  h({ attribute: "default-value", reflect: !0, type: Number })
-], v.prototype, "defaultValue", 2);
+  n({ attribute: "default-value", reflect: !0, type: Number })
+], C.prototype, "defaultValue", 2);
 q([
-  h({ reflect: !0, type: Boolean })
-], v.prototype, "loading", 2);
+  n({ reflect: !0, type: Boolean })
+], C.prototype, "loading", 2);
 q([
-  S("open", { waitUntilFirstUpdate: !0 })
-], v.prototype, "handleOpenChange", 1);
-v = q([
-  F("cx-asset-link-format-rotation")
-], v);
-const Pt = N`cx-details::part(base){border-bottom-width:0}`;
-var _t = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, X = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? Ht(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (o = (s ? n(e, i, o) : n(o)) || o);
-  return s && o && _t(e, i, o), o;
+  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 M = class extends H {
+let H = class extends W {
   constructor() {
-    super(...arguments), this.localize = new E(this), this.open = !1, this.value = !1;
+    super(...arguments), this.localize = new U(this), this.open = !1, this.value = !1;
   }
   handleApply(t) {
     this.emit("cx-asset-link-format-metadata-change", {
@@ -944,36 +971,36 @@ let M = class extends H {
     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>`;
   }
 };
-M.styles = [W, Pt];
-M.dependencies = {
-  "cx-button": U,
-  "cx-checkbox": ct,
-  "cx-details": T,
-  "cx-icon": I,
-  "cx-space": P,
+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": _
+  "cx-typography": F
 };
-X([
+Z([
   V(".details")
-], M.prototype, "base", 2);
-X([
-  h({ reflect: !0, type: Boolean })
-], M.prototype, "open", 2);
-X([
-  h({ reflect: !0, type: Boolean })
-], M.prototype, "value", 2);
-M = X([
-  F("cx-asset-link-format-metadata")
-], M);
-var Wt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, c = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? Ft(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (o = (s ? n(e, i, o) : n(o)) || o);
-  return s && o && Wt(e, i, o), o;
+], 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 l = class extends H {
+let c = class extends W {
   constructor() {
-    super(), this.localize = new E(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
+    super(), this.localize = new U(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
       {
         label: "Free",
         value: "free"
@@ -1032,7 +1059,7 @@ let l = class extends H {
         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.noMetadata = !1, this.noCrop = !1, this.noResize = !1, this.noRotate = !1, this.lastImageSize = {
+    ], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", 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 = {
@@ -1058,7 +1085,7 @@ let l = class extends H {
     }, 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 = at, this.apiGetCropFocusMode = ot, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
+    }, 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() {
@@ -1156,7 +1183,7 @@ let l = class extends H {
    * Returns the transformation string for the asset link.
    */
   get transformationString() {
-    return Y({
+    return G({
       asset: this.asset,
       baseUrl: "",
       parameters: this.parameters,
@@ -1197,7 +1224,7 @@ let l = class extends H {
         token: this.token,
         transformations: this.transformationString
       }).then((s) => {
-        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === d.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+        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 = {
@@ -1211,7 +1238,7 @@ let l = class extends H {
            */
         });
       });
-      const i = Y({
+      const i = G({
         asset: this.asset,
         baseUrl: "",
         extension: this.selectedFormat.extension,
@@ -1233,8 +1260,98 @@ let l = class extends H {
   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.selectedFormat)
+    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
@@ -1273,11 +1390,11 @@ let l = class extends H {
       width: e.width,
       x: 0,
       y: 0
-    }, this.lastAction === d.Rotate && (this.rotation = 0), this.lastAction = void 0;
+    }, this.lastAction === l.Rotate && (this.rotation = 0), this.lastAction = void 0;
     const i = this.transformations.some(
-      (r) => r.key === d.Metadata
+      (r) => r.key === l.Metadata
     ), s = this.transformations.findLast(
-      (r) => r.key === d.Quality
+      (r) => r.key === l.Quality
     );
     this.selectedFormat = {
       ...this.selectedFormat,
@@ -1291,7 +1408,7 @@ let l = class extends H {
        * url: `${this.baseUrl}/${response.relativePath}`,
        */
     };
-    const o = Y({
+    const o = G({
       asset: this.asset,
       baseUrl: "",
       extension: this.selectedFormat.extension,
@@ -1323,7 +1440,7 @@ let l = class extends H {
       width: Number.parseInt(this.asset.width, 10)
     });
     const t = this.transformations.findLast(
-      (e) => e.key === d.Quality
+      (e) => e.key === l.Quality
     );
     this.selectedFormat = {
       extension: this.asset.extension,
@@ -1353,7 +1470,7 @@ let l = class extends H {
       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 : "");
+    }, 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);
@@ -1369,24 +1486,25 @@ let l = class extends H {
     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 === d.Crop) {
-        const o = s.value, r = o.width / i.formatWidth * e.formatWidth, n = o.height / i.formatHeight * e.formatHeight, x = o.x / i.formatWidth * e.formatWidth, z = o.y / i.formatHeight * e.formatHeight;
+      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: {
-            height: n,
+            ...s.value,
+            height: h,
             width: r,
-            x,
-            y: z
+            x: d,
+            y: g
           }
         };
       }
-      if (s.key === d.Resize) {
-        const o = s.value, r = o.width / i.formatWidth * e.formatWidth, n = o.height / i.formatHeight * e.formatHeight;
+      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: n,
+            height: h,
             width: r
           }
         };
@@ -1453,32 +1571,32 @@ let l = class extends H {
     keepAspectRatio: s,
     percentageHeight: o,
     percentageWidth: r,
-    ratioHeight: n,
-    ratioWidth: x,
-    unit: z,
-    useCropMode: $,
-    width: B
+    ratioHeight: h,
+    ratioWidth: d,
+    unit: g,
+    useCropMode: b,
+    width: f
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
-    this.loading = !0, this.lastAction = d.Crop;
-    const k = await this.apiGetCropFocusMode({
+    this.loading = !0, this.lastAction = l.Crop;
+    const v = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
-      cropWidth: B,
+      cropWidth: f,
       imageUrl: this.selectedFormat.url
     });
-    if (k) {
-      let j = o, tt = r;
-      i || (j = k.height * 100 / this.selectedFormat.height), B || (tt = k.width * 100 / this.selectedFormat.width), this.cropSize = {
+    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: k.height,
-        percentageHeight: j ?? this.cropSize.percentageHeight,
-        percentageWidth: tt ?? this.cropSize.percentageWidth,
-        width: k.width,
-        x: k.x * 100 / this.selectedFormat.width,
-        y: k.y * 100 / this.selectedFormat.height,
-        ...$ ? {
+        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
@@ -1487,9 +1605,9 @@ let l = class extends H {
           focusMode: e
         },
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
-        ratioHeight: n ?? this.cropSize.ratioHeight,
-        ratioWidth: x ?? this.cropSize.ratioWidth,
-        unit: z ?? this.cropSize.unit
+        ratioHeight: h ?? this.cropSize.ratioHeight,
+        ratioWidth: d ?? this.cropSize.ratioWidth,
+        unit: g ?? this.cropSize.unit
       };
     }
     this.loading = !1, this.lastAction = void 0;
@@ -1503,26 +1621,26 @@ let l = class extends H {
     } = e;
     if (s === 0 || i === 0)
       return;
-    const n = this.cropSize.percentageWidth !== s, x = this.cropSize.percentageHeight !== i;
-    let z = this.cropSize.height, $ = this.cropSize.width;
-    n && ($ = Math.round(s * this.selectedFormat.width / 100)), x && (z = Math.round(
+    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 B = this.cropSize.focusMode;
+    const f = this.cropSize.focusMode;
     this.focusModes.find(
-      (j) => j.value === B
+      (P) => P.value === f
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
-      focusMode: B,
-      height: z,
+      focusMode: f,
+      height: g,
       percentageHeight: i,
       percentageWidth: s,
-      width: $
+      width: b
     }) : this.cropSize = {
       ...this.cropSize,
-      height: z,
+      height: g,
       percentageHeight: i,
       percentageWidth: s,
-      width: $,
+      width: b,
       x: o,
       y: r
     };
@@ -1547,7 +1665,7 @@ let l = class extends H {
   }
   onProxyChange(t) {
     const e = t.detail;
-    this.lastAction = d.Proxy, this.selectedProxy = e.id;
+    this.lastAction = l.Proxy, this.selectedProxy = e.id;
   }
   async onCropModeChange(t) {
     const { mode: e } = t.detail;
@@ -1558,10 +1676,10 @@ let l = class extends H {
       });
     else {
       const s = this.focusModes.find(
-        (z) => z.value === this.cropSize.focusMode
+        (g) => g.value === this.cropSize.focusMode
       )?.auto;
-      let o = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, n = this.cropSize.x, x = this.cropSize.y;
-      e === "free" ? (o = !1, r = "manual") : this.cropSize.unit === a.Pixel && !s && (n = 0, x = 0), s ? await this.handleRequestAutoCropSuggestion({
+      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,
@@ -1572,21 +1690,42 @@ let l = class extends H {
         cropMode: e,
         focusMode: r,
         keepAspectRatio: o,
-        x: n,
-        y: x
-      };
+        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;
-    this.focusModes.find((s) => s.value === e)?.auto && this.selectedFormat?.url ? this.handleRequestAutoCropSuggestion({
+    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;
@@ -1597,37 +1736,37 @@ let l = class extends H {
       ), o = Math.min(
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
-      ), r = o * 100 / this.selectedFormat.height, n = s * 100 / this.selectedFormat.width;
-      let x = this.cropSize.x, z = this.cropSize.y;
-      x + n > 100 && (x = 100 - n), z + r > 100 && (z = 100 - r);
-      let $ = this.cropSize.cropMode;
+      ), 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(
-        (k) => k.value === $
-      )?.auto && ($ = "free"), t.detail.silent ? (this.cropSize.height = o, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = n, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = a.AspectRatio, this.cropSize.width = s) : this.cropSize = {
+        (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: $,
+        cropMode: b,
         height: o,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: r,
-        percentageWidth: n,
+        percentageWidth: h,
         ratioHeight: t.detail.height,
         ratioWidth: t.detail.width,
         unit: a.AspectRatio,
         width: s,
-        x,
-        y: z
+        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 n = this.cropSize.cropMode;
-      const x = this.cropModes.find(
-        (z) => z.value === n
+      let h = this.cropSize.cropMode;
+      const d = this.cropModes.find(
+        (g) => g.value === h
       )?.auto;
-      (t.detail.breakAspectRatio || x) && (n = "free"), t.detail.silent ? (this.cropSize.cropMode = n, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = a.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = o, this.cropSize.y = r) : this.cropSize = {
+      (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: n,
+        cropMode: h,
         height: t.detail.height,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: i,
@@ -1638,10 +1777,26 @@ let l = class extends H {
         y: r
       };
     }
-    e !== this.cropSize.unit && (this.cropSize = {
+    if (e !== this.cropSize.unit && (this.cropSize = {
       ...this.cropSize,
       cropMode: "free"
-    }, this.onCropChanged());
+    }, 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(
@@ -1654,46 +1809,56 @@ let l = class extends H {
   }
   onCropApply(t) {
     const { height: e, mode: i, unit: s, width: o } = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = d.Crop, !(!this.cropperElement || !this.selectedFormat))
-      if (e && o && s) {
-        let r = o, n = e;
-        if (s === a.AspectRatio && (r = this.cropSize.percentageWidth * this.selectedFormat.width / 100, n = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
-          this.transformations = [
-            ...this.transformations,
-            {
-              key: d.Crop,
-              value: {
-                height: n,
-                mode: i,
-                width: r
-              }
+    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 x = this.cropSize.x / 100 * this.selectedFormat.width, z = this.cropSize.y / 100 * this.selectedFormat.height;
-          this.transformations = [
-            ...this.transformations,
-            {
-              key: d.Crop,
-              value: {
-                height: n,
-                unit: s,
-                width: r,
-                x,
-                y: z
-              }
+          }
+        ];
+      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: d.Crop,
-          value: {
-            mode: i
           }
+        ];
+      }
+    } else i && (this.transformations = [
+      ...this.transformations,
+      {
+        key: l.Crop,
+        value: {
+          focusMode: r,
+          isFocusModeAuto: h,
+          mode: i
         }
-      ]);
+      }
+    ]);
   }
   onResizeChange(t) {
     if (t.detail.unit === a.AspectRatio) {
@@ -1718,37 +1883,55 @@ let l = class extends H {
         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 = d.Resize;
+    this.preResetTransformations = void 0, this.lastAction = l.Resize;
     const o = this.selectedFormat.width || this.defaultSize.width, r = this.selectedFormat.height || this.defaultSize.height;
-    let n = s, x = e;
-    this.resizeSize.unit !== i ? (n = o, x = r) : i === a.AspectRatio && (n = Math.round(s / e * r), x = r), this.transformations = [
+    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: d.Resize,
+        key: l.Resize,
         value: {
-          height: x,
+          height: d,
           unit: i,
-          width: n
+          width: h
         }
       }
     ];
   }
   onRotationChange(t) {
-    this.rotation = t.detail;
+    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 = d.Rotate, this.transformations = [
+    this.preResetTransformations = void 0, this.lastAction = l.Rotate, this.transformations = [
       ...this.transformations,
       {
-        key: d.Rotate,
+        key: l.Rotate,
         value: {
           rotation: e
         }
@@ -1756,52 +1939,56 @@ let l = class extends H {
     ];
   }
   onQualityChange(t) {
-    if (!this.selectedFormat)
-      return;
     const e = t.detail;
-    this.selectedFormat.quality = e, this.preResetTransformations = void 0, this.lastAction = d.Quality, this.transformations = [
-      ...this.transformations,
-      {
-        key: d.Quality,
-        value: {
-          quality: e
-        }
+    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) {
-    if (!this.selectedFormat)
-      return;
     const e = t.detail;
-    this.preResetTransformations = void 0, this.selectedFormat = {
+    if (this.preResetTransformations = void 0, this.selectedFormat && (this.selectedFormat = {
       ...this.selectedFormat,
       keepMetadata: e
-    }, e ? this.transformations = [
+    }), !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 !== d.Metadata
+        (i) => i.key !== l.Metadata
       ),
       {
-        key: d.Metadata,
+        key: l.Metadata,
         value: {
           keepMetadata: e
         }
       }
     ] : this.transformations = this.transformations.filter(
-      (i) => i.key !== d.Metadata
+      (i) => i.key !== l.Metadata
     );
   }
   onExtensionChange(t) {
-    if (!this.selectedFormat)
-      return;
     const e = t.detail;
-    this.selectedFormat = {
+    this.selectedFormat && (this.selectedFormat = {
       ...this.selectedFormat,
       extension: e
-    };
+    });
   }
   syncQuality() {
     const t = this.transformations.findLast(
-      (e) => e.key === d.Quality
+      (e) => e.key === l.Quality
     )?.value?.quality;
     this.selectedFormat && (this.selectedFormat = {
       ...this.selectedFormat,
@@ -1815,152 +2002,160 @@ let l = class extends H {
     this.preResetTransformations = [...this.transformations], this.transformations = [], this.frozenIndex = -1, this.syncQuality();
   }
   render() {
-    return m`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${C(
+    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>${C(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>`,
-      () => rt
-    )}<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 === d.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>${C(
+      () => 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} ?loading=${this.loading && this.lastAction === d.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[a.Pixel].width} max-height=${this.lastResizeSize[a.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>`
+      () => 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>`
     )}
-      ${C(
+      ${k(
       !this.noResize,
-      () => m`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === d.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>`
+      () => 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>`
     )}
-      ${C(
+      ${k(
       !this.noRotate,
-      () => m`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === d.Rotate} ?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" ?loading=${this.loading && this.lastAction === d.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>${C(
+      () => 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>`
     )}
-      ${C(
+      ${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>`;
   }
 };
-l.styles = [W, pt];
-l.dependencies = {
-  "cx-asset-link-format-crop": p,
-  "cx-asset-link-format-extension": O,
-  "cx-asset-link-format-metadata": M,
-  "cx-asset-link-format-proxy": w,
-  "cx-asset-link-format-quality": b,
-  "cx-asset-link-format-resize": g,
-  "cx-asset-link-format-rotation": v,
-  "cx-button": U,
-  "cx-space": P,
-  "cx-typography": _
+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
 };
-c([
-  h({ attribute: "base-url", type: String })
-], l.prototype, "baseUrl", 2);
-c([
-  h({ attribute: "token", type: String })
-], l.prototype, "token", 2);
-c([
-  h({ reflect: !1, type: Object })
-], l.prototype, "asset", 2);
-c([
-  h({ attribute: "crop-modes", reflect: !1, type: Array })
-], l.prototype, "cropModes", 2);
-c([
-  h({ attribute: "focus-modes", reflect: !1, type: Object })
-], l.prototype, "focusModes", 2);
-c([
-  h({ reflect: !1, type: Array })
-], l.prototype, "extensions", 2);
-c([
-  h({ reflect: !1, type: Array })
-], l.prototype, "proxies", 2);
-c([
-  h({ attribute: "for-cropper", reflect: !0, type: String })
-], l.prototype, "forCropper", 2);
-c([
-  h({ attribute: "use-session", reflect: !0, type: String })
-], l.prototype, "useSession", 2);
-c([
-  h({ reflect: !1, type: Array })
-], l.prototype, "transformations", 2);
-c([
-  h({ attribute: "selected-proxy", reflect: !0, type: String })
-], l.prototype, "selectedProxy", 2);
-c([
-  h({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
-], l.prototype, "useCustomExtension", 2);
-c([
-  h({ attribute: "no-metadata", reflect: !0, type: Boolean })
-], l.prototype, "noMetadata", 2);
-c([
-  h({ attribute: "no-crop", reflect: !0, type: Boolean })
-], l.prototype, "noCrop", 2);
-c([
-  h({ attribute: "no-resize", reflect: !0, type: Boolean })
-], l.prototype, "noResize", 2);
-c([
-  h({ attribute: "no-rotate", reflect: !0, type: Boolean })
-], l.prototype, "noRotate", 2);
-c([
-  h({ attribute: "last-image-size", reflect: !1, type: Object })
-], l.prototype, "lastImageSize", 2);
-c([
-  h({ attribute: "hide-header", reflect: !1, type: Boolean })
-], l.prototype, "hideHeader", 2);
-c([
-  h({ attribute: "can-reset", type: Boolean })
-], l.prototype, "canReset", 2);
-c([
-  h({ attribute: !1, reflect: !1, type: Object })
-], l.prototype, "queryElement", 2);
-c([
-  f()
-], l.prototype, "activeSetting", 2);
-c([
-  f()
-], l.prototype, "selectedFormat", 2);
-c([
-  f()
-], l.prototype, "resizeSize", 2);
-c([
-  f()
-], l.prototype, "cropSize", 2);
-c([
-  f()
-], l.prototype, "rotation", 2);
-c([
-  f()
-], l.prototype, "defaultSize", 2);
-c([
-  f()
-], l.prototype, "cropperElement", 2);
-c([
-  f()
-], l.prototype, "parameters", 2);
-c([
-  f()
-], l.prototype, "loading", 2);
-c([
-  f()
-], l.prototype, "lastAction", 2);
-c([
-  f()
-], l.prototype, "frozenIndex", 2);
-c([
-  f()
-], l.prototype, "preResetTransformations", 2);
-c([
-  S(["transformations"])
-], l.prototype, "handleTransformationsChange", 1);
-c([
-  S("selectedProxy")
-], l.prototype, "handleSelectedProxyChange", 1);
-c([
-  S("loading")
-], l.prototype, "handleLoadingChange", 1);
-l = c([
-  F("cx-asset-link-format")
-], l);
+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: "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);
 export {
-  l as default
+  c as default
 };