@orangelogic/design-system 2.145.0 → 2.146.0

package/library/chunks/{asset-link-format.D6XVEha7.js → asset-link-format.CU3qvBEO.js}

@@ -6,21 +6,21 @@ import { n as h, C as N } from "./lib-cortex-element.CVMmyPMC.js";
 import { h as P, a as Et, C as It, S as Nt, b as Ot, c as Lt, d as Ut } from "./endpoints.Bn_YviaU.js";
 import { M as At, U as o, T as c } from "./asset-link-format.QzzboHHE.js";
 import "./browser.BHOCIF_A.js";
-import { i as O, x as A, E as qt } from "./lit-element.jLBm65_O.js";
+import { i as O, x as S, E as qt } from "./lit-element.jLBm65_O.js";
 import "./form.BSqXLytJ.js";
 import { L } from "./i18n.DYXys45m.js";
-import { a as jt } from "./string.BmBJ_BLT.js";
+import { a as Bt } from "./string.BmBJ_BLT.js";
 import "./date-picker.DTUICGb9.js";
 import "./content-builder.DZRw6hpX.js";
 import "./unsafe-html.Dff7-rCx.js";
-import { b as Bt } from "./_baseUniq.CoXu-orP.js";
+import { b as jt } from "./_baseUniq.CoXu-orP.js";
 import { c as U } from "./component.styles.CRO4Odto.js";
 import { c as q } from "./custom-element.L4WJXn1j.js";
 import { w as R } from "./watch.K-dbDP6P.js";
-import { s as zt, c as et } from "./number.B4PQLJIg.js";
+import { s as zt, c as et } from "./number.CtCaI0T_.js";
 import { b as it } from "./transformation.c-RS37zA.js";
 import { r as v } from "./state.CSDxrqLd.js";
-import { n as E } from "./when.Dr1es41R.js";
+import { n as F } from "./when.Dr1es41R.js";
 import Z from "../components/details.js";
 import Vt from "../components/divider.js";
 import { C as Y } from "./icon.CsF1BoUl.js";
@@ -28,7 +28,7 @@ import { C as mt } from "./icon-button.B0L-_zT9.js";
 import { C as ft } from "./input.CSI9KLz7.js";
 import { C as nt } from "./option.BweUpygr.js";
 import ht from "../components/select.js";
-import { c as Gt } from "./image.BzmclWBR.js";
+import { c as Gt } from "./image.QVlPFadX.js";
 import { e as J } from "./query.BBf1UFkC.js";
 import { c as tt } from "./repeat.CFjcER6_.js";
 import { o as I } from "./style-map.llVFPd__.js";
@@ -36,7 +36,7 @@ import Ht from "../components/tooltip.js";
 import Qt from "../components/button-group.js";
 import { C as Kt } from "./checkbox.aQnF4Zc3.js";
 function Xt(t) {
-  return t && t.length ? Bt(t) : [];
+  return t && t.length ? jt(t) : [];
 }
 function Zt(t) {
   return typeof t == "object" && t !== null && "URI" in t;
@@ -166,7 +166,7 @@ async function Tt({
   token: y,
   useSession: m
 }) {
-  const S = e?.map(oe);
+  const b = e?.map(oe);
   try {
     return (await P.request({
       baseURL: l,
@@ -174,7 +174,7 @@ async function Tt({
       method: "GET",
       params: {
         CountPerPage: t,
-        Fields: Xt(S),
+        Fields: Xt(b),
         Format: "json",
         GetPermanentAssetsPaths: i || void 0,
         PageNumber: a,
@@ -219,7 +219,7 @@ async function re({
       params: {
         SourceAssetFormat: i,
         SourceAssetRecordID: t,
-        TargetExtension: jt(e),
+        TargetExtension: Bt(e),
         Token: a || void 0,
         Transformations: r,
         UseSession: n || void 0
@@ -273,14 +273,14 @@ async function xi({
         token: r
       })
     )
-  ), m = new Map(s.map((u, $) => [u, $])), S = y.flatMap((u) => u.items).map((u) => {
+  ), m = new Map(s.map((u, $) => [u, $])), b = y.flatMap((u) => u.items).map((u) => {
     let $ = w(u, rt);
     return $ === "" && ($ = w(u, ot)), {
       name: $,
       originalUrl: w(u, X),
       recordId: w(u, at),
       ...n.reduce(
-        (Q, b) => (Q[b] = w(u, b), Q),
+        (Q, A) => (Q[A] = w(u, A), Q),
         {}
       )
     };
@@ -290,7 +290,7 @@ async function xi({
     (u, $) => u + $.totalCount,
     0
   );
-  return { facets: [], items: S, totalCount: C };
+  return { facets: [], items: b, totalCount: C };
 }
 function w(t, e) {
   const i = t[e];
@@ -308,11 +308,11 @@ async function yi({
   searchTerm: f,
   securityByPassToken: y,
   sortOrder: m,
-  token: S
+  token: b
 }) {
   if (!e && !l)
     return { facets: [], items: [], totalCount: 0 };
-  const C = (i?.filter((b) => b && typeof b == "string") ?? []).map((b) => b.replace("%20", " ")), u = {
+  const C = (i?.filter((A) => A && typeof A == "string") ?? []).map((A) => A.replace("%20", " ")), u = {
     directParentFolderIdentifier: e,
     parentFolderIdentifier: l,
     ...r.length > 0 ? { docType: [At.Image, At.Audio] } : {}
@@ -341,27 +341,27 @@ async function yi({
     query: u,
     securityByPassToken: y,
     sort: void 0,
-    token: S
-  }), Q = $.items.map((b) => {
-    let K = w(b, kt), ct = w(b, rt), xt = w(b, ut);
-    K && !K.startsWith(".") && (K = "." + K), ct === "" && (ct = w(b, ot)), K.toLowerCase() === ".gif" && (xt = w(b, X));
-    const yt = w(b, at);
+    token: b
+  }), Q = $.items.map((A) => {
+    let K = w(A, kt), ct = w(A, rt), xt = w(A, ut);
+    K && !K.startsWith(".") && (K = "." + K), ct === "" && (ct = w(A, ot)), K.toLowerCase() === ".gif" && (xt = w(A, X));
+    const yt = w(A, at);
     return {
-      docSubType: w(b, Mt),
-      docType: w(b, vt) || "",
+      docSubType: w(A, Mt),
+      docType: w(A, vt) || "",
       extension: K,
-      height: w(b, Pt) || "0",
+      height: w(A, Pt) || "0",
       id: yt,
-      identifier: w(b, Rt),
+      identifier: w(A, Rt),
       imageUrl: xt,
       name: ct,
-      originalUrl: w(b, X),
+      originalUrl: w(A, X),
       recordId: yt,
-      size: w(b, Ct) || "0 MB",
-      tags: w(b, $t),
-      width: w(b, _t) || "0",
+      size: w(A, Ct) || "0 MB",
+      tags: w(A, $t),
+      width: w(A, _t) || "0",
       ...C.reduce(
-        (St, bt) => (St[bt] = w(b, bt), St),
+        (St, bt) => (St[bt] = w(A, bt), St),
         {}
       )
     };
@@ -502,7 +502,7 @@ var de = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, x = (t, e,
 };
 let g = class extends N {
   constructor() {
-    super(...arguments), this.localize = new L(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 L(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.noRatioModes = !1, this.lastAppliedSetting = {
       [o.Pixel]: {
         height: 0,
         percentageHeight: 100,
@@ -721,35 +721,38 @@ let g = class extends N {
   }
   render() {
     const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
-    return A`<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=${I({
-      width: "100%"
-    })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${tt(
-      t,
-      (i) => i.value,
-      ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
-    )}
-          ${E(
-      e.length > 0,
-      () => A`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
-    )}
-          ${tt(
-      e,
-      (i) => i.value,
-      ({ label: i, value: s }) => A`<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 === 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">
+    return S`<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">${F(
+      !this.noRatioModes,
+      () => S`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${I({
+        width: "100%"
+      })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${tt(
+        t,
+        (i) => i.value,
+        ({ label: i, value: s }) => S`<cx-option value=${s}>${i}</cx-option>`
+      )}
+              ${F(
+        e.length > 0,
+        () => S`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
+      )}
+              ${tt(
+        e,
+        (i) => i.value,
+        ({ label: i, value: s }) => S`<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 === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-change=${this.handleInputChange} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 W
               </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-crop-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${I({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
     })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} ?disabled=${this.loading} @cx-change=${this.handleInputChange} @cx-input=${this.handleHeightChange} required><cx-typography slot="prefix" variant="body3" part="input-label">
                 H
-              </cx-typography></cx-input></div><cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${E(
+              </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>${F(
       this.focusModes.length > 0,
-      () => A`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${I({
+      () => S`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${I({
         width: "100%"
       })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${tt(
         this.focusModes,
         (i) => i.value,
-        ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => S`<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=${I({
       marginLeft: "auto"
@@ -805,6 +808,9 @@ x([
 x([
   h({ attribute: "disabled-apply", reflect: !0, type: Boolean })
 ], g.prototype, "disabledApply", 2);
+x([
+  h({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
+], g.prototype, "noRatioModes", 2);
 x([
   h({ attribute: "last-applied-setting", reflect: !1, type: Object })
 ], g.prototype, "lastAppliedSetting", 2);
@@ -853,7 +859,7 @@ var fe = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, gt = (t, e
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
   return s && a && fe(e, i, a), a;
 };
-let B = class extends N {
+let j = class extends N {
   constructor() {
     super(...arguments), this.localize = new L(this), this.value = "", this.items = [];
   }
@@ -864,15 +870,15 @@ let B = class extends N {
     });
   }
   render() {
-    return A`<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}>${tt(
+    return S`<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}>${tt(
       this.items,
       (t) => t.value,
-      (t) => A`<cx-option value=${t.value}>${t.displayName}</cx-option>`
+      (t) => S`<cx-option value=${t.value}>${t.displayName}</cx-option>`
     )}</cx-select></cx-space>`;
   }
 };
-B.styles = [U, me];
-B.dependencies = {
+j.styles = [U, me];
+j.dependencies = {
   "cx-option": nt,
   "cx-select": ht,
   "cx-space": D,
@@ -880,13 +886,13 @@ B.dependencies = {
 };
 gt([
   h({ reflect: !0, type: String })
-], B.prototype, "value", 2);
+], j.prototype, "value", 2);
 gt([
   h({ reflect: !1, type: Array })
-], B.prototype, "items", 2);
-B = gt([
+], j.prototype, "items", 2);
+j = gt([
   q("cx-asset-link-format-extension")
-], B);
+], j);
 const xe = O`cx-details::part(base){border-bottom-width:0}`;
 var ye = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, H = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Se(e, i) : e, r = t.length - 1, n; r >= 0; r--)
@@ -939,10 +945,10 @@ let _ = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return A`<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}>${tt(
+    return S`<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}>${tt(
       this.items,
       (t) => t.id,
-      (t) => A`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
+      (t) => S`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
     )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${I({
       "margin-left": "auto"
     })} ?disabled=${this.scopedValue === this.value} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
@@ -991,7 +997,7 @@ var Ae = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, G = (t, e,
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
   return s && a && Ae(e, i, a), a;
 };
-let F = class extends N {
+let E = class extends N {
   constructor() {
     super(...arguments), this.localize = new L(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
   }
@@ -1037,13 +1043,13 @@ let F = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return A`<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=${I({
+    return S`<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=${I({
       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>`;
   }
 };
-F.styles = [U, be];
-F.dependencies = {
+E.styles = [U, be];
+E.dependencies = {
   "cx-button": V,
   "cx-details": Z,
   "cx-icon": Y,
@@ -1054,25 +1060,25 @@ F.dependencies = {
 };
 G([
   J(".details")
-], F.prototype, "base", 2);
+], E.prototype, "base", 2);
 G([
   h({ reflect: !0, type: Boolean })
-], F.prototype, "open", 2);
+], E.prototype, "open", 2);
 G([
   h({ reflect: !0, type: Number })
-], F.prototype, "value", 2);
+], E.prototype, "value", 2);
 G([
   h({ reflect: !0, type: Boolean })
-], F.prototype, "loading", 2);
+], E.prototype, "loading", 2);
 G([
   v()
-], F.prototype, "scopedValue", 2);
+], E.prototype, "scopedValue", 2);
 G([
   R("value")
-], F.prototype, "handleValueChange", 1);
-F = G([
+], E.prototype, "handleValueChange", 1);
+E = G([
   q("cx-asset-link-format-quality")
-], F);
+], E);
 const we = O`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.resize__unit-select{width:120px}.resize__input-group{flex:1;display:flex}`;
 var ve = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, k = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? ke(e, i) : e, r = t.length - 1, n; r >= 0; r--)
@@ -1215,7 +1221,7 @@ let z = class extends N {
     });
   }
   render() {
-    return A`<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 === 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 S`<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 === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 W
               </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-resize-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${I({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
@@ -1296,7 +1302,7 @@ z = k([
   q("cx-asset-link-format-resize")
 ], z);
 const Ce = O`cx-details::part(base){border-bottom-width:0}`;
-var Re = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, j = (t, e, i, s) => {
+var Re = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, B = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? $e(e, i) : e, r = t.length - 1, n; r >= 0; r--)
     (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
   return s && a && Re(e, i, a), a;
@@ -1338,7 +1344,7 @@ let M = class extends N {
     });
   }
   render() {
-    return A`<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=${I({
+    return S`<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=${I({
       flex: "none",
       width: "80px"
     })} @cx-input=${this.handleRotationChange}></cx-input><cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === this.lastAppliedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
@@ -1354,28 +1360,28 @@ M.dependencies = {
   "cx-space": D,
   "cx-typography": T
 };
-j([
+B([
   J(".details")
 ], M.prototype, "base", 2);
-j([
+B([
   h({ reflect: !0, type: Boolean })
 ], M.prototype, "open", 2);
-j([
+B([
   h({ reflect: !0, type: Number })
 ], M.prototype, "value", 2);
-j([
+B([
   h({ attribute: "default-value", reflect: !0, type: Number })
 ], M.prototype, "defaultValue", 2);
-j([
+B([
   h({ reflect: !0, type: Boolean })
 ], M.prototype, "loading", 2);
-j([
+B([
   h({ attribute: "last-applied-value", reflect: !0, type: Number })
 ], M.prototype, "lastAppliedValue", 2);
-j([
+B([
   R("open", { waitUntilFirstUpdate: !0 })
 ], M.prototype, "handleOpenChange", 1);
-M = j([
+M = B([
   q("cx-asset-link-format-rotation")
 ], M);
 const Pe = O`cx-details::part(base){border-bottom-width:0}`;
@@ -1410,7 +1416,7 @@ let W = class extends N {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return A`<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 S`<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>`;
   }
 };
 W.styles = [U, Pe];
@@ -1825,12 +1831,12 @@ let p = class extends N {
         (m) => m.key === c.Crop && m.value.width && m.value.height
       );
       if (r) {
-        const { focusMode: m, height: S, unit: C, width: u, x: $ = 0, y: Q = 0 } = r.value;
+        const { focusMode: m, height: b, unit: C, width: u, x: $ = 0, y: Q = 0 } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: m ?? "manual",
-          height: S,
+          height: b,
           percentageHeight: 100,
           percentageWidth: 100,
           unit: C ?? o.Pixel,
@@ -1855,11 +1861,11 @@ let p = class extends N {
         (m) => m.key === c.Resize && (m.value.width || m.value.height)
       );
       if (n) {
-        const { height: m = 0, unit: S, width: C = 0 } = n.value;
+        const { height: m = 0, unit: b, width: C = 0 } = n.value;
         this.resizeSize = {
           ...this.resizeSize,
           height: m,
-          unit: S ?? o.Pixel,
+          unit: b ?? o.Pixel,
           width: C
         };
       } else
@@ -2119,22 +2125,22 @@ let p = class extends N {
     if (!this.selectedFormat?.url || e === "manual")
       return;
     this.loading = !0, this.lastAction = c.Crop;
-    const S = await this.apiGetCropFocusMode({
+    const b = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
       cropWidth: m,
       imageUrl: this.selectedFormat.url
     });
-    if (S) {
+    if (b) {
       let C = a, u = r;
-      i || (C = S.height * 100 / this.selectedFormat.height), m || (u = S.width * 100 / this.selectedFormat.width), this.cropSize = {
+      i || (C = b.height * 100 / this.selectedFormat.height), m || (u = b.width * 100 / this.selectedFormat.width), this.cropSize = {
         ...this.cropSize,
-        height: S.height,
+        height: b.height,
         percentageHeight: C ?? this.cropSize.percentageHeight,
         percentageWidth: u ?? this.cropSize.percentageWidth,
-        width: S.width,
-        x: S.x * 100 / this.selectedFormat.width,
-        y: S.y * 100 / this.selectedFormat.height,
+        width: b.width,
+        x: b.x * 100 / this.selectedFormat.width,
+        y: b.y * 100 / this.selectedFormat.height,
         ...y ? {
           cropMode: e,
           focusMode: "manual",
@@ -2259,7 +2265,7 @@ let p = class extends N {
       l + n > 100 && (l = 100 - n), f + r > 100 && (f = 100 - r);
       let y = this.cropSize.cropMode;
       this.cropModes.find(
-        (S) => S.value === y
+        (b) => b.value === y
       )?.auto && (y = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = n, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
         ...this.cropSize,
         cropMode: y,
@@ -2311,7 +2317,7 @@ let p = class extends N {
   }
   onCropApply(t) {
     if (this.preResetTransformations = void 0, this.lastAction = c.Crop, !this.asset) {
-      const { focusMode: l, height: f, unit: y, width: m, x: S, y: C } = this.cropSize, u = this.focusModes.find(
+      const { focusMode: l, height: f, unit: y, width: m, x: b, y: C } = this.cropSize, u = this.focusModes.find(
         ($) => $.value === l
       )?.auto ?? !1;
       (f || m) && this.upsertTransformation({
@@ -2322,7 +2328,7 @@ let p = class extends N {
           isFocusModeAuto: u,
           unit: y,
           width: m,
-          x: Number.isFinite(S) ? S : void 0,
+          x: Number.isFinite(b) ? b : void 0,
           y: Number.isFinite(C) ? C : void 0
         }
       });
@@ -2525,43 +2531,43 @@ let p = class extends N {
     this.selectedProxy = t ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "", this.transformations = [], this.frozenIndex = -1, this.syncQuality();
   }
   render() {
-    return A`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${E(
+    return S`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${F(
       !this.hideHeader,
-      () => A`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${E(this.canReset, () => A`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${this.transformations.length === 0} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
+      () => S`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${F(this.canReset, () => S`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${this.transformations.length === 0} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
       () => qt
     )}
-      ${E(
+      ${F(
       !this.noFormat,
-      () => A`<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 === c.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
+      () => S`<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 === c.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
     )}
-      ${E(
+      ${F(
       !this.noCrop,
-      () => A`<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.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
+      () => S`<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} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
     )}
-      ${E(
+      ${F(
       !this.noResize,
-      () => A`<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.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
+      () => S`<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.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
     )}
-      ${E(
+      ${F(
       !this.noRotate,
-      () => A`<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"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} 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>${E(
+      () => S`<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"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} 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>${F(
       !this.noMetadata,
-      () => A`<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>`
+      () => S`<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>`
     )}
-      ${E(
+      ${F(
       this.useCustomExtension,
-      () => A`<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>`
+      () => S`<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 = [U, ce];
 p.dependencies = {
   "cx-asset-link-format-crop": g,
-  "cx-asset-link-format-extension": B,
+  "cx-asset-link-format-extension": j,
   "cx-asset-link-format-metadata": W,
   "cx-asset-link-format-proxy": _,
-  "cx-asset-link-format-quality": F,
+  "cx-asset-link-format-quality": E,
   "cx-asset-link-format-resize": z,
   "cx-asset-link-format-rotation": M,
   "cx-button": V,

package/library/chunks/{image.BzmclWBR.js → image.QVlPFadX.js}

@@ -1,4 +1,4 @@
-import { r as g } from "./number.B4PQLJIg.js";
+import { r as g } from "./number.CtCaI0T_.js";
 function m(e, t, i, o) {
   const a = e / t, n = i / o;
   let c = e, r = t;