@orangelogic/design-system 2.60.0 → 2.61.0

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

@@ -1,30 +1,33 @@
-import { c as rt } from "../chunks/cropper.aA0v16xS.js";
-import { C as q } from "../chunks/button.CtCSNRB3.js";
+import "../chunks/cropper.BraEEykE.js";
+import { C as q } from "../chunks/button.P71VJ5xh.js";
 import H from "./space.js";
-import { C as W } from "../chunks/typography.BFpl0WMA.js";
-import { i as F, n as l, C as E, x as b, c as N } from "../chunks/custom-element.vnXBMQxc.js";
-import { b as ht, c as lt } from "../chunks/asset.Ba-CxnNM.js";
-import { c as O } from "../chunks/component.styles.CI-v8BZa.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 { L as D } from "../chunks/i18n.BP2FRO1v.js";
-import { w as k } from "../chunks/watch.BCJD77bD.js";
+import { c as N } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as O } from "../chunks/i18n.DrzK7TPf.js";
+import { w as k } from "../chunks/watch.q1sEjPWL.js";
 import { s as it, c as st } from "../chunks/number.CjNxU7Xs.js";
-import { r as v } from "../chunks/state.Cw55xXlb.js";
-import { n as J } from "../chunks/when.Dr1es41R.js";
-import T from "./details.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 L from "./icon.js";
+import j from "./icon.js";
 import K from "./icon-button.js";
 import tt from "./input.js";
-import { C as G } from "../chunks/option.D9KJhzHs.js";
-import { C as X } from "../chunks/select.DfO4de04.js";
-import { e as j } from "../chunks/query.BBf1UFkC.js";
-import { c as Q } from "../chunks/repeat.CauKaXyy.js";
-import { o as M } from "../chunks/style-map.CZovMmo_.js";
+import { C as X } from "../chunks/option.D1u5-cTt.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 ct from "./button-group.js";
-import pt from "./checkbox.js";
-const dt = F`
+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);
   }
@@ -61,7 +64,7 @@ const dt = F`
     --background-color: transparent;
   }
 `;
-function Z({
+function J({
   asset: t,
   baseUrl: e,
   extension: i,
@@ -72,24 +75,24 @@ function Z({
   let r = e;
   a && a.length > 0 && (r += "/t/");
   const m = a?.findLast(
-    (w) => w.key === c.Quality
+    (v) => v.key === c.Quality
   );
   m && (a = [
     ...a?.filter(
-      (w) => w.key !== c.Quality
+      (v) => v.key !== c.Quality
     ) || [],
     m
-  ]), a?.forEach(({ key: w, value: z }) => {
-    if (w === c.Resize) {
+  ]), a?.forEach(({ key: v, value: w }) => {
+    if (v === c.Resize) {
       const x = [
         ...[
           {
             key: "re_w_",
-            value: Math.round(z.width ?? 0)
+            value: Math.round(w.width ?? 0)
           },
           {
             key: "re_h_",
-            value: Math.round(z.height ?? 0)
+            value: Math.round(w.height ?? 0)
           }
         ].filter((n) => n.value !== void 0).map((n) => ({
           key: n.key,
@@ -104,29 +107,29 @@ function Z({
         r += `${n}${$}${B < x.length - 1 ? "," : ""}`;
       }), r += "/";
     }
-    if (w === c.Crop) {
+    if (v === c.Crop) {
       const x = [
         ...[
           {
             key: "c_",
-            value: z.mode
+            value: w.mode
           },
-          ...z.disabledSize ? [] : [
+          ...w.disabledSize ? [] : [
             {
               key: "c_w_",
-              value: Math.round(z.width ?? 0)
+              value: Math.round(w.width ?? 0)
             },
             {
               key: "c_h_",
-              value: Math.round(z.height ?? 0)
+              value: Math.round(w.height ?? 0)
             },
             {
               key: "c_x_",
-              value: Math.round(z.x ?? 0)
+              value: Math.round(w.x ?? 0)
             },
             {
               key: "c_y_",
-              value: Math.round(z.y ?? 0)
+              value: Math.round(w.y ?? 0)
             }
           ]
         ].filter((n) => n.value !== void 0 && n.value !== null).map((n) => ({
@@ -143,21 +146,21 @@ function Z({
         r += `${n}${ot ? Math.round(Number($)) : $}${B < x.length - 1 ? "," : ""}`;
       }), r += "/";
     }
-    if (w === c.Rotate && ([
+    if (v === c.Rotate && ([
       {
         key: "r_a_",
-        value: z.rotation
+        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 += "/"), w === c.Quality) {
+    }), r += "/"), v === c.Quality) {
       const x = [
         {
           key: "q_level_",
-          value: z.quality
+          value: w.quality
         }
       ].filter((n) => n.value !== void 0).map((n) => ({
         key: n.key,
@@ -167,11 +170,11 @@ function Z({
         r += `${n}${$}${B < x.length - 1 ? "," : ""}`;
       }), r += "/";
     }
-    if (w === c.Metadata) {
+    if (v === c.Metadata) {
       const x = [
         {
           key: "fl_keep_metadata",
-          value: z.keepMetadata
+          value: w.keepMetadata
         }
       ].filter((n) => n.value !== void 0).map((n) => ({ key: n.key, value: n.value }));
       x.forEach(({ key: n }, $) => {
@@ -180,13 +183,13 @@ function Z({
     }
   }), i && (r += `${t?.identifier}${i}`);
   const y = [];
-  return s && s.length > 0 && s.forEach(({ key: w, value: z }) => {
+  return s && s.length > 0 && s.forEach(({ key: v, value: w }) => {
     y.push(
-      `${encodeURIComponent(w.trim())}=${encodeURIComponent(z.trim())}`
+      `${encodeURIComponent(v.trim())}=${encodeURIComponent(w.trim())}`
     );
   }), y.length > 0 && (r += `?${y.join("&")}`), r.endsWith("/") && (r = r.slice(0, -1)), r;
 }
-const ut = F`
+const gt = D`
   cx-details::part(base) {
     border-bottom-width: 0;
   }
@@ -208,14 +211,14 @@ const ut = F`
     flex: 1;
   }
 `;
-var gt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, g = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? mt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+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 && gt(e, i, a), a;
+  return s && a && mt(e, i, a), a;
 };
-let d = class extends E {
+let d = class extends F {
   constructor() {
-    super(...arguments), this.localize = new D(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 = {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.lastAppliedSetting = {
       [o.Pixel]: {
         height: 0,
         percentageHeight: 100,
@@ -323,7 +326,7 @@ let d = class extends E {
     else if (!i) {
       const [s, a] = e.split(":").map(Number);
       if (this.unit === o.Pixel) {
-        const { height: h, width: r } = rt(
+        const { height: h, width: r } = ct(
           this.maxWidth,
           this.maxHeight,
           s,
@@ -464,7 +467,7 @@ let d = class extends E {
       (i) => i.value,
       ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
     )}
-          ${J(
+          ${G(
       e.length > 0,
       () => b`<cx-divider></cx-divider>
                 <small>${this.localize.term("autoCropping")}</small>`
@@ -533,7 +536,7 @@ let d = class extends E {
             </cx-option>
           </cx-select>
         </cx-space>
-        ${J(
+        ${G(
       this.focusModes.length > 0,
       () => b`
             <cx-select
@@ -570,21 +573,21 @@ let d = class extends E {
     </cx-details>`;
   }
 };
-d.styles = [O, ut];
+d.styles = [E, gt];
 d.dependencies = {
   "cx-button": q,
-  "cx-details": T,
+  "cx-details": L,
   "cx-divider": nt,
-  "cx-icon": L,
+  "cx-icon": j,
   "cx-icon-button": K,
   "cx-input": tt,
-  "cx-option": G,
-  "cx-select": X,
+  "cx-option": X,
+  "cx-select": Y,
   "cx-space": H,
   "cx-typography": W
 };
 g([
-  j(".details")
+  T(".details")
 ], d.prototype, "base", 2);
 g([
   l({ reflect: !0, type: Boolean })
@@ -641,13 +644,13 @@ g([
   l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
 ], d.prototype, "keepAspectRatio", 2);
 g([
-  v()
+  z()
 ], d.prototype, "invalidWidth", 2);
 g([
-  v()
+  z()
 ], d.prototype, "invalidHeight", 2);
 g([
-  v()
+  z()
 ], d.prototype, "aspectRatio", 2);
 g([
   k("cropMode", { waitUntilFirstUpdate: !0 }),
@@ -661,7 +664,7 @@ g([
 d = g([
   N("cx-asset-link-format-crop")
 ], d);
-const xt = F`
+const ft = D`
   .extension {
     padding: var(--cx-spacing-small) var(--cx-spacing-medium);
     border: solid 1px var(--cx-color-neutral-200);
@@ -673,14 +676,14 @@ const xt = F`
     }
   }
 `;
-var ft = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, et = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? yt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+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 && ft(e, i, a), a;
+  return s && a && yt(e, i, a), a;
 };
-let U = class extends E {
+let U = class extends F {
   constructor() {
-    super(...arguments), this.localize = new D(this), this.value = "", this.items = [];
+    super(...arguments), this.localize = new O(this), this.value = "", this.items = [];
   }
   handleExtensionChange(t) {
     const e = t.target.value;
@@ -713,10 +716,10 @@ let U = class extends E {
     `;
   }
 };
-U.styles = [O, xt];
+U.styles = [E, ft];
 U.dependencies = {
-  "cx-option": G,
-  "cx-select": X,
+  "cx-option": X,
+  "cx-select": Y,
   "cx-space": H,
   "cx-typography": W
 };
@@ -729,19 +732,19 @@ et([
 U = et([
   N("cx-asset-link-format-extension")
 ], U);
-const wt = F`
+const wt = D`
   cx-details::part(base) {
     border-bottom-width: 0;
   }
 `;
-var zt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, _ = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? vt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+var zt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, _ = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? St(e, i) : e, h = t.length - 1, r; h >= 0; h--)
     (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
   return s && a && zt(e, i, a), a;
 };
-let C = class extends E {
+let C = class extends F {
   constructor() {
-    super(...arguments), this.localize = new D(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
   }
   handleValueChange() {
     this.scopedValue = this.value;
@@ -834,18 +837,18 @@ let C = class extends E {
     `;
   }
 };
-C.styles = [O, wt];
+C.styles = [E, wt];
 C.dependencies = {
   "cx-button": q,
-  "cx-details": T,
-  "cx-icon": L,
-  "cx-option": G,
-  "cx-select": X,
+  "cx-details": L,
+  "cx-icon": j,
+  "cx-option": X,
+  "cx-select": Y,
   "cx-space": H,
   "cx-typography": W
 };
 _([
-  j(".details")
+  T(".details")
 ], C.prototype, "base", 2);
 _([
   l({ reflect: !0, type: Boolean })
@@ -860,7 +863,7 @@ _([
   l({ reflect: !0, type: Boolean })
 ], C.prototype, "loading", 2);
 _([
-  v()
+  z()
 ], C.prototype, "scopedValue", 2);
 _([
   k("value")
@@ -871,19 +874,19 @@ _([
 C = _([
   N("cx-asset-link-format-proxy")
 ], C);
-const St = F`
+const bt = D`
   cx-details::part(base) {
     border-bottom-width: 0;
   }
 `;
-var kt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, I = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? bt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+var kt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, I = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? $t(e, i) : e, h = t.length - 1, r; h >= 0; h--)
     (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
   return s && a && kt(e, i, a), a;
 };
-let A = class extends E {
+let A = class extends F {
   constructor() {
-    super(...arguments), this.localize = new D(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
   }
   /**
    * A computed property that checks if the current quality value is invalid.
@@ -979,18 +982,18 @@ let A = class extends E {
     `;
   }
 };
-A.styles = [O, St];
+A.styles = [E, bt];
 A.dependencies = {
   "cx-button": q,
-  "cx-details": T,
-  "cx-icon": L,
+  "cx-details": L,
+  "cx-icon": j,
   "cx-input": tt,
   "cx-space": H,
   "cx-tooltip": at,
   "cx-typography": W
 };
 I([
-  j(".details")
+  T(".details")
 ], A.prototype, "base", 2);
 I([
   l({ reflect: !0, type: Boolean })
@@ -1002,7 +1005,7 @@ I([
   l({ reflect: !0, type: Boolean })
 ], A.prototype, "loading", 2);
 I([
-  v()
+  z()
 ], A.prototype, "scopedValue", 2);
 I([
   k("value")
@@ -1010,7 +1013,7 @@ I([
 A = I([
   N("cx-asset-link-format-quality")
 ], A);
-const $t = F`
+const Ct = D`
   cx-details::part(base) {
     border-bottom-width: 0;
   }
@@ -1032,14 +1035,14 @@ const $t = F`
     flex: 1;
   }
 `;
-var Ct = Object.defineProperty, At = Object.getOwnPropertyDescriptor, S = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? At(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+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 && Ct(e, i, a), a;
+  return s && a && At(e, i, a), a;
 };
-let f = class extends E {
+let f = class extends F {
   constructor() {
-    super(...arguments), this.localize = new D(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 = {
+    super(...arguments), this.localize = new O(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = o.Pixel, this.lastAppliedSetting = {
       [o.Pixel]: { height: 0, width: 0 },
       [o.AspectRatio]: { height: 1, width: 1 }
     }, this.loading = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
@@ -1259,20 +1262,20 @@ let f = class extends E {
     </cx-details>`;
   }
 };
-f.styles = [O, $t];
+f.styles = [E, Ct];
 f.dependencies = {
   "cx-button": q,
-  "cx-details": T,
-  "cx-icon": L,
+  "cx-details": L,
+  "cx-icon": j,
   "cx-icon-button": K,
   "cx-input": tt,
-  "cx-option": G,
-  "cx-select": X,
+  "cx-option": X,
+  "cx-select": Y,
   "cx-space": H,
   "cx-typography": W
 };
 S([
-  j(".details")
+  T(".details")
 ], f.prototype, "base", 2);
 S([
   l({ reflect: !0, type: Boolean })
@@ -1308,13 +1311,13 @@ S([
   l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
 ], f.prototype, "keepAspectRatio", 2);
 S([
-  v()
+  z()
 ], f.prototype, "invalidWidth", 2);
 S([
-  v()
+  z()
 ], f.prototype, "invalidHeight", 2);
 S([
-  v()
+  z()
 ], f.prototype, "aspectRatio", 2);
 S([
   k("cropMode", { waitUntilFirstUpdate: !0 }),
@@ -1328,19 +1331,19 @@ S([
 f = S([
   N("cx-asset-link-format-resize")
 ], f);
-const Rt = F`
+const Mt = D`
   cx-details::part(base) {
     border-bottom-width: 0;
   }
 `;
-var Mt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, V = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? _t(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+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 && Mt(e, i, a), a;
+  return s && a && _t(e, i, a), a;
 };
-let R = class extends E {
+let R = class extends F {
   constructor() {
-    super(...arguments), this.localize = new D(this), this.open = !1, this.value = 0, this.loading = !1, this.invalidValue = !1;
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = 0, this.loading = !1, this.invalidValue = !1;
   }
   handleOpenChange() {
     this.open || this.emit("cx-asset-link-format-rotation-change", {
@@ -1437,18 +1440,18 @@ let R = class extends E {
     `;
   }
 };
-R.styles = [O, Rt];
+R.styles = [E, Mt];
 R.dependencies = {
   "cx-button": q,
-  "cx-button-group": ct,
-  "cx-details": T,
-  "cx-icon": L,
+  "cx-button-group": pt,
+  "cx-details": L,
+  "cx-icon": j,
   "cx-icon-button": K,
   "cx-space": H,
   "cx-typography": W
 };
 V([
-  j(".details")
+  T(".details")
 ], R.prototype, "base", 2);
 V([
   l({ reflect: !0, type: Boolean })
@@ -1460,7 +1463,7 @@ V([
   l({ reflect: !0, type: Boolean })
 ], R.prototype, "loading", 2);
 V([
-  v()
+  z()
 ], R.prototype, "invalidValue", 2);
 V([
   k("open", { waitUntilFirstUpdate: !0 })
@@ -1468,19 +1471,19 @@ V([
 R = V([
   N("cx-asset-link-format-rotation")
 ], R);
-const Pt = F`
+const Ht = D`
   cx-details::part(base) {
     border-bottom-width: 0;
   }
 `;
-var Ht = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, Y = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Wt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+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 && Ht(e, i, a), a;
+  return s && a && Wt(e, i, a), a;
 };
-let P = class extends E {
+let P = class extends F {
   constructor() {
-    super(...arguments), this.localize = new D(this), this.open = !1, this.value = !1;
+    super(...arguments), this.localize = new O(this), this.open = !1, this.value = !1;
   }
   handleApply(t) {
     this.emit("cx-asset-link-format-metadata-change", {
@@ -1541,36 +1544,36 @@ let P = class extends E {
     `;
   }
 };
-P.styles = [O, Pt];
+P.styles = [E, Ht];
 P.dependencies = {
   "cx-button": q,
-  "cx-checkbox": pt,
-  "cx-details": T,
-  "cx-icon": L,
+  "cx-checkbox": dt,
+  "cx-details": L,
+  "cx-icon": j,
   "cx-space": H,
   "cx-tooltip": at,
   "cx-typography": W
 };
-Y([
-  j(".details")
+Z([
+  T(".details")
 ], P.prototype, "base", 2);
-Y([
+Z([
   l({ reflect: !0, type: Boolean })
 ], P.prototype, "open", 2);
-Y([
+Z([
   l({ reflect: !0, type: Boolean })
 ], P.prototype, "value", 2);
-P = Y([
+P = Z([
   N("cx-asset-link-format-metadata")
 ], P);
-var Ft = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Et(e, i) : e, h = t.length - 1, r; h >= 0; h--)
+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 && Ft(e, i, a), a;
+  return s && a && Et(e, i, a), a;
 };
-let p = class extends E {
+let p = class extends F {
   constructor() {
-    super(), this.localize = new D(this), this.baseUrl = void 0, this.accessToken = void 0, this.asset = void 0, this.cropModes = [
+    super(), this.localize = new O(this), this.baseUrl = void 0, this.asset = void 0, this.cropModes = [
       {
         label: "Free",
         value: "free"
@@ -1632,7 +1635,7 @@ let p = class extends E {
     ], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", this.useCustomExtension = !1, this.lastImageSize = {
       height: 0,
       width: 0
-    }, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
+    }, this.hideHeader = !1, this.queryElement = null, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
       height: 0,
       keepAspectRatio: !0,
       ratioHeight: 1,
@@ -1655,7 +1658,7 @@ let p = class extends E {
     }, 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 = ht, this.apiGetCropFocusMode = lt, 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 = rt, this.apiGetCropFocusMode = ht, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
   }
   /**
    * Checks if the crop apply button should be disabled.
@@ -1749,7 +1752,7 @@ let p = class extends E {
    * Returns the transformation string for the asset link.
    */
   get transformationString() {
-    return Z({
+    return J({
       asset: this.asset,
       baseUrl: "",
       parameters: this.parameters,
@@ -1776,7 +1779,7 @@ let p = class extends E {
     ));
   }
   updated(t) {
-    if (t.has("forCropper") && this.handleCropperSelectorChange(), t.has("asset") && this.handleAssetChange(), t.has("proxies") && this.handleProxiesChange(), t.has("activeSetting") && this.handleActiveSettingChange(), t.has("selectedFormat") && this.handleSelectedFormatChange(), t.has("resizeSize") && this.handleResizeSizeChange(), t.has("cropSize") && this.handleCropSizeChange(), t.has("rotation") && this.handleRotationChange(), t.has("cropperElement") && this.handleCropperElementChange(), t.has("selectedFormat")) {
+    if ((t.has("forCropper") || t.has("queryElement")) && this.handleCropperSelectorChange(), t.has("asset") && this.handleAssetChange(), t.has("proxies") && this.handleProxiesChange(), t.has("activeSetting") && this.handleActiveSettingChange(), t.has("selectedFormat") && this.handleSelectedFormatChange(), t.has("resizeSize") && this.handleResizeSizeChange(), t.has("cropSize") && this.handleCropSizeChange(), t.has("rotation") && this.handleRotationChange(), t.has("cropperElement") && this.handleCropperElementChange(), t.has("selectedFormat")) {
       if (!this.asset || !this.selectedFormat || this.selectedFormat.extension === t.get("selectedFormat")?.extension)
         return;
       const e = this.proxies?.find(
@@ -1784,11 +1787,9 @@ let p = class extends E {
       );
       this.loading = !0, this.apiGetTransformAssetLink({
         assetId: this.asset.id,
-        extension: this.selectedFormat.extension,
+        extension: this.asset.extension,
         format: e?.proxyName ?? "",
-        token: this.accessToken,
-        transformations: this.transformationString,
-        useSession: this.useSession
+        transformations: this.transformationString
       }).then((s) => {
         this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === c.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
           height: s.height,
@@ -1796,7 +1797,7 @@ let p = class extends E {
         }, this.selectedFormat = {
           ...this.selectedFormat,
           height: s.height,
-          url: s.relativePath,
+          url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${s.relativePath}` : s.relativePath,
           width: s.width
           /**
            * For local development uses the base URL to construct the full URL.
@@ -1804,7 +1805,7 @@ let p = class extends E {
            */
         });
       });
-      const i = Z({
+      const i = J({
         asset: this.asset,
         baseUrl: "",
         extension: this.selectedFormat.extension,
@@ -1820,6 +1821,9 @@ let p = class extends E {
   getCropSize() {
     return this.cropSize;
   }
+  setActiveSetting(t) {
+    this.activeSetting = t;
+  }
   freezeTransformations() {
     this.frozenIndex = this.transformations.length - 1;
   }
@@ -1834,9 +1838,7 @@ let p = class extends E {
       assetId: this.asset.id,
       extension: this.selectedFormat.extension,
       format: t?.proxyName ?? "",
-      token: this.accessToken,
-      transformations: this.transformationString,
-      useSession: this.useSession
+      transformations: this.transformationString
     });
     if (this.loading = !1, !e?.relativePath || !this.selectedFormat)
       return;
@@ -1871,14 +1873,14 @@ let p = class extends E {
       ...this.selectedFormat,
       height: e.height,
       keepMetadata: i,
-      url: e.relativePath,
+      url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${e.relativePath}` : e.relativePath,
       width: e.width
       /**
        * For local development uses the base URL to construct the full URL.
        * url: `${this.baseUrl}/${response.relativePath}`,
        */
     };
-    const s = Z({
+    const s = J({
       asset: this.asset,
       baseUrl: "",
       extension: this.selectedFormat.extension,
@@ -1900,7 +1902,7 @@ let p = class extends E {
     ), this.cropperElement.loadable = !0);
   }
   handleCropperSelectorChange() {
-    this.forCropper && (this.cropperElement = document.getElementById(this.forCropper));
+    this.forCropper && (this.queryElement ? this.cropperElement = this.queryElement.querySelector(`#${this.forCropper}`) : this.cropperElement = document.getElementById(this.forCropper));
   }
   handleAssetChange() {
     if (!this.asset)
@@ -2043,8 +2045,8 @@ let p = class extends E {
     ratioHeight: r,
     ratioWidth: m,
     unit: y,
-    useCropMode: w,
-    width: z
+    useCropMode: v,
+    width: w
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
@@ -2052,12 +2054,12 @@ let p = class extends E {
     const x = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
-      cropWidth: z,
+      cropWidth: w,
       imageUrl: this.selectedFormat.url
     });
     if (x) {
       let n = a, $ = h;
-      i || (n = x.height * 100 / this.selectedFormat.height), z || ($ = x.width * 100 / this.selectedFormat.width), this.cropSize = {
+      i || (n = x.height * 100 / this.selectedFormat.height), w || ($ = x.width * 100 / this.selectedFormat.width), this.cropSize = {
         ...this.cropSize,
         height: x.height,
         percentageHeight: n ?? this.cropSize.percentageHeight,
@@ -2065,7 +2067,7 @@ let p = class extends E {
         width: x.width,
         x: x.x * 100 / this.selectedFormat.width,
         y: x.y * 100 / this.selectedFormat.height,
-        ...w ? {
+        ...v ? {
           cropMode: e,
           focusMode: "manual",
           keepAspectRatio: !1
@@ -2088,25 +2090,25 @@ let p = class extends E {
       x: a,
       y: h
     } = e, r = this.cropSize.percentageWidth !== s, m = this.cropSize.percentageHeight !== i;
-    let y = this.cropSize.height, w = this.cropSize.width;
-    r && (w = Math.round(s * this.selectedFormat.width / 100)), m && (y = Math.round(
+    let y = this.cropSize.height, v = this.cropSize.width;
+    r && (v = Math.round(s * this.selectedFormat.width / 100)), m && (y = Math.round(
       i * this.selectedFormat.height / 100
     ));
-    const z = this.cropSize.focusMode;
+    const w = this.cropSize.focusMode;
     this.focusModes.find(
-      (n) => n.value === z
+      (n) => n.value === w
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
-      focusMode: z,
+      focusMode: w,
       height: y,
       percentageHeight: i,
       percentageWidth: s,
-      width: w
+      width: v
     }) : this.cropSize = {
       ...this.cropSize,
       height: y,
       percentageHeight: i,
       percentageWidth: s,
-      width: w,
+      width: v,
       x: a,
       y: h
     };
@@ -2176,20 +2178,20 @@ let p = class extends E {
     const e = this.cropSize.unit;
     if (t.detail.unit === o.AspectRatio) {
       const i = t.detail.width / t.detail.height, s = Math.min(
-        Math.max(Math.round(this.cropSize.height * i), 1),
+        Math.max(Math.round(this.cropSize.height * i), 0),
         this.resizeSize.width
       ), a = Math.min(
-        Math.max(Math.round(s / i), 1),
+        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 w = this.cropSize.cropMode;
+      let v = this.cropSize.cropMode;
       this.cropModes.find(
-        (x) => x.value === w
-      )?.auto && (w = "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 = {
+        (x) => x.value === v
+      )?.auto && (v = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = h, this.cropSize.percentageWidth = r, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
         ...this.cropSize,
-        cropMode: w,
+        cropMode: v,
         height: a,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: h,
@@ -2283,8 +2285,8 @@ let p = class extends E {
     if (t.detail.unit === o.AspectRatio) {
       const e = t.detail.width / t.detail.height, i = Math.max(
         Math.round(this.lastResizeSize[o.Pixel].height * e),
-        1
-      ), s = Math.max(Math.round(i / e), 1);
+        0
+      ), s = Math.max(Math.round(i / e), 0);
       this.resizeSize = {
         ...this.resizeSize,
         height: s,
@@ -2297,10 +2299,10 @@ let p = class extends E {
     } else
       this.resizeSize = {
         ...this.resizeSize,
-        height: Math.max(t.detail.height, 1),
+        height: Math.max(t.detail.height, 0),
         keepAspectRatio: t.detail.keepAspectRatio,
         unit: t.detail.unit,
-        width: Math.max(t.detail.width, 1)
+        width: Math.max(t.detail.width, 0)
       };
   }
   onResizeApply(t) {
@@ -2399,30 +2401,36 @@ let p = class extends E {
       @cx-show=${this.onDetailsShow}
       @cx-hide=${this.onDetailsHide}
     >
-      <cx-space
-        class="asset-link-format__section-header"
-        direction="horizontal"
-        spacing="small"
-        align-items="center"
-        justify-content="space-between"
-      >
-        <cx-typography variant="body3">
-          ${this.localize.term("transformations")}
-        </cx-typography>
-        <cx-button
-          class="asset-link-format__undo"
-          variant="custom"
-          ?disabled=${this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1}
-          @click=${this.handleUndo}
-        >
-          ${this.localize.term("undo")}
-        </cx-button>
-      </cx-space>
+      ${G(
+      !this.hideHeader,
+      () => b`
+          <cx-space
+            class="asset-link-format__section-header"
+            direction="horizontal"
+            spacing="small"
+            align-items="center"
+            justify-content="space-between"
+          >
+            <cx-typography variant="body3">
+              ${this.localize.term("transformations")}
+            </cx-typography>
+            <cx-button
+              class="asset-link-format__undo"
+              variant="custom"
+              ?disabled=${this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1}
+              @click=${this.handleUndo}
+            >
+              ${this.localize.term("undo")}
+            </cx-button>
+          </cx-space>
+        `,
+      () => lt
+    )}
       <cx-asset-link-format-proxy
         class="asset-link-format__details"
+        value=${this.selectedProxy ?? ""}
         ?open=${this.activeSetting === "cx-asset-link-format-proxy"}
         .items=${this.formats}
-        .value=${this.selectedProxy}
         ?loading=${this.loading && this.lastAction === c.Proxy}
         @cx-asset-link-format-proxy-change=${this.onProxyChange}
       ></cx-asset-link-format-proxy>
@@ -2490,7 +2498,7 @@ let p = class extends E {
         @cx-asset-link-format-metadata-change=${this.onMetadataChange}
       >
       </cx-asset-link-format-metadata>
-      ${J(
+      ${G(
       this.useCustomExtension,
       () => b`
           <cx-asset-link-format-extension
@@ -2503,7 +2511,7 @@ let p = class extends E {
     </div>`;
   }
 };
-p.styles = [O, dt];
+p.styles = [E, ut];
 p.dependencies = {
   "cx-asset-link-format-crop": d,
   "cx-asset-link-format-extension": U,
@@ -2519,9 +2527,6 @@ p.dependencies = {
 u([
   l({ attribute: "base-url", reflect: !0, type: String })
 ], p.prototype, "baseUrl", 2);
-u([
-  l({ attribute: "access-token", reflect: !1, type: String })
-], p.prototype, "accessToken", 2);
 u([
   l({ reflect: !1, type: Object })
 ], p.prototype, "asset", 2);
@@ -2556,37 +2561,43 @@ u([
   l({ attribute: "last-image-size", reflect: !1, type: Object })
 ], p.prototype, "lastImageSize", 2);
 u([
-  v()
+  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([
-  v()
+  z()
 ], p.prototype, "selectedFormat", 2);
 u([
-  v()
+  z()
 ], p.prototype, "resizeSize", 2);
 u([
-  v()
+  z()
 ], p.prototype, "cropSize", 2);
 u([
-  v()
+  z()
 ], p.prototype, "rotation", 2);
 u([
-  v()
+  z()
 ], p.prototype, "defaultSize", 2);
 u([
-  v()
+  z()
 ], p.prototype, "cropperElement", 2);
 u([
-  v()
+  z()
 ], p.prototype, "parameters", 2);
 u([
-  v()
+  z()
 ], p.prototype, "loading", 2);
 u([
-  v()
+  z()
 ], p.prototype, "lastAction", 2);
 u([
-  v()
+  z()
 ], p.prototype, "frozenIndex", 2);
 u([
   k(["transformations"])