@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

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

@@ -1,238 +1,56 @@
-import "../chunks/cropper.tSDgXKqJ.js";
-import { C as q } from "../chunks/button.KnE3mcyM.js";
-import H from "./space.js";
-import { C as W } from "../chunks/typography.oDzoLbZS.js";
-import { n as l, C as F } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { b as rt, c as ht } from "../chunks/asset.CG_yXtWK.js";
-import { c as E } from "../chunks/component.styles.DMSLciL5.js";
-import { T as c, U as o } from "../chunks/asset-link-format.BSRDqHg7.js";
-import { c as N } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as O } from "../chunks/i18n.C0iakJkV.js";
-import { w as k } from "../chunks/watch.q1sEjPWL.js";
-import { s as it, c as st } from "../chunks/number.CjNxU7Xs.js";
-import { i as D, x as b, E as lt } from "../chunks/lit-element.jLBm65_O.js";
-import { r as z } from "../chunks/state.CSDxrqLd.js";
-import { n as G } from "../chunks/when.Dr1es41R.js";
-import L from "./details.js";
-import nt from "./divider.js";
-import j from "./icon.js";
-import K from "./icon-button.js";
-import tt from "./input.js";
-import { C as X } from "../chunks/option.DnpkE8Xi.js";
-import Y from "./select.js";
-import { c as ct } from "../chunks/image.mbpyiQpQ.js";
-import { e as T } from "../chunks/query.BBf1UFkC.js";
-import { c as Q } from "../chunks/repeat.DbF2p5ae.js";
-import { o as M } from "../chunks/style-map.llVFPd__.js";
-import at from "./tooltip.js";
-import pt from "./button-group.js";
-import dt from "./checkbox.js";
-const ut = D`
-  .asset-link-format__details {
-    --header-padding: var(--cx-spacing-small) var(--cx-spacing-medium);
-  }
-
-  .asset-link-format__details::part(icon) {
-    width: var(--cx-font-size-3x-large);
-    height: var(--cx-font-size-3x-large);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--cx-color-neutral-100);
-    border-radius: var(--cx-border-radius-large);
-    color: var(--cx-color-neutral-600);
-    font-size: var(--cx-font-size-large);
-  }
-
-  .asset-link-format__details::part(input-label) {
-    color: var(--cx-color-neutral-400);
-    margin-inline-start: var(--cx-spacing-small);
-  }
-
-  .asset-link-format__header {
-    padding: var(--cx-spacing-medium);
-  }
-
-  .asset-link-format__section-header {
-    padding: 0 var(--cx-spacing-medium);
-    border-top: solid 1px var(--cx-color-neutral-200);
-    background-color: var(--cx-color-neutral-50);
-  }
-
-  .asset-link-format__undo {
-    --color: var(--cx-color-primary);
-    --background-color: transparent;
-  }
-`;
-function J({
-  asset: t,
-  baseUrl: e,
-  extension: i,
-  parameters: s,
-  transformations: a,
-  useSession: h = ""
-}) {
-  let r = e;
-  a && a.length > 0 && (r += "/t/");
-  const m = a?.findLast(
-    (v) => v.key === c.Quality
-  );
-  m && (a = [
-    ...a?.filter(
-      (v) => v.key !== c.Quality
-    ) || [],
-    m
-  ]), a?.forEach(({ key: v, value: w }) => {
-    if (v === c.Resize) {
-      const x = [
-        ...[
-          {
-            key: "re_w_",
-            value: Math.round(w.width ?? 0)
-          },
-          {
-            key: "re_h_",
-            value: Math.round(w.height ?? 0)
-          }
-        ].filter((n) => n.value !== void 0).map((n) => ({
-          key: n.key,
-          value: Math.round(Number(n.value))
-        })),
-        {
-          key: "re_rm_",
-          value: "stretch"
-        }
-      ];
-      x.forEach(({ key: n, value: $ }, B) => {
-        r += `${n}${$}${B < x.length - 1 ? "," : ""}`;
-      }), r += "/";
-    }
-    if (v === c.Crop) {
-      const x = [
-        ...[
-          {
-            key: "c_",
-            value: w.mode
-          },
-          ...w.disabledSize ? [] : [
-            {
-              key: "c_w_",
-              value: Math.round(w.width ?? 0)
-            },
-            {
-              key: "c_h_",
-              value: Math.round(w.height ?? 0)
-            },
-            {
-              key: "c_x_",
-              value: Math.round(w.x ?? 0)
-            },
-            {
-              key: "c_y_",
-              value: Math.round(w.y ?? 0)
-            }
-          ]
-        ].filter((n) => n.value !== void 0 && n.value !== null).map((n) => ({
-          key: n.key,
-          value: n.value
-        })),
-        {
-          key: "c_whu_",
-          value: "pixel"
-        }
-      ];
-      x.forEach(({ key: n, value: $ }, B) => {
-        const ot = ["c_w_", "c_h_", "c_x_", "c_y_"].includes(n);
-        r += `${n}${ot ? Math.round(Number($)) : $}${B < x.length - 1 ? "," : ""}`;
-      }), r += "/";
-    }
-    if (v === c.Rotate && ([
-      {
-        key: "r_a_",
-        value: w.rotation
-      }
-    ].filter((n) => n.value !== void 0).map((n) => ({
-      key: n.key,
-      value: Math.round(Number(n.value))
-    })).forEach(({ key: n, value: $ }) => {
-      r += `${n}${$}`;
-    }), r += "/"), v === c.Quality) {
-      const x = [
-        {
-          key: "q_level_",
-          value: w.quality
-        }
-      ].filter((n) => n.value !== void 0).map((n) => ({
-        key: n.key,
-        value: Math.round(Number(n.value))
-      }));
-      x.forEach(({ key: n, value: $ }, B) => {
-        r += `${n}${$}${B < x.length - 1 ? "," : ""}`;
-      }), r += "/";
-    }
-    if (v === c.Metadata) {
-      const x = [
-        {
-          key: "fl_keep_metadata",
-          value: w.keepMetadata
-        }
-      ].filter((n) => n.value !== void 0).map((n) => ({ key: n.key, value: n.value }));
-      x.forEach(({ key: n }, $) => {
-        r += `${n}${$ < x.length - 1 ? "," : ""}`;
-      }), r += "/";
-    }
-  }), i && (r += `${t?.identifier}${i}`);
-  const y = [];
-  return s && s.length > 0 && s.forEach(({ key: v, value: w }) => {
-    y.push(
-      `${encodeURIComponent(v.trim())}=${encodeURIComponent(w.trim())}`
-    );
-  }), y.length > 0 && (r += `?${y.join("&")}`), r.endsWith("/") && (r = r.slice(0, -1)), r;
-}
-const gt = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-
-  cx-space {
-    width: 100%;
-  }
-
-  cx-space cx-input {
-    flex: 1;
-  }
-
-  .crop__unit-select {
-    width: 120px;
-  }
-
-  .crop__input-group {
-    display: flex;
-    flex: 1;
-  }
-`;
-var mt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, g = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? xt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && mt(e, i, a), a;
+import "../chunks/cropper.ZU2Dy-MM.js";
+import { C as D } from "../chunks/button.CauAHfdl.js";
+import P from "./space.js";
+import { C as H } from "../chunks/typography.DJC_UXgs.js";
+import { n, C as _ } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { b as at, c as ot } from "../chunks/asset.D7E0-cUV.js";
+import { c as W } from "../chunks/component.styles.CRO4Odto.js";
+import { U as a, T as p } from "../chunks/asset-link-format.BSRDqHg7.js";
+import { c as F } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as E } from "../chunks/i18n.BFqTRDCA.js";
+import { w as S } from "../chunks/watch.BCJD77bD.js";
+import { s as et, c as it } from "../chunks/number.CjNxU7Xs.js";
+import { b as Y } from "../chunks/transformation.CzBptarI.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 R } from "../chunks/when.Dr1es41R.js";
+import I from "./details.js";
+import ht from "./divider.js";
+import L from "./icon.js";
+import { C as K } from "../chunks/icon-button.rKe0N4VB.js";
+import Z from "./input.js";
+import { C as Q } from "../chunks/option.COnEtd3X.js";
+import G from "./select.js";
+import { c as nt } from "../chunks/image.mbpyiQpQ.js";
+import { e as V } from "../chunks/query.BBf1UFkC.js";
+import { c as j } from "../chunks/repeat.DbF2p5ae.js";
+import { o as C } 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{--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, gt = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? gt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && ut(e, i, o), o;
 };
-let d = class extends F {
+let d = class extends _ {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.lastAppliedSetting = {
-      [o.Pixel]: {
+    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 = {
+      [a.Pixel]: {
         height: 0,
         percentageHeight: 100,
         percentageWidth: 100,
-        unit: o.Pixel,
+        unit: a.Pixel,
         width: 0,
         x: 0,
         y: 0
       },
-      [o.AspectRatio]: {
+      [a.AspectRatio]: {
         height: 1,
         percentageHeight: 100,
         percentageWidth: 100,
-        unit: o.AspectRatio,
+        unit: a.AspectRatio,
         width: 1,
         x: 0,
         y: 0
@@ -249,10 +67,10 @@ let d = class extends F {
       return;
     }
     if (this.keepAspectRatio) {
-      if (this.unit === o.Pixel && this.width && this.height) {
+      if (this.unit === a.Pixel && this.width && this.height) {
         this.aspectRatio = this.width / this.height;
         return;
-      } else if (this.unit === o.AspectRatio && this.ratioWidth && this.ratioHeight) {
+      } else if (this.unit === a.AspectRatio && this.ratioWidth && this.ratioHeight) {
         this.aspectRatio = this.ratioWidth / this.ratioHeight;
         return;
       }
@@ -264,12 +82,12 @@ let d = class extends F {
     this.aspectRatio = 1;
   }
   async handleOpenChange() {
-    this.cropMode = "free", await this.updateComplete, this.open || (this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-crop-change", {
+    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[o.Pixel].height,
+        height: this.lastAppliedSetting[a.Pixel].height,
         keepAspectRatio: this.keepAspectRatio,
-        unit: o.Pixel,
-        width: this.lastAppliedSetting[o.Pixel].width
+        unit: a.Pixel,
+        width: this.lastAppliedSetting[a.Pixel].width
       }
     }));
   }
@@ -280,9 +98,9 @@ let d = class extends F {
     }
     this.invalidWidth = !1;
     let e = Number(t.target.value);
-    this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
-    let i = this.unit === o.Pixel ? this.height : this.ratioHeight, s = !1;
-    this.keepAspectRatio && (i = Math.round(e / this.aspectRatio), this.unit === o.Pixel && i > this.maxHeight && (i = this.maxHeight, s = !0)), this.invalidHeight = !1, this.emit("cx-asset-link-format-crop-change", {
+    this.unit === a.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
+    let i = this.unit === a.Pixel ? this.height : this.ratioHeight, s = !1;
+    this.keepAspectRatio && (i = Math.round(e / this.aspectRatio), this.unit === a.Pixel && i > this.maxHeight && (i = this.maxHeight, s = !0)), this.invalidHeight = !1, this.emit("cx-asset-link-format-crop-change", {
       detail: {
         breakAspectRatio: s,
         height: i,
@@ -299,9 +117,9 @@ let d = class extends F {
     }
     this.invalidHeight = !1;
     let e = Number(t.target.value);
-    this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
-    let i = this.unit === o.Pixel ? this.width : this.ratioWidth, s = !1;
-    this.keepAspectRatio && (i = Math.round(e * this.aspectRatio), this.unit === o.Pixel && i > this.maxWidth && (i = this.maxWidth, s = !0)), this.invalidWidth = !1, this.emit("cx-asset-link-format-crop-change", {
+    this.unit === a.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
+    let i = this.unit === a.Pixel ? this.width : this.ratioWidth, s = !1;
+    this.keepAspectRatio && (i = Math.round(e * this.aspectRatio), this.unit === a.Pixel && i > this.maxWidth && (i = this.maxWidth, s = !0)), this.invalidWidth = !1, this.emit("cx-asset-link-format-crop-change", {
       detail: {
         breakAspectRatio: s,
         height: e,
@@ -316,38 +134,38 @@ let d = class extends F {
     if (e === "free")
       this.selectedMode?.auto && this.emit("cx-asset-link-format-crop-change", {
         detail: {
-          height: this.lastAppliedSetting[o.Pixel].height,
+          height: this.lastAppliedSetting[a.Pixel].height,
           keepAspectRatio: !1,
           silent: !0,
-          unit: o.Pixel,
-          width: this.lastAppliedSetting[o.Pixel].width
+          unit: a.Pixel,
+          width: this.lastAppliedSetting[a.Pixel].width
         }
       });
     else if (!i) {
-      const [s, a] = e.split(":").map(Number);
-      if (this.unit === o.Pixel) {
-        const { height: h, width: r } = ct(
+      const [s, o] = e.split(":").map(Number);
+      if (this.unit === a.Pixel) {
+        const { height: h, width: r } = nt(
           this.maxWidth,
           this.maxHeight,
           s,
-          a
+          o
         );
         this.emit("cx-asset-link-format-crop-change", {
           detail: {
             height: h,
             keepAspectRatio: !0,
             silent: !0,
-            unit: o.Pixel,
+            unit: a.Pixel,
             width: r
           }
         });
       } else
         this.emit("cx-asset-link-format-crop-change", {
           detail: {
-            height: a,
+            height: o,
             keepAspectRatio: !0,
             silent: !0,
-            unit: o.AspectRatio,
+            unit: a.AspectRatio,
             width: s
           }
         });
@@ -373,19 +191,19 @@ let d = class extends F {
    * This allows the parent component to update the crop settings accordingly.
    */
   onUnitChange(t) {
-    t.target.value === o.AspectRatio ? this.emit("cx-asset-link-format-crop-change", {
+    t.target.value === a.AspectRatio ? this.emit("cx-asset-link-format-crop-change", {
       detail: {
-        height: this.lastAppliedSetting[o.AspectRatio].height,
+        height: this.lastAppliedSetting[a.AspectRatio].height,
         keepAspectRatio: this.keepAspectRatio,
-        unit: o.AspectRatio,
-        width: this.lastAppliedSetting[o.AspectRatio].width
+        unit: a.AspectRatio,
+        width: this.lastAppliedSetting[a.AspectRatio].width
       }
     }) : this.emit("cx-asset-link-format-crop-change", {
       detail: {
-        height: this.lastAppliedSetting[o.Pixel].height,
+        height: this.lastAppliedSetting[a.Pixel].height,
         keepAspectRatio: this.keepAspectRatio,
-        unit: o.Pixel,
-        width: this.lastAppliedSetting[o.Pixel].width
+        unit: a.Pixel,
+        width: this.lastAppliedSetting[a.Pixel].width
       }
     }), this.emit("cx-asset-link-format-crop-mode-change", {
       detail: {
@@ -428,262 +246,150 @@ let d = class extends F {
       }
     }), this.emit("cx-asset-link-format-crop-change", {
       detail: {
-        height: this.unit === o.Pixel ? this.height : this.ratioHeight,
+        height: this.unit === a.Pixel ? this.height : this.ratioHeight,
         keepAspectRatio: !this.keepAspectRatio,
         unit: this.unit,
-        width: this.unit === o.Pixel ? this.width : this.ratioWidth
+        width: this.unit === a.Pixel ? this.width : this.ratioWidth
       }
     });
   }
   render() {
     const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
-    return b`<cx-details
-      class="details"
-      ?open=${this.open}
-      @cx-show=${this.onShowDetails}
-      @cx-hide=${this.onHideDetails}
-    >
-      <cx-space slot="summary" align-items="center">
-        <div part="icon">
-          <cx-icon name="crop"></cx-icon>
-        </div>
-        <cx-typography variant="body2">
-          ${this.localize.term("crop")}
-        </cx-typography>
-      </cx-space>
-      <cx-space direction="vertical" spacing="small">
-        <cx-select
-          data-testid="cx-asset-link-format-crop-mode"
-          value=${this.cropMode}
-          hoist
-          style=${M({
+    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=${C({
       width: "100%"
-    })}
-          @cx-change=${this.onCropModeChange}
-          ?disabled=${this.loading}
-        >
-          ${Q(
+    })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${j(
       t,
       (i) => i.value,
-      ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
+      ({ label: i, value: s }) => m`<cx-option value=${s}>${i}</cx-option>`
     )}
-          ${G(
+          ${R(
       e.length > 0,
-      () => b`<cx-divider></cx-divider>
-                <small>${this.localize.term("autoCropping")}</small>`
+      () => m`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
     )}
-          ${Q(
+          ${j(
       e,
       (i) => i.value,
-      ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
-    )}
-        </cx-select>
-        <cx-space spacing="small">
-          <div class="crop__input-group">
-            <cx-input
-              data-testid="cx-asset-link-format-crop-width"
-              placeholder=${this.localize.term("width")}
-              type="number"
-              step="1"
-              value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()}
-              @cx-change=${this.handleInputChange}
-              @cx-input=${this.handleWidthChange}
-              required
-              ?disabled=${this.loading}
-            >
-              <cx-typography slot="prefix" variant="body3" part="input-label">
+      ({ 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=${M({
+              </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=${C({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
-    })}
-              ?disabled=${this.loading}
-            ></cx-icon-button>
-            <cx-input
-              data-testid="cx-asset-link-format-crop-height"
-              placeholder=${this.localize.term("height")}
-              type="number"
-              step="1"
-              value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()}
-              ?disabled=${this.loading}
-              @cx-change=${this.handleInputChange}
-              @cx-input=${this.handleHeightChange}
-              required
-            >
-              <cx-typography slot="prefix" variant="body3" part="input-label">
+    })} ?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=${o.Pixel}>
-              ${this.localize.term("pixels")}
-            </cx-option>
-            <cx-option value=${o.AspectRatio}>
-              ${this.localize.term("aspectRatio")}
-            </cx-option>
-          </cx-select>
-        </cx-space>
-        ${G(
+              </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>${R(
       this.focusModes.length > 0,
-      () => b`
-            <cx-select
-              data-testid="cx-asset-link-format-crop-focus-mode"
-              value=${this.focusMode}
-              hoist
-              style=${M({
+      () => m`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${C({
         width: "100%"
-      })}
-              @cx-change=${this.onFocusModeChange}
-              ?disabled=${this.loading || this.selectedMode?.disabledSize}
-            >
-              ${Q(
+      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${j(
         this.focusModes,
         (i) => i.value,
-        ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
-      )}
-            </cx-select>
-          `
-    )}
-        <cx-button
-          data-testid="cx-asset-link-format-crop-apply"
-          variant="primary"
-          ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth}
-          ?loading=${this.loading}
-          style=${M({
+        ({ 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=${C({
       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>`;
   }
 };
-d.styles = [E, gt];
+d.styles = [W, dt];
 d.dependencies = {
-  "cx-button": q,
-  "cx-details": L,
-  "cx-divider": nt,
-  "cx-icon": j,
+  "cx-button": D,
+  "cx-details": I,
+  "cx-divider": ht,
+  "cx-icon": L,
   "cx-icon-button": K,
-  "cx-input": tt,
-  "cx-option": X,
-  "cx-select": Y,
-  "cx-space": H,
-  "cx-typography": W
+  "cx-input": Z,
+  "cx-option": Q,
+  "cx-select": G,
+  "cx-space": P,
+  "cx-typography": H
 };
-g([
-  T(".details")
+u([
+  V(".details")
 ], d.prototype, "base", 2);
-g([
-  l({ reflect: !0, type: Boolean })
+u([
+  n({ reflect: !0, type: Boolean })
 ], d.prototype, "open", 2);
-g([
-  l({ reflect: !0, type: Number })
+u([
+  n({ reflect: !0, type: Number })
 ], d.prototype, "width", 2);
-g([
-  l({ reflect: !0, type: Number })
+u([
+  n({ reflect: !0, type: Number })
 ], d.prototype, "height", 2);
-g([
-  l({ attribute: "max-width", reflect: !0, type: Number })
+u([
+  n({ attribute: "max-width", reflect: !0, type: Number })
 ], d.prototype, "maxWidth", 2);
-g([
-  l({ attribute: "max-height", reflect: !0, type: Number })
+u([
+  n({ attribute: "max-height", reflect: !0, type: Number })
 ], d.prototype, "maxHeight", 2);
-g([
-  l({ attribute: "ratio-width", reflect: !0, type: Number })
+u([
+  n({ attribute: "ratio-width", reflect: !0, type: Number })
 ], d.prototype, "ratioWidth", 2);
-g([
-  l({ attribute: "ratio-height", reflect: !0, type: Number })
+u([
+  n({ attribute: "ratio-height", reflect: !0, type: Number })
 ], d.prototype, "ratioHeight", 2);
-g([
-  l({ attribute: "percentage-width", reflect: !0, type: Number })
+u([
+  n({ attribute: "percentage-width", reflect: !0, type: Number })
 ], d.prototype, "percentageWidth", 2);
-g([
-  l({ attribute: "percentage-height", reflect: !0, type: Number })
+u([
+  n({ attribute: "percentage-height", reflect: !0, type: Number })
 ], d.prototype, "percentageHeight", 2);
-g([
-  l({ reflect: !0, type: String })
+u([
+  n({ reflect: !0, type: String })
 ], d.prototype, "unit", 2);
-g([
-  l({ attribute: "disabled-apply", reflect: !0, type: Boolean })
+u([
+  n({ attribute: "disabled-apply", reflect: !0, type: Boolean })
 ], d.prototype, "disabledApply", 2);
-g([
-  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
+u([
+  n({ attribute: "last-applied-setting", reflect: !1, type: Object })
 ], d.prototype, "lastAppliedSetting", 2);
-g([
-  l({ reflect: !0, type: Boolean })
+u([
+  n({ reflect: !0, type: Boolean })
 ], d.prototype, "loading", 2);
-g([
-  l({ attribute: "crop-modes", reflect: !1, type: Array })
+u([
+  n({ attribute: "crop-modes", reflect: !1, type: Array })
 ], d.prototype, "cropModes", 2);
-g([
-  l({ attribute: "focus-modes", reflect: !1, type: Object })
+u([
+  n({ attribute: "focus-modes", reflect: !1, type: Object })
 ], d.prototype, "focusModes", 2);
-g([
-  l({ attribute: "focus-mode", reflect: !0, type: String })
+u([
+  n({ attribute: "focus-mode", reflect: !0, type: String })
 ], d.prototype, "focusMode", 2);
-g([
-  l({ attribute: "crop-mode", reflect: !0, type: String })
+u([
+  n({ attribute: "crop-mode", reflect: !0, type: String })
 ], d.prototype, "cropMode", 2);
-g([
-  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+u([
+  n({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
 ], d.prototype, "keepAspectRatio", 2);
-g([
-  z()
+u([
+  f()
 ], d.prototype, "invalidWidth", 2);
-g([
-  z()
+u([
+  f()
 ], d.prototype, "invalidHeight", 2);
-g([
-  z()
+u([
+  f()
 ], d.prototype, "aspectRatio", 2);
-g([
-  k("cropMode", { waitUntilFirstUpdate: !0 }),
-  k("maxWidth", { waitUntilFirstUpdate: !0 }),
-  k("maxHeight", { waitUntilFirstUpdate: !0 }),
-  k("keepAspectRatio")
+u([
+  S("cropMode", { waitUntilFirstUpdate: !0 }),
+  S("maxWidth", { waitUntilFirstUpdate: !0 }),
+  S("maxHeight", { waitUntilFirstUpdate: !0 }),
+  S("keepAspectRatio")
 ], d.prototype, "handleCropModeChange", 1);
-g([
-  k("open")
+u([
+  S("open")
 ], d.prototype, "handleOpenChange", 1);
-d = g([
-  N("cx-asset-link-format-crop")
+d = u([
+  F("cx-asset-link-format-crop")
 ], d);
-const ft = D`
-  .extension {
-    padding: var(--cx-spacing-small) var(--cx-spacing-medium);
-    border: solid 1px var(--cx-color-neutral-200);
-    background-color: var(--cx-color-neutral-0);
-
-    cx-select {
-      flex: 1;
-      width: 100%;
-    }
-  }
-`;
-var yt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, et = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? vt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && yt(e, i, a), a;
+const mt = 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, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && xt(e, i, o), o;
 };
-let U = class extends F {
+let O = class extends _ {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.value = "", this.items = [];
+    super(...arguments), this.localize = new E(this), this.value = "", this.items = [];
   }
   handleExtensionChange(t) {
     const e = t.target.value;
@@ -692,59 +398,38 @@ let U = class extends F {
     });
   }
   render() {
-    return b`
-      <cx-space direction="vertical" spacing="small" class="extension">
-        <cx-typography variant="body2">
-          ${this.localize.term("extension")}
-        </cx-typography>
-        <cx-select
-          data-label=${this.localize.term("extension")}
-          data-testid="cx-asset-link-format-extension-select"
-          value=${this.value}
-          hoist
-          @cx-change=${this.handleExtensionChange}
-        >
-          ${Q(
+    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) => b`
-              <cx-option value=${t.value}>${t.displayName}</cx-option>
-            `
-    )}
-        </cx-select>
-      </cx-space>
-    `;
+      (t) => m`<cx-option value=${t.value}>${t.displayName}</cx-option>`
+    )}</cx-select></cx-space>`;
   }
 };
-U.styles = [E, ft];
-U.dependencies = {
-  "cx-option": X,
-  "cx-select": Y,
-  "cx-space": H,
-  "cx-typography": W
+O.styles = [W, mt];
+O.dependencies = {
+  "cx-option": Q,
+  "cx-select": G,
+  "cx-space": P,
+  "cx-typography": H
 };
-et([
-  l({ reflect: !0, type: String })
-], U.prototype, "value", 2);
-et([
-  l({ reflect: !1, type: Array })
-], U.prototype, "items", 2);
-U = et([
-  N("cx-asset-link-format-extension")
-], U);
-const wt = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-`;
-var zt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, _ = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? St(e, i) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && zt(e, i, a), a;
+J([
+  n({ reflect: !0, type: String })
+], O.prototype, "value", 2);
+J([
+  n({ 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, A = (t, e, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? St(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && zt(e, i, o), o;
 };
-let C = class extends F {
+let w = class extends _ {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
+    super(...arguments), this.localize = new E(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
   }
   handleValueChange() {
     this.scopedValue = this.value;
@@ -788,105 +473,61 @@ let C = class extends F {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return b`
-      <cx-details
-        class="details"
-        ?open=${this.open}
-        @cx-show=${this.onShowDetails}
-        @cx-hide=${this.onHideDetails}
-      >
-        <cx-space slot="summary" align-items="center">
-          <div part="icon">
-            <cx-icon name="photo_size_select_large"></cx-icon>
-          </div>
-          <cx-typography variant="body2">
-            ${this.localize.term("format")}
-          </cx-typography>
-        </cx-space>
-        <cx-space direction="vertical" spacing="small" class="format">
-          <cx-select
-            data-label=${this.localize.term("imageFormat")}
-            data-testid="cx-asset-link-format-proxy-select"
-            value=${this.scopedValue}
-            hoist
-            @cx-change=${this.handleProxyChange}
-            ?disabled=${this.loading}
-          >
-            ${Q(
+    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) => b`
-                <cx-option value=${t.id}>${t.proxyLabel}</cx-option>
-              `
-    )}
-          </cx-select>
-          <cx-button
-            data-testid="cx-asset-link-format-proxy-apply"
-            variant="primary"
-            style=${M({
+      (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=${C({
       "margin-left": "auto"
-    })}
-            ?disabled=${this.scopedValue === this.value}
-            ?loading=${this.loading}
-            @click=${this.handleApply}
-          >
-            ${this.localize.term("apply")}
-          </cx-button>
-        </cx-space>
-      </cx-details>
-    `;
+    })} ?disabled=${this.scopedValue === this.value} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-C.styles = [E, wt];
-C.dependencies = {
-  "cx-button": q,
-  "cx-details": L,
-  "cx-icon": j,
-  "cx-option": X,
-  "cx-select": Y,
-  "cx-space": H,
-  "cx-typography": W
+w.styles = [W, yt];
+w.dependencies = {
+  "cx-button": D,
+  "cx-details": I,
+  "cx-icon": L,
+  "cx-option": Q,
+  "cx-select": G,
+  "cx-space": P,
+  "cx-typography": H
 };
-_([
-  T(".details")
-], C.prototype, "base", 2);
-_([
-  l({ reflect: !0, type: Boolean })
-], C.prototype, "open", 2);
-_([
-  l({ reflect: !0, type: String })
-], C.prototype, "value", 2);
-_([
-  l({ reflect: !1, type: Array })
-], C.prototype, "items", 2);
-_([
-  l({ reflect: !0, type: Boolean })
-], C.prototype, "loading", 2);
-_([
-  z()
-], C.prototype, "scopedValue", 2);
-_([
-  k("value")
-], C.prototype, "handleValueChange", 1);
-_([
-  k("open", { waitUntilFirstUpdate: !0 })
-], C.prototype, "handleOpenChange", 1);
-C = _([
-  N("cx-asset-link-format-proxy")
-], C);
-const bt = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-`;
-var kt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, I = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? $t(e, i) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && kt(e, i, a), a;
+A([
+  V(".details")
+], w.prototype, "base", 2);
+A([
+  n({ reflect: !0, type: Boolean })
+], w.prototype, "open", 2);
+A([
+  n({ reflect: !0, type: String })
+], w.prototype, "value", 2);
+A([
+  n({ reflect: !1, type: Array })
+], w.prototype, "items", 2);
+A([
+  n({ reflect: !0, type: Boolean })
+], w.prototype, "loading", 2);
+A([
+  f()
+], w.prototype, "scopedValue", 2);
+A([
+  S("value")
+], w.prototype, "handleValueChange", 1);
+A([
+  S("open", { waitUntilFirstUpdate: !0 })
+], w.prototype, "handleOpenChange", 1);
+w = A([
+  F("cx-asset-link-format-proxy")
+], w);
+const wt = N`cx-details::part(base){border-bottom-width:0}`;
+var bt = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, U = (t, e, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? kt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && bt(e, i, o), o;
 };
-let A = class extends F {
+let b = class extends _ {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+    super(...arguments), this.localize = new E(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
   }
   /**
    * A computed property that checks if the current quality value is invalid.
@@ -930,121 +571,53 @@ let A = class extends F {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return b`
-      <cx-details
-        class="details"
-        ?open=${this.open}
-        @cx-show=${this.onShowDetails}
-        @cx-hide=${this.onHideDetails}
-      >
-        <cx-space slot="summary" align-items="center">
-          <div class="details__summary__icon">
-            <div part="icon">
-              <cx-icon name="blur_on"></cx-icon>
-            </div>
-          </div>
-          <cx-typography variant="body2">
-            ${this.localize.term("quality")}
-          </cx-typography>
-        </cx-space>
-        <cx-space spacing="small">
-          <cx-tooltip
-            data-testid="cx-asset-link-format-quality-tooltip"
-            content=${this.localize.term("qualityHelpText")}
-            hoist
-          >
-            <cx-input
-              data-testid="cx-asset-link-format-quality"
-              class="details__checkbox"
-              type="number"
-              value=${this.scopedValue}
-              min="0"
-              max="100"
-              step="1"
-              style=${M({
+    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=${C({
       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><cx-button data-testid="cx-asset-link-format-quality-apply" variant="primary" ?disabled=${this.invalidValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-A.styles = [E, bt];
-A.dependencies = {
-  "cx-button": q,
-  "cx-details": L,
-  "cx-icon": j,
-  "cx-input": tt,
-  "cx-space": H,
-  "cx-tooltip": at,
-  "cx-typography": W
+b.styles = [W, wt];
+b.dependencies = {
+  "cx-button": D,
+  "cx-details": I,
+  "cx-icon": L,
+  "cx-input": Z,
+  "cx-space": P,
+  "cx-tooltip": st,
+  "cx-typography": H
 };
-I([
-  T(".details")
-], A.prototype, "base", 2);
-I([
-  l({ reflect: !0, type: Boolean })
-], A.prototype, "open", 2);
-I([
-  l({ reflect: !0, type: Number })
-], A.prototype, "value", 2);
-I([
-  l({ reflect: !0, type: Boolean })
-], A.prototype, "loading", 2);
-I([
-  z()
-], A.prototype, "scopedValue", 2);
-I([
-  k("value")
-], A.prototype, "handleValueChange", 1);
-A = I([
-  N("cx-asset-link-format-quality")
-], A);
-const Ct = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-
-  cx-space {
-    width: 100%;
-  }
-
-  cx-space cx-input {
-    flex: 1;
-  }
-
-  .resize__unit-select {
-    width: 120px;
-  }
-
-  .resize__input-group {
-    display: flex;
-    flex: 1;
-  }
-`;
-var At = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, S = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Rt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && At(e, i, a), a;
+U([
+  V(".details")
+], b.prototype, "base", 2);
+U([
+  n({ reflect: !0, type: Boolean })
+], b.prototype, "open", 2);
+U([
+  n({ reflect: !0, type: Number })
+], b.prototype, "value", 2);
+U([
+  n({ reflect: !0, type: Boolean })
+], b.prototype, "loading", 2);
+U([
+  f()
+], b.prototype, "scopedValue", 2);
+U([
+  S("value")
+], b.prototype, "handleValueChange", 1);
+b = U([
+  F("cx-asset-link-format-quality")
+], b);
+const vt = 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, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && $t(e, i, o), o;
 };
-let f = class extends F {
+let g = class extends _ {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = o.Pixel, this.lastAppliedSetting = {
-      [o.Pixel]: { height: 0, width: 0 },
-      [o.AspectRatio]: { height: 1, width: 1 }
+    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 = {
+      [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;
   }
   /**
@@ -1057,10 +630,10 @@ let f = class extends F {
   }
   async handleCropModeChange() {
     if (this.keepAspectRatio) {
-      if (this.unit === o.Pixel && this.width && this.height) {
+      if (this.unit === a.Pixel && this.width && this.height) {
         this.aspectRatio = this.width / this.height;
         return;
-      } else if (this.unit === o.AspectRatio && this.ratioWidth && this.ratioHeight) {
+      } else if (this.unit === a.AspectRatio && this.ratioWidth && this.ratioHeight) {
         this.aspectRatio = this.ratioWidth / this.ratioHeight;
         return;
       }
@@ -1072,12 +645,12 @@ let f = class extends F {
     this.aspectRatio = 1;
   }
   async handleOpenChange() {
-    await this.updateComplete, this.open || (this.width = this.lastAppliedSetting[o.Pixel].width, this.height = this.lastAppliedSetting[o.Pixel].height, this.unit = o.Pixel, this.emit("cx-asset-link-format-resize-change", {
+    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[o.Pixel].height,
+        height: this.lastAppliedSetting[a.Pixel].height,
         keepAspectRatio: this.keepAspectRatio,
-        unit: o.Pixel,
-        width: this.lastAppliedSetting[o.Pixel].width
+        unit: a.Pixel,
+        width: this.lastAppliedSetting[a.Pixel].width
       }
     }));
   }
@@ -1088,8 +661,8 @@ let f = class extends F {
     }
     this.invalidWidth = !1;
     let e = Number(t.target.value);
-    this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
-    let i = this.unit === o.Pixel ? this.height : this.ratioHeight;
+    this.unit === a.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
+    let i = this.unit === a.Pixel ? this.height : this.ratioHeight;
     this.keepAspectRatio && (i = Math.min(
       Math.round(e / this.aspectRatio),
       this.maxHeight
@@ -1109,8 +682,8 @@ let f = class extends F {
     }
     this.invalidHeight = !1;
     let e = Number(t.target.value);
-    this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
-    let i = this.unit === o.Pixel ? this.width : this.ratioWidth;
+    this.unit === a.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
+    let i = this.unit === a.Pixel ? this.width : this.ratioWidth;
     this.keepAspectRatio && (i = Math.min(
       Math.round(e * this.aspectRatio),
       this.maxWidth
@@ -1124,19 +697,19 @@ let f = class extends F {
     });
   }
   onUnitChange(t) {
-    t.target.value === o.AspectRatio ? this.emit("cx-asset-link-format-resize-change", {
+    t.target.value === a.AspectRatio ? this.emit("cx-asset-link-format-resize-change", {
       detail: {
-        height: this.lastAppliedSetting[o.AspectRatio].height,
+        height: this.lastAppliedSetting[a.AspectRatio].height,
         keepAspectRatio: this.keepAspectRatio,
-        unit: o.AspectRatio,
-        width: this.lastAppliedSetting[o.AspectRatio].width
+        unit: a.AspectRatio,
+        width: this.lastAppliedSetting[a.AspectRatio].width
       }
     }) : this.emit("cx-asset-link-format-resize-change", {
       detail: {
-        height: this.lastAppliedSetting[o.Pixel].height,
+        height: this.lastAppliedSetting[a.Pixel].height,
         keepAspectRatio: this.keepAspectRatio,
-        unit: o.Pixel,
-        width: this.lastAppliedSetting[o.Pixel].width
+        unit: a.Pixel,
+        width: this.lastAppliedSetting[a.Pixel].width
       }
     });
   }
@@ -1168,182 +741,103 @@ let f = class extends F {
   handleAspectRatioClick() {
     this.emit("cx-asset-link-format-resize-change", {
       detail: {
-        height: this.unit === o.Pixel ? this.height : this.ratioHeight,
+        height: this.unit === a.Pixel ? this.height : this.ratioHeight,
         keepAspectRatio: !this.keepAspectRatio,
         unit: this.unit,
-        width: this.unit === o.Pixel ? this.width : this.ratioWidth
+        width: this.unit === a.Pixel ? this.width : this.ratioWidth
       }
     });
   }
   render() {
-    return b`<cx-details
-      class="details"
-      ?open=${this.open}
-      @cx-show=${this.onShowDetails}
-      @cx-hide=${this.onHideDetails}
-    >
-      <cx-space slot="summary" align-items="center">
-        <div part="icon">
-          <cx-icon name="aspect_ratio"></cx-icon>
-        </div>
-        <cx-typography variant="body2">
-          ${this.localize.term("resize")}
-        </cx-typography>
-      </cx-space>
-      <cx-space direction="vertical" spacing="small">
-        <cx-space spacing="small">
-          <div class="resize__input-group">
-            <cx-input
-              data-testid="cx-asset-link-format-resize-width"
-              placeholder=${this.localize.term("width")}
-              type="number"
-              step="1"
-              value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()}
-              @cx-input=${this.handleWidthChange}
-              required
-              ?disabled=${this.loading}
-            >
-              <cx-typography slot="prefix" variant="body3" part="input-label">
+    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=${M({
+              </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=${C({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
-    })}
-              ?disabled=${this.loading}
-            ></cx-icon-button>
-            <cx-input
-              data-testid="cx-asset-link-format-resize-height"
-              placeholder=${this.localize.term("height")}
-              type="number"
-              step="1"
-              value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()}
-              @cx-input=${this.handleHeightChange}
-              required
-              ?disabled=${this.loading}
-            >
-              <cx-typography slot="prefix" variant="body3" part="input-label">
+    })} ?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=${o.Pixel}>
-              ${this.localize.term("pixels")}
-            </cx-option>
-            <cx-option value=${o.AspectRatio}>
-              ${this.localize.term("aspectRatio")}
-            </cx-option>
-          </cx-select>
-        </cx-space>
-        <cx-button
-          data-testid="cx-asset-link-format-resize-apply"
-          variant="primary"
-          ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth}
-          ?loading=${this.loading}
-          style=${M({
+              </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=${C({
       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>`;
   }
 };
-f.styles = [E, Ct];
-f.dependencies = {
-  "cx-button": q,
-  "cx-details": L,
-  "cx-icon": j,
+g.styles = [W, vt];
+g.dependencies = {
+  "cx-button": D,
+  "cx-details": I,
+  "cx-icon": L,
   "cx-icon-button": K,
-  "cx-input": tt,
-  "cx-option": X,
-  "cx-select": Y,
-  "cx-space": H,
-  "cx-typography": W
+  "cx-input": Z,
+  "cx-option": Q,
+  "cx-select": G,
+  "cx-space": P,
+  "cx-typography": H
 };
-S([
-  T(".details")
-], f.prototype, "base", 2);
-S([
-  l({ reflect: !0, type: Boolean })
-], f.prototype, "open", 2);
-S([
-  l({ reflect: !0, type: Number })
-], f.prototype, "width", 2);
-S([
-  l({ reflect: !0, type: Number })
-], f.prototype, "height", 2);
-S([
-  l({ attribute: "max-width", reflect: !0, type: Number })
-], f.prototype, "maxWidth", 2);
-S([
-  l({ attribute: "max-height", reflect: !0, type: Number })
-], f.prototype, "maxHeight", 2);
-S([
-  l({ attribute: "ratio-width", reflect: !0, type: Number })
-], f.prototype, "ratioWidth", 2);
-S([
-  l({ attribute: "ratio-height", reflect: !0, type: Number })
-], f.prototype, "ratioHeight", 2);
-S([
-  l({ reflect: !0, type: String })
-], f.prototype, "unit", 2);
-S([
-  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], f.prototype, "lastAppliedSetting", 2);
-S([
-  l({ reflect: !0, type: Boolean })
-], f.prototype, "loading", 2);
-S([
-  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], f.prototype, "keepAspectRatio", 2);
-S([
-  z()
-], f.prototype, "invalidWidth", 2);
-S([
-  z()
-], f.prototype, "invalidHeight", 2);
-S([
-  z()
-], f.prototype, "aspectRatio", 2);
-S([
-  k("cropMode", { waitUntilFirstUpdate: !0 }),
-  k("maxWidth", { waitUntilFirstUpdate: !0 }),
-  k("maxHeight", { waitUntilFirstUpdate: !0 }),
-  k("keepAspectRatio")
-], f.prototype, "handleCropModeChange", 1);
-S([
-  k("open")
-], f.prototype, "handleOpenChange", 1);
-f = S([
-  N("cx-asset-link-format-resize")
-], f);
-const Mt = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-`;
-var _t = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, V = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Pt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && _t(e, i, a), a;
+y([
+  V(".details")
+], g.prototype, "base", 2);
+y([
+  n({ reflect: !0, type: Boolean })
+], g.prototype, "open", 2);
+y([
+  n({ reflect: !0, type: Number })
+], g.prototype, "width", 2);
+y([
+  n({ reflect: !0, type: Number })
+], g.prototype, "height", 2);
+y([
+  n({ attribute: "max-width", reflect: !0, type: Number })
+], g.prototype, "maxWidth", 2);
+y([
+  n({ attribute: "max-height", reflect: !0, type: Number })
+], g.prototype, "maxHeight", 2);
+y([
+  n({ attribute: "ratio-width", reflect: !0, type: Number })
+], g.prototype, "ratioWidth", 2);
+y([
+  n({ attribute: "ratio-height", reflect: !0, type: Number })
+], g.prototype, "ratioHeight", 2);
+y([
+  n({ reflect: !0, type: String })
+], g.prototype, "unit", 2);
+y([
+  n({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], g.prototype, "lastAppliedSetting", 2);
+y([
+  n({ reflect: !0, type: Boolean })
+], g.prototype, "loading", 2);
+y([
+  n({ 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, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && Rt(e, i, o), o;
 };
-let R = class extends F {
+let k = class extends _ {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.open = !1, this.value = 0, this.loading = !1, this.invalidValue = !1;
+    super(...arguments), this.localize = new E(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1;
   }
   handleOpenChange() {
     this.open || this.emit("cx-asset-link-format-rotation-change", {
@@ -1351,16 +845,14 @@ let R = class extends F {
     });
   }
   handleRotationChange(t) {
-    const e = t.target.value;
-    e ? this.invalidValue = !1 : this.invalidValue = !0;
-    const i = it(Number(e));
+    const e = t.target.value, i = et(Number(e));
     (Number(e) > 360 || Number(e) < -360) && (t.target.value = i.toString()), this.emit("cx-asset-link-format-rotation-change", {
       detail: i
     });
   }
   handleButtonClick(t) {
     this.emit("cx-asset-link-format-rotation-change", {
-      detail: it(t)
+      detail: et(t)
     });
   }
   handleClockwiseClick() {
@@ -1375,115 +867,57 @@ let R = class extends F {
    * It prevents further actions if the component is currently loading.
    */
   handleApply() {
-    this.invalidValue || this.value === 360 || this.value === -360 || this.loading || this.emit("cx-asset-link-format-rotation-apply", {
+    this.value === 360 || this.value === -360 || this.loading || this.emit("cx-asset-link-format-rotation-apply", {
       detail: this.value
     });
   }
   render() {
-    return b`
-      <cx-details class="details" ?open=${this.open}>
-        <cx-space slot="summary" align-items="center">
-          <div part="icon">
-            <cx-icon name="rotate_90_degrees_cw"></cx-icon>
-          </div>
-          <cx-typography variant="body2">Rotate</cx-typography>
-        </cx-space>
-        <cx-space spacing="small">
-          <cx-button-group label=${this.localize.term("history")}>
-            <cx-icon-button
-              data-testid="cx-asset-link-format-rotation-ccw"
-              name="rotate_90_degrees_ccw"
-              label=${this.localize.term("undo")}
-              outline
-              size="small"
-              ?disabled=${this.loading || this.value === -360}
-              @click=${this.handleCounterClockwiseClick}
-            >
-            </cx-icon-button>
-            <cx-icon-button
-              data-testid="cx-asset-link-format-rotation-cw"
-              name="rotate_90_degrees_cw"
-              label=${this.localize.term("redo")}
-              outline
-              size="small"
-              ?disabled=${this.loading || this.value === 360}
-              @click=${this.handleClockwiseClick}
-            >
-            </cx-icon-button>
-          </cx-button-group>
-          <cx-input
-            data-testid="cx-asset-link-format-rotation"
-            value=${this.invalidValue ? "" : this.value.toString()}
-            placeholder="0"
-            type="number"
-            min="-360"
-            max="360"
-            ?disabled=${this.loading}
-            style=${M({
+    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=${C({
       flex: "none",
       width: "80px"
-    })}
-            @cx-input=${this.handleRotationChange}
-            step="1"
-          ></cx-input>
-          <cx-button
-            data-testid="cx-asset-link-format-rotation-apply"
-            variant="primary"
-            ?disabled=${this.value === 360 || this.value === -360 || this.invalidValue}
-            ?loading=${this.loading}
-            @click=${this.handleApply}
-          >
-            ${this.localize.term("apply")}
-          </cx-button>
-        </cx-space>
-      </cx-details>
-    `;
+    })} @cx-input=${this.handleRotationChange}></cx-input><cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-R.styles = [E, Mt];
-R.dependencies = {
-  "cx-button": q,
-  "cx-button-group": pt,
-  "cx-details": L,
-  "cx-icon": j,
+k.styles = [W, At];
+k.dependencies = {
+  "cx-button": D,
+  "cx-button-group": lt,
+  "cx-details": I,
+  "cx-icon": L,
   "cx-icon-button": K,
-  "cx-space": H,
-  "cx-typography": W
+  "cx-space": P,
+  "cx-typography": H
 };
-V([
-  T(".details")
-], R.prototype, "base", 2);
-V([
-  l({ reflect: !0, type: Boolean })
-], R.prototype, "open", 2);
-V([
-  l({ reflect: !0, type: Number })
-], R.prototype, "value", 2);
-V([
-  l({ reflect: !0, type: Boolean })
-], R.prototype, "loading", 2);
-V([
-  z()
-], R.prototype, "invalidValue", 2);
-V([
-  k("open", { waitUntilFirstUpdate: !0 })
-], R.prototype, "handleOpenChange", 1);
-R = V([
-  N("cx-asset-link-format-rotation")
-], R);
-const Ht = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-`;
-var Wt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, Z = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ft(e, i) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && Wt(e, i, a), a;
+q([
+  V(".details")
+], k.prototype, "base", 2);
+q([
+  n({ reflect: !0, type: Boolean })
+], k.prototype, "open", 2);
+q([
+  n({ reflect: !0, type: Number })
+], k.prototype, "value", 2);
+q([
+  n({ attribute: "default-value", reflect: !0, type: Number })
+], k.prototype, "defaultValue", 2);
+q([
+  n({ reflect: !0, type: Boolean })
+], k.prototype, "loading", 2);
+q([
+  S("open", { waitUntilFirstUpdate: !0 })
+], k.prototype, "handleOpenChange", 1);
+k = q([
+  F("cx-asset-link-format-rotation")
+], k);
+const Pt = N`cx-details::part(base){border-bottom-width:0}`;
+var Ht = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, X = (t, e, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? _t(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && Ht(e, i, o), o;
 };
-let P = class extends F {
+let M = class extends _ {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.open = !1, this.value = !1;
+    super(...arguments), this.localize = new E(this), this.open = !1, this.value = !1;
   }
   handleApply(t) {
     this.emit("cx-asset-link-format-metadata-change", {
@@ -1507,73 +941,39 @@ let P = class extends F {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return b`
-      <cx-details
-        class="details"
-        ?open=${this.open}
-        @cx-show=${this.onShowDetails}
-        @cx-hide=${this.onHideDetails}
-      >
-        <cx-space slot="summary" align-items="center">
-          <div class="details__summary__icon">
-            <div part="icon">
-              <cx-icon name="short_text"></cx-icon>
-            </div>
-          </div>
-          <cx-typography variant="body2">
-            ${this.localize.term("metadata")}
-          </cx-typography>
-        </cx-space>
-        <cx-space spacing="small">
-          <cx-tooltip
-            data-testid="cx-asset-link-format-metadata-tooltip"
-            content=${this.localize.term("metadataHelpText")}
-            hoist
-          >
-            <cx-checkbox
-              data-testid="cx-asset-link-format-metadata"
-              class="details__checkbox"
-              ?checked=${this.value}
-              @cx-change=${this.handleApply}
-            >
-              ${this.localize.term("preserveMetadata")}
-            </cx-checkbox>
-          </cx-tooltip>
-        </cx-space>
-      </cx-details>
-    `;
+    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>`;
   }
 };
-P.styles = [E, Ht];
-P.dependencies = {
-  "cx-button": q,
-  "cx-checkbox": dt,
-  "cx-details": L,
-  "cx-icon": j,
-  "cx-space": H,
-  "cx-tooltip": at,
-  "cx-typography": W
+M.styles = [W, Pt];
+M.dependencies = {
+  "cx-button": D,
+  "cx-checkbox": ct,
+  "cx-details": I,
+  "cx-icon": L,
+  "cx-space": P,
+  "cx-tooltip": st,
+  "cx-typography": H
 };
-Z([
-  T(".details")
-], P.prototype, "base", 2);
-Z([
-  l({ reflect: !0, type: Boolean })
-], P.prototype, "open", 2);
-Z([
-  l({ reflect: !0, type: Boolean })
-], P.prototype, "value", 2);
-P = Z([
-  N("cx-asset-link-format-metadata")
-], P);
-var Et = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Nt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
-  return s && a && Et(e, i, a), a;
+X([
+  V(".details")
+], M.prototype, "base", 2);
+X([
+  n({ reflect: !0, type: Boolean })
+], M.prototype, "open", 2);
+X([
+  n({ 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, h = t.length - 1, r; h >= 0; h--)
+    (r = t[h]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && Wt(e, i, o), o;
 };
-let p = class extends F {
+let l = class extends _ {
   constructor() {
-    super(), this.localize = new O(this), this.baseUrl = void 0, this.asset = void 0, this.cropModes = [
+    super(), this.localize = new E(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
       {
         label: "Free",
         value: "free"
@@ -1632,7 +1032,7 @@ let p = class extends F {
         label: "Smart Swatch",
         value: "SmartSwatch"
       }
-    ], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", this.useCustomExtension = !1, this.lastImageSize = {
+    ], 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 = {
       height: 0,
       width: 0
     }, this.hideHeader = !1, this.queryElement = null, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
@@ -1640,7 +1040,7 @@ let p = class extends F {
       keepAspectRatio: !0,
       ratioHeight: 1,
       ratioWidth: 1,
-      unit: o.Pixel,
+      unit: a.Pixel,
       width: 0
     }, this.cropSize = {
       cropMode: "free",
@@ -1651,14 +1051,14 @@ let p = class extends F {
       percentageWidth: 0,
       ratioHeight: 1,
       ratioWidth: 1,
-      unit: o.Pixel,
+      unit: a.Pixel,
       width: 0,
       x: 0,
       y: 0
     }, this.rotation = 0, this.defaultSize = {
       height: 0,
       width: 0
-    }, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.apiGetTransformAssetLink = rt, this.apiGetCropFocusMode = ht, 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.apiGetTransformAssetLink = at, this.apiGetCropFocusMode = ot, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
   }
   /**
    * Checks if the crop apply button should be disabled.
@@ -1700,25 +1100,25 @@ let p = class extends F {
    * It returns an object with the last crop size in both pixel and aspect ratio units.
    */
   get lastCropSize() {
-    const t = st(
+    const t = it(
       this.lastImageSize.width,
       this.lastImageSize.height
     );
     return {
-      [o.AspectRatio]: {
+      [a.AspectRatio]: {
         height: t.height,
         percentageHeight: 100,
         percentageWidth: 100,
-        unit: o.AspectRatio,
+        unit: a.AspectRatio,
         width: t.width,
         x: 0,
         y: 0
       },
-      [o.Pixel]: {
+      [a.Pixel]: {
         height: this.lastImageSize.height,
         percentageHeight: 100,
         percentageWidth: 100,
-        unit: o.Pixel,
+        unit: a.Pixel,
         width: this.lastImageSize.width,
         x: 0,
         y: 0
@@ -1731,19 +1131,19 @@ let p = class extends F {
    * It returns an object with the last resize size in both pixel and aspect ratio units.
    */
   get lastResizeSize() {
-    const t = st(
+    const t = it(
       this.lastImageSize.width,
       this.lastImageSize.height
     );
     return {
-      [o.AspectRatio]: {
+      [a.AspectRatio]: {
         height: t.height,
-        unit: o.AspectRatio,
+        unit: a.AspectRatio,
         width: t.width
       },
-      [o.Pixel]: {
+      [a.Pixel]: {
         height: this.lastImageSize.height,
-        unit: o.Pixel,
+        unit: a.Pixel,
         width: this.lastImageSize.width
       }
     };
@@ -1752,7 +1152,7 @@ let p = class extends F {
    * Returns the transformation string for the asset link.
    */
   get transformationString() {
-    return J({
+    return Y({
       asset: this.asset,
       baseUrl: "",
       parameters: this.parameters,
@@ -1789,9 +1189,10 @@ let p = class extends F {
         assetId: this.asset.id,
         extension: this.asset.extension,
         format: e?.proxyName ?? "",
+        token: this.token,
         transformations: this.transformationString
       }).then((s) => {
-        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === c.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+        this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === p.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
           height: s.height,
           width: s.width
         }, this.selectedFormat = {
@@ -1805,7 +1206,7 @@ let p = class extends F {
            */
         });
       });
-      const i = J({
+      const i = Y({
         asset: this.asset,
         baseUrl: "",
         extension: this.selectedFormat.extension,
@@ -1831,13 +1232,14 @@ let p = class extends F {
     if (await this.updateComplete, !this.asset || !this.selectedFormat)
       return;
     const t = this.proxies?.find(
-      (a) => a.id === this.selectedProxy
+      (r) => r.id === this.selectedProxy
     );
     this.loading = !0;
     const e = await this.apiGetTransformAssetLink({
       assetId: this.asset.id,
       extension: this.selectedFormat.extension,
       format: t?.proxyName ?? "",
+      token: this.token,
       transformations: this.transformationString
     });
     if (this.loading = !1, !e?.relativePath || !this.selectedFormat)
@@ -1850,7 +1252,7 @@ let p = class extends F {
       keepAspectRatio: !0,
       ratioHeight: 1,
       ratioWidth: 1,
-      unit: o.Pixel,
+      unit: a.Pixel,
       width: e.width
     }, this.cropSize = {
       cropMode: "free",
@@ -1861,18 +1263,24 @@ let p = class extends F {
       percentageWidth: 100,
       ratioHeight: 1,
       ratioWidth: 1,
-      unit: o.Pixel,
+      unit: a.Pixel,
       width: e.width,
       x: 0,
       y: 0
-    }, this.lastAction === c.Rotate && (this.rotation = 0), this.lastAction = void 0;
+    }, this.lastAction === p.Rotate && (this.rotation = 0), this.lastAction = void 0;
     const i = this.transformations.some(
-      (a) => a.key === c.Metadata
+      (r) => r.key === p.Metadata
+    ), s = this.transformations.findLast(
+      (r) => r.key === p.Quality
+    ), o = this.transformations.findLast(
+      (r) => r.key === p.Rotate
     );
     this.selectedFormat = {
       ...this.selectedFormat,
       height: e.height,
       keepMetadata: i,
+      quality: s?.value?.quality ?? this.selectedFormat.quality,
+      rotation: o?.value?.rotation ?? 0,
       url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${e.relativePath}` : e.relativePath,
       width: e.width
       /**
@@ -1880,7 +1288,7 @@ let p = class extends F {
        * url: `${this.baseUrl}/${response.relativePath}`,
        */
     };
-    const s = J({
+    const h = Y({
       asset: this.asset,
       baseUrl: "",
       extension: this.selectedFormat.extension,
@@ -1889,7 +1297,7 @@ let p = class extends F {
       useSession: this.useSession
     });
     this.emit("cx-asset-link-format-change", {
-      detail: s
+      detail: h
     });
   }
   handleCropperElementChange() {
@@ -1912,7 +1320,9 @@ let p = class extends F {
       width: Number.parseInt(this.asset.width, 10)
     });
     const t = this.transformations.findLast(
-      (e) => e.key === c.Quality
+      (i) => i.key === p.Quality
+    ), e = this.transformations.findLast(
+      (i) => i.key === p.Rotate
     );
     this.selectedFormat = {
       extension: this.asset.extension,
@@ -1920,7 +1330,7 @@ let p = class extends F {
       keepMetadata: !1,
       originalUrl: this.asset.originalUrl,
       quality: t?.value?.quality || 100,
-      rotation: 0,
+      rotation: e?.value?.rotation ?? 0,
       url: this.asset.imageUrl,
       width: this.defaultSize.width,
       x: 0,
@@ -1938,7 +1348,7 @@ let p = class extends F {
       percentageWidth: 100,
       ratioHeight: 1,
       ratioWidth: 1,
-      unit: o.Pixel,
+      unit: a.Pixel,
       width: this.defaultSize.width,
       x: 0,
       y: 0
@@ -1958,20 +1368,20 @@ let p = class extends F {
     e.proxyName === "TRX" && (e.formatHeight = Number(this.asset.height), e.formatWidth = Number(this.asset.width));
     const i = this.proxies?.find((s) => s.id === t);
     i && (this.asset && i.proxyName === "TRX" && (i.formatHeight = Number(this.asset.height), i.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((s) => {
-      if (s.key === c.Crop) {
-        const a = s.value, h = a.width / i.formatWidth * e.formatWidth, r = a.height / i.formatHeight * e.formatHeight, m = a.x / i.formatWidth * e.formatWidth, y = a.y / i.formatHeight * e.formatHeight;
+      if (s.key === p.Crop) {
+        const o = s.value, h = o.width / i.formatWidth * e.formatWidth, r = o.height / i.formatHeight * e.formatHeight, x = o.x / i.formatWidth * e.formatWidth, z = o.y / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
             height: r,
             width: h,
-            x: m,
-            y
+            x,
+            y: z
           }
         };
       }
-      if (s.key === c.Resize) {
-        const a = s.value, h = a.width / i.formatWidth * e.formatWidth, r = a.height / i.formatHeight * e.formatHeight;
+      if (s.key === p.Resize) {
+        const o = s.value, h = o.width / i.formatWidth * e.formatWidth, r = o.height / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
@@ -1991,26 +1401,26 @@ let p = class extends F {
     }, await this.updateComplete, this.cropSize = {
       cropMode: "free",
       focusMode: "manual",
-      height: this.lastCropSize[o.Pixel].height,
+      height: this.lastCropSize[a.Pixel].height,
       keepAspectRatio: !0,
       percentageHeight: 100,
       percentageWidth: 100,
       ratioHeight: 1,
       ratioWidth: 1,
-      unit: o.Pixel,
-      width: this.lastCropSize[o.Pixel].width,
+      unit: a.Pixel,
+      width: this.lastCropSize[a.Pixel].width,
       x: 0,
       y: 0
     }, this.resizeSize = {
-      height: this.lastResizeSize[o.Pixel].height,
+      height: this.lastResizeSize[a.Pixel].height,
       keepAspectRatio: !0,
       ratioHeight: 1,
       ratioWidth: 1,
-      unit: o.Pixel,
-      width: this.lastResizeSize[o.Pixel].width
+      unit: a.Pixel,
+      width: this.lastResizeSize[a.Pixel].width
     };
   }
-  async handleLoadingChange() {
+  handleLoadingChange() {
     this.cropperElement && (this.cropperElement.loading = this.loading);
   }
   handleSelectedFormatChange() {
@@ -2027,12 +1437,12 @@ let p = class extends F {
   }
   handleActiveSettingChange() {
     this.cropperElement && (this.resizeSize = {
-      height: this.lastResizeSize[o.Pixel].height,
+      height: this.lastResizeSize[a.Pixel].height,
       keepAspectRatio: !0,
       ratioHeight: 1,
       ratioWidth: 1,
-      unit: o.Pixel,
-      width: this.lastResizeSize[o.Pixel].width
+      unit: a.Pixel,
+      width: this.lastResizeSize[a.Pixel].width
     }, this.cropperElement.disabled = this.activeSetting !== "cx-asset-link-format-crop");
   }
   async handleRequestAutoCropSuggestion({
@@ -2040,34 +1450,34 @@ let p = class extends F {
     focusMode: e,
     height: i,
     keepAspectRatio: s,
-    percentageHeight: a,
+    percentageHeight: o,
     percentageWidth: h,
     ratioHeight: r,
-    ratioWidth: m,
-    unit: y,
-    useCropMode: v,
-    width: w
+    ratioWidth: x,
+    unit: z,
+    useCropMode: $,
+    width: B
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
-    this.loading = !0, this.lastAction = c.Crop;
-    const x = await this.apiGetCropFocusMode({
+    this.loading = !0, this.lastAction = p.Crop;
+    const v = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
-      cropWidth: w,
+      cropWidth: B,
       imageUrl: this.selectedFormat.url
     });
-    if (x) {
-      let n = a, $ = h;
-      i || (n = x.height * 100 / this.selectedFormat.height), w || ($ = x.width * 100 / this.selectedFormat.width), this.cropSize = {
+    if (v) {
+      let T = o, tt = h;
+      i || (T = v.height * 100 / this.selectedFormat.height), B || (tt = v.width * 100 / this.selectedFormat.width), this.cropSize = {
         ...this.cropSize,
-        height: x.height,
-        percentageHeight: n ?? this.cropSize.percentageHeight,
-        percentageWidth: $ ?? this.cropSize.percentageWidth,
-        width: x.width,
-        x: x.x * 100 / this.selectedFormat.width,
-        y: x.y * 100 / this.selectedFormat.height,
-        ...v ? {
+        height: v.height,
+        percentageHeight: T ?? this.cropSize.percentageHeight,
+        percentageWidth: tt ?? this.cropSize.percentageWidth,
+        width: v.width,
+        x: v.x * 100 / this.selectedFormat.width,
+        y: v.y * 100 / this.selectedFormat.height,
+        ...$ ? {
           cropMode: e,
           focusMode: "manual",
           keepAspectRatio: !1
@@ -2077,8 +1487,8 @@ let p = class extends F {
         },
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
         ratioHeight: r ?? this.cropSize.ratioHeight,
-        ratioWidth: m ?? this.cropSize.ratioWidth,
-        unit: y ?? this.cropSize.unit
+        ratioWidth: x ?? this.cropSize.ratioWidth,
+        unit: z ?? this.cropSize.unit
       };
     }
     this.loading = !1, this.lastAction = void 0;
@@ -2087,29 +1497,29 @@ let p = class extends F {
     const { croppedArea: e } = t.detail, {
       height: i,
       width: s,
-      x: a,
+      x: o,
       y: h
-    } = e, r = this.cropSize.percentageWidth !== s, m = this.cropSize.percentageHeight !== i;
-    let y = this.cropSize.height, v = this.cropSize.width;
-    r && (v = Math.round(s * this.selectedFormat.width / 100)), m && (y = Math.round(
+    } = e, r = this.cropSize.percentageWidth !== s, x = this.cropSize.percentageHeight !== i;
+    let z = this.cropSize.height, $ = this.cropSize.width;
+    r && ($ = Math.round(s * this.selectedFormat.width / 100)), x && (z = Math.round(
       i * this.selectedFormat.height / 100
     ));
-    const w = this.cropSize.focusMode;
+    const B = this.cropSize.focusMode;
     this.focusModes.find(
-      (n) => n.value === w
+      (T) => T.value === B
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
-      focusMode: w,
-      height: y,
+      focusMode: B,
+      height: z,
       percentageHeight: i,
       percentageWidth: s,
-      width: v
+      width: $
     }) : this.cropSize = {
       ...this.cropSize,
-      height: y,
+      height: z,
       percentageHeight: i,
       percentageWidth: s,
-      width: v,
-      x: a,
+      width: $,
+      x: o,
       y: h
     };
   }
@@ -2133,7 +1543,7 @@ let p = class extends F {
   }
   onProxyChange(t) {
     const e = t.detail;
-    this.lastAction = c.Proxy, this.selectedProxy = e.id;
+    this.lastAction = p.Proxy, this.selectedProxy = e.id;
   }
   async onCropModeChange(t) {
     const { mode: e } = t.detail;
@@ -2144,22 +1554,22 @@ let p = class extends F {
       });
     else {
       const s = this.focusModes.find(
-        (y) => y.value === this.cropSize.focusMode
+        (z) => z.value === this.cropSize.focusMode
       )?.auto;
-      let a = this.cropSize.keepAspectRatio, h = this.cropSize.focusMode, r = this.cropSize.x, m = this.cropSize.y;
-      e === "free" ? (a = !1, h = "manual") : this.cropSize.unit === o.Pixel && !s && (r = 0, m = 0), s ? await this.handleRequestAutoCropSuggestion({
+      let o = this.cropSize.keepAspectRatio, h = this.cropSize.focusMode, r = this.cropSize.x, x = this.cropSize.y;
+      e === "free" ? (o = !1, h = "manual") : this.cropSize.unit === a.Pixel && !s && (r = 0, x = 0), s ? await this.handleRequestAutoCropSuggestion({
         cropMode: e,
         focusMode: h,
         height: this.cropSize.height,
-        keepAspectRatio: a,
+        keepAspectRatio: o,
         width: this.cropSize.width
       }) : this.cropSize = {
         ...this.cropSize,
         cropMode: e,
         focusMode: h,
-        keepAspectRatio: a,
+        keepAspectRatio: o,
         x: r,
-        y: m
+        y: x
       };
     }
   }
@@ -2176,51 +1586,51 @@ let p = class extends F {
   }
   async onCropChange(t) {
     const e = this.cropSize.unit;
-    if (t.detail.unit === o.AspectRatio) {
+    if (t.detail.unit === a.AspectRatio) {
       const i = t.detail.width / t.detail.height, s = Math.min(
         Math.max(Math.round(this.cropSize.height * i), 0),
         this.resizeSize.width
-      ), a = Math.min(
+      ), o = Math.min(
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
-      ), h = a * 100 / this.selectedFormat.height, r = s * 100 / this.selectedFormat.width;
-      let m = this.cropSize.x, y = this.cropSize.y;
-      m + r > 100 && (m = 100 - r), y + h > 100 && (y = 100 - h);
-      let v = this.cropSize.cropMode;
+      ), h = o * 100 / this.selectedFormat.height, r = s * 100 / this.selectedFormat.width;
+      let x = this.cropSize.x, z = this.cropSize.y;
+      x + r > 100 && (x = 100 - r), z + h > 100 && (z = 100 - h);
+      let $ = this.cropSize.cropMode;
       this.cropModes.find(
-        (x) => x.value === v
-      )?.auto && (v = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = h, this.cropSize.percentageWidth = r, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
+        (v) => v.value === $
+      )?.auto && ($ = "free"), t.detail.silent ? (this.cropSize.height = o, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = h, this.cropSize.percentageWidth = r, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = a.AspectRatio, this.cropSize.width = s) : this.cropSize = {
         ...this.cropSize,
-        cropMode: v,
-        height: a,
+        cropMode: $,
+        height: o,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: h,
         percentageWidth: r,
         ratioHeight: t.detail.height,
         ratioWidth: t.detail.width,
-        unit: o.AspectRatio,
+        unit: a.AspectRatio,
         width: s,
-        x: m,
-        y
+        x,
+        y: z
       };
     } else {
       const i = this.selectedFormat ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.selectedFormat ? t.detail.width * 100 / this.selectedFormat.width : 100;
-      let a = this.cropSize.x, h = this.cropSize.y;
-      a + s > 100 && (a = 100 - s), h + i > 100 && (h = 100 - i);
+      let o = this.cropSize.x, h = this.cropSize.y;
+      o + s > 100 && (o = 100 - s), h + i > 100 && (h = 100 - i);
       let r = this.cropSize.cropMode;
-      const m = this.cropModes.find(
-        (y) => y.value === r
+      const x = this.cropModes.find(
+        (z) => z.value === r
       )?.auto;
-      (t.detail.breakAspectRatio || m) && (r = "free"), t.detail.silent ? (this.cropSize.cropMode = r, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = h) : this.cropSize = {
+      (t.detail.breakAspectRatio || x) && (r = "free"), t.detail.silent ? (this.cropSize.cropMode = r, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = a.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = o, this.cropSize.y = h) : this.cropSize = {
         ...this.cropSize,
         cropMode: r,
         height: t.detail.height,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: i,
         percentageWidth: s,
-        unit: o.Pixel,
+        unit: a.Pixel,
         width: t.detail.width,
-        x: a,
+        x: o,
         y: h
       };
     }
@@ -2239,15 +1649,15 @@ let p = class extends F {
     });
   }
   onCropApply(t) {
-    const { height: e, mode: i, unit: s, width: a } = t.detail;
-    if (this.lastAction = c.Crop, !(!this.cropperElement || !this.selectedFormat))
-      if (e && a && s) {
-        let h = a, r = e;
-        if (s === o.AspectRatio && (h = this.cropSize.percentageWidth * this.selectedFormat.width / 100, r = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
+    const { height: e, mode: i, unit: s, width: o } = t.detail;
+    if (this.lastAction = p.Crop, !(!this.cropperElement || !this.selectedFormat))
+      if (e && o && s) {
+        let h = o, r = e;
+        if (s === a.AspectRatio && (h = this.cropSize.percentageWidth * this.selectedFormat.width / 100, r = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
           this.transformations = [
             ...this.transformations,
             {
-              key: c.Crop,
+              key: p.Crop,
               value: {
                 height: r,
                 mode: i,
@@ -2256,17 +1666,17 @@ let p = class extends F {
             }
           ];
         else {
-          const m = this.cropSize.x / 100 * this.selectedFormat.width, y = this.cropSize.y / 100 * this.selectedFormat.height;
+          const x = this.cropSize.x / 100 * this.selectedFormat.width, z = this.cropSize.y / 100 * this.selectedFormat.height;
           this.transformations = [
             ...this.transformations,
             {
-              key: c.Crop,
+              key: p.Crop,
               value: {
                 height: r,
                 unit: s,
                 width: h,
-                x: m,
-                y
+                x,
+                y: z
               }
             }
           ];
@@ -2274,7 +1684,7 @@ let p = class extends F {
       } else i && (this.transformations = [
         ...this.transformations,
         {
-          key: c.Crop,
+          key: p.Crop,
           value: {
             mode: i
           }
@@ -2282,9 +1692,9 @@ let p = class extends F {
       ]);
   }
   onResizeChange(t) {
-    if (t.detail.unit === o.AspectRatio) {
+    if (t.detail.unit === a.AspectRatio) {
       const e = t.detail.width / t.detail.height, i = Math.max(
-        Math.round(this.lastResizeSize[o.Pixel].height * e),
+        Math.round(this.lastResizeSize[a.Pixel].height * e),
         0
       ), s = Math.max(Math.round(i / e), 0);
       this.resizeSize = {
@@ -2309,15 +1719,15 @@ let p = class extends F {
     if (!this.selectedFormat)
       return;
     const { height: e, unit: i, width: s } = t.detail;
-    this.lastAction = c.Resize;
-    const a = this.selectedFormat.width || this.defaultSize.width, h = this.selectedFormat.height || this.defaultSize.height;
-    let r = s, m = e;
-    this.resizeSize.unit !== i ? (r = a, m = h) : i === o.AspectRatio && (r = Math.round(s / e * h), m = h), this.transformations = [
+    this.lastAction = p.Resize;
+    const o = this.selectedFormat.width || this.defaultSize.width, h = this.selectedFormat.height || this.defaultSize.height;
+    let r = s, x = e;
+    this.resizeSize.unit !== i ? (r = o, x = h) : i === a.AspectRatio && (r = Math.round(s / e * h), x = h), this.transformations = [
       ...this.transformations,
       {
-        key: c.Resize,
+        key: p.Resize,
         value: {
-          height: m,
+          height: x,
           unit: i,
           width: r
         }
@@ -2331,12 +1741,12 @@ let p = class extends F {
     if (!this.selectedFormat)
       return;
     const e = t.detail;
-    this.lastAction = c.Rotate, this.transformations = [
+    this.lastAction = p.Rotate, this.transformations = [
       ...this.transformations,
       {
-        key: c.Rotate,
+        key: p.Rotate,
         value: {
-          rotation: e
+          rotation: e + (this.selectedFormat.rotation || 0)
         }
       }
     ];
@@ -2345,10 +1755,10 @@ let p = class extends F {
     if (!this.selectedFormat)
       return;
     const e = t.detail;
-    this.selectedFormat.quality = e, this.lastAction = c.Quality, this.transformations = [
+    this.selectedFormat.quality = e, this.lastAction = p.Quality, this.transformations = [
       ...this.transformations,
       {
-        key: c.Quality,
+        key: p.Quality,
         value: {
           quality: e
         }
@@ -2364,16 +1774,16 @@ let p = class extends F {
       keepMetadata: e
     }, e ? this.transformations = [
       ...this.transformations.filter(
-        (i) => i.key !== c.Metadata
+        (i) => i.key !== p.Metadata
       ),
       {
-        key: c.Metadata,
+        key: p.Metadata,
         value: {
           keepMetadata: e
         }
       }
     ] : this.transformations = this.transformations.filter(
-      (i) => i.key !== c.Metadata
+      (i) => i.key !== p.Metadata
     );
   }
   onExtensionChange(t) {
@@ -2388,229 +1798,157 @@ let p = class extends F {
   handleUndo() {
     this.transformations = this.transformations.slice(0, -1);
     const t = this.transformations.findLast(
-      (e) => e.key === c.Quality
-    )?.value?.quality;
+      (i) => i.key === p.Quality
+    )?.value?.quality, e = this.transformations.findLast(
+      (i) => i.key === p.Rotate
+    )?.value?.rotation;
     this.selectedFormat && (this.selectedFormat = {
       ...this.selectedFormat,
-      quality: t ?? 100
+      quality: t ?? 100,
+      rotation: e ?? 0
     });
   }
   render() {
-    return b`<div
-      class="asset-link-format"
-      @cx-show=${this.onDetailsShow}
-      @cx-hide=${this.onDetailsHide}
-    >
-      ${G(
+    return m`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${R(
       !this.hideHeader,
-      () => b`
-          <cx-space
-            class="asset-link-format__section-header"
-            direction="horizontal"
-            spacing="small"
-            align-items="center"
-            justify-content="space-between"
-          >
-            <cx-typography variant="body3">
-              ${this.localize.term("transformations")}
-            </cx-typography>
-            <cx-button
-              class="asset-link-format__undo"
-              variant="custom"
-              ?disabled=${this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1}
-              @click=${this.handleUndo}
-            >
-              ${this.localize.term("undo")}
-            </cx-button>
-          </cx-space>
-        `,
-      () => lt
+      () => 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-button class="asset-link-format__undo" variant="custom" ?disabled=${this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button></cx-space>`,
+      () => 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 === p.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>${R(
+      !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 === p.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>`
     )}
-      <cx-asset-link-format-proxy
-        class="asset-link-format__details"
-        value=${this.selectedProxy ?? ""}
-        ?open=${this.activeSetting === "cx-asset-link-format-proxy"}
-        .items=${this.formats}
-        ?loading=${this.loading && this.lastAction === c.Proxy}
-        @cx-asset-link-format-proxy-change=${this.onProxyChange}
-      ></cx-asset-link-format-proxy>
-      <cx-asset-link-format-crop
-        class="asset-link-format__details"
-        ?open=${this.activeSetting === "cx-asset-link-format-crop"}
-        ?disabled-apply=${this.disabledCropApply}
-        ?loading=${this.loading && this.lastAction === c.Crop}
-        ?keep-aspect-ratio=${this.cropSize.keepAspectRatio}
-        focus-mode=${this.cropSize.focusMode}
-        crop-mode=${this.cropSize.cropMode}
-        width=${this.cropSize.width}
-        height=${this.cropSize.height}
-        max-width=${this.lastResizeSize[o.Pixel].width}
-        max-height=${this.lastResizeSize[o.Pixel].height}
-        percentage-width=${this.cropSize.percentageWidth}
-        percentage-height=${this.cropSize.percentageHeight}
-        ratio-width=${this.cropSize.ratioWidth}
-        ratio-height=${this.cropSize.ratioHeight}
-        unit=${this.cropSize.unit}
-        .lastAppliedSetting=${this.lastCropSize}
-        .cropModes=${this.cropModes}
-        .focusModes=${this.focusModes}
-        @cx-asset-link-format-crop-mode-change=${this.onCropModeChange}
-        @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange}
-        @cx-asset-link-format-crop-change=${this.onCropChange}
-        @cx-asset-link-format-crop-changed=${this.onCropChanged}
-        @cx-asset-link-format-crop-apply=${this.onCropApply}
-      ></cx-asset-link-format-crop>
-      <cx-asset-link-format-resize
-        class="asset-link-format__details"
-        ?open=${this.activeSetting === "cx-asset-link-format-resize"}
-        ?loading=${this.loading && this.lastAction === c.Resize}
-        ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio}
-        width=${this.resizeSize.width}
-        height=${this.resizeSize.height}
-        max-width=${this.imageSize.width}
-        max-height=${this.imageSize.height}
-        ratio-width=${this.resizeSize.ratioWidth}
-        ratio-height=${this.resizeSize.ratioHeight}
-        unit=${this.resizeSize.unit}
-        .lastAppliedSetting=${this.lastResizeSize}
-        @cx-asset-link-format-resize-change=${this.onResizeChange}
-        @cx-asset-link-format-resize-apply=${this.onResizeApply}
-      ></cx-asset-link-format-resize>
-      <cx-asset-link-format-rotation
-        class="asset-link-format__details"
-        ?loading=${this.loading && this.lastAction === c.Rotate}
-        ?open=${this.activeSetting === "cx-asset-link-format-rotation"}
-        value=${this.rotation}
-        @cx-asset-link-format-rotation-change=${this.onRotationChange}
-        @cx-asset-link-format-rotation-apply=${this.onRotationApply}
-      ></cx-asset-link-format-rotation>
-      <cx-asset-link-format-quality
-        class="asset-link-format__details"
-        ?loading=${this.loading && this.lastAction === c.Quality}
-        ?open=${this.activeSetting === "cx-asset-link-format-quality"}
-        value=${this.selectedFormat?.quality ?? 100}
-        @cx-asset-link-format-quality-change=${this.onQualityChange}
-      ></cx-asset-link-format-quality>
-      <cx-asset-link-format-metadata
-        class="asset-link-format__details"
-        ?open=${this.activeSetting === "cx-asset-link-format-metadata"}
-        .value=${this.selectedFormat?.keepMetadata ?? !1}
-        @cx-asset-link-format-metadata-change=${this.onMetadataChange}
-      >
-      </cx-asset-link-format-metadata>
-      ${G(
-      this.useCustomExtension,
-      () => b`
-          <cx-asset-link-format-extension
-            .items=${this.extensions}
-            value=${this.selectedFormat?.extension ?? ""}
-            @cx-asset-link-format-extension-change=${this.onExtensionChange}
-          ></cx-asset-link-format-extension>
-        `
+      ${R(
+      !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 === p.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>`
     )}
-    </div>`;
+      ${R(
+      !this.noRotate,
+      () => m`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === p.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 === p.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>${R(
+      !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>`
+    )}
+      ${R(
+      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>`;
   }
 };
-p.styles = [E, ut];
-p.dependencies = {
+l.styles = [W, pt];
+l.dependencies = {
   "cx-asset-link-format-crop": d,
-  "cx-asset-link-format-extension": U,
-  "cx-asset-link-format-metadata": P,
-  "cx-asset-link-format-proxy": C,
-  "cx-asset-link-format-quality": A,
-  "cx-asset-link-format-resize": f,
-  "cx-asset-link-format-rotation": R,
-  "cx-button": q,
-  "cx-space": H,
-  "cx-typography": W
+  "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": k,
+  "cx-button": D,
+  "cx-space": P,
+  "cx-typography": H
 };
-u([
-  l({ attribute: "base-url", reflect: !0, type: String })
-], p.prototype, "baseUrl", 2);
-u([
-  l({ reflect: !1, type: Object })
-], p.prototype, "asset", 2);
-u([
-  l({ attribute: "crop-modes", reflect: !1, type: Array })
-], p.prototype, "cropModes", 2);
-u([
-  l({ attribute: "focus-modes", reflect: !1, type: Object })
-], p.prototype, "focusModes", 2);
-u([
-  l({ reflect: !1, type: Array })
-], p.prototype, "extensions", 2);
-u([
-  l({ reflect: !1, type: Array })
-], p.prototype, "proxies", 2);
-u([
-  l({ attribute: "for-cropper", reflect: !0, type: String })
-], p.prototype, "forCropper", 2);
-u([
-  l({ attribute: "use-session", reflect: !0, type: String })
-], p.prototype, "useSession", 2);
-u([
-  l({ reflect: !1, type: Array })
-], p.prototype, "transformations", 2);
-u([
-  l({ attribute: "selected-proxy", reflect: !0, type: String })
-], p.prototype, "selectedProxy", 2);
-u([
-  l({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
-], p.prototype, "useCustomExtension", 2);
-u([
-  l({ attribute: "last-image-size", reflect: !1, type: Object })
-], p.prototype, "lastImageSize", 2);
-u([
-  l({ attribute: "hide-header", reflect: !1, type: Boolean })
-], p.prototype, "hideHeader", 2);
-u([
-  l({ attribute: !1, reflect: !1, type: Object })
-], p.prototype, "queryElement", 2);
-u([
-  z()
-], p.prototype, "activeSetting", 2);
-u([
-  z()
-], p.prototype, "selectedFormat", 2);
-u([
-  z()
-], p.prototype, "resizeSize", 2);
-u([
-  z()
-], p.prototype, "cropSize", 2);
-u([
-  z()
-], p.prototype, "rotation", 2);
-u([
-  z()
-], p.prototype, "defaultSize", 2);
-u([
-  z()
-], p.prototype, "cropperElement", 2);
-u([
-  z()
-], p.prototype, "parameters", 2);
-u([
-  z()
-], p.prototype, "loading", 2);
-u([
-  z()
-], p.prototype, "lastAction", 2);
-u([
-  z()
-], p.prototype, "frozenIndex", 2);
-u([
-  k(["transformations"])
-], p.prototype, "handleTransformationsChange", 1);
-u([
-  k("selectedProxy")
-], p.prototype, "handleSelectedProxyChange", 1);
-u([
-  k("loading")
-], p.prototype, "handleLoadingChange", 1);
-p = u([
-  N("cx-asset-link-format")
-], p);
+c([
+  n({ attribute: "base-url", type: String })
+], l.prototype, "baseUrl", 2);
+c([
+  n({ attribute: "token", type: String })
+], l.prototype, "token", 2);
+c([
+  n({ reflect: !1, type: Object })
+], l.prototype, "asset", 2);
+c([
+  n({ attribute: "crop-modes", reflect: !1, type: Array })
+], l.prototype, "cropModes", 2);
+c([
+  n({ attribute: "focus-modes", reflect: !1, type: Object })
+], l.prototype, "focusModes", 2);
+c([
+  n({ reflect: !1, type: Array })
+], l.prototype, "extensions", 2);
+c([
+  n({ reflect: !1, type: Array })
+], l.prototype, "proxies", 2);
+c([
+  n({ attribute: "for-cropper", reflect: !0, type: String })
+], l.prototype, "forCropper", 2);
+c([
+  n({ attribute: "use-session", reflect: !0, type: String })
+], l.prototype, "useSession", 2);
+c([
+  n({ reflect: !1, type: Array })
+], l.prototype, "transformations", 2);
+c([
+  n({ attribute: "selected-proxy", reflect: !0, type: String })
+], l.prototype, "selectedProxy", 2);
+c([
+  n({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
+], l.prototype, "useCustomExtension", 2);
+c([
+  n({ attribute: "no-metadata", reflect: !0, type: Boolean })
+], l.prototype, "noMetadata", 2);
+c([
+  n({ attribute: "no-crop", reflect: !0, type: Boolean })
+], l.prototype, "noCrop", 2);
+c([
+  n({ attribute: "no-resize", reflect: !0, type: Boolean })
+], l.prototype, "noResize", 2);
+c([
+  n({ attribute: "no-rotate", reflect: !0, type: Boolean })
+], l.prototype, "noRotate", 2);
+c([
+  n({ attribute: "last-image-size", reflect: !1, type: Object })
+], l.prototype, "lastImageSize", 2);
+c([
+  n({ attribute: "hide-header", reflect: !1, type: Boolean })
+], l.prototype, "hideHeader", 2);
+c([
+  n({ 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([
+  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);
 export {
-  p as default
+  l as default
 };