@orangelogic/design-system 2.78.0 → 2.79.0

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

@@ -1,10 +1,10 @@
-import "../chunks/cropper.D1lO3pl-.js";
-import { C as q } from "../chunks/button.DS64Tr8Z.js";
+import "../chunks/cropper.DTokTzP9.js";
+import { C as q } from "../chunks/button.B-ktz-w4.js";
 import H from "./space.js";
-import { C as W } from "../chunks/typography.oDzoLbZS.js";
+import { C as W } from "../chunks/typography.DJC_UXgs.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.DWZ2Lzb6.js";
-import { c as E } from "../chunks/component.styles.DMSLciL5.js";
+import { c as E } from "../chunks/component.styles.CRO4Odto.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.BUW7B9hr.js";
@@ -16,9 +16,9 @@ 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 { C as K } from "../chunks/icon-button.C3eqeQl9.js";
+import { C as K } from "../chunks/icon-button.BuhCp--_.js";
 import tt from "./input.js";
-import { C as X } from "../chunks/option.Csqefux_.js";
+import { C as X } from "../chunks/option.DljDoFx4.js";
 import Y from "./select.js";
 import { c as ct } from "../chunks/image.mbpyiQpQ.js";
 import { e as T } from "../chunks/query.BBf1UFkC.js";
@@ -27,43 +27,7 @@ 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;
-  }
-`;
+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);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: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,
@@ -189,28 +153,7 @@ function J({
     );
   }), 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;
-  }
-`;
+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{flex:1;display:flex}`;
 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);
@@ -437,140 +380,39 @@ let u = class extends F {
   }
   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 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({
       width: "100%"
-    })}
-          @cx-change=${this.onCropModeChange}
-          ?disabled=${this.loading}
-        >
-          ${Q(
+    })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${Q(
       t,
       (i) => i.value,
       ({ label: i, value: s }) => b`<cx-option value=${s}>${i}</cx-option>`
     )}
           ${G(
       e.length > 0,
-      () => b`<cx-divider></cx-divider>
-                <small>${this.localize.term("autoCropping")}</small>`
+      () => b`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
     )}
           ${Q(
       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">
+    )}</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">
                 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=${M({
       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")} 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">
                 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=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select></cx-space>${G(
       this.focusModes.length > 0,
-      () => b`
-            <cx-select
-              data-testid="cx-asset-link-format-crop-focus-mode"
-              value=${this.focusMode}
-              hoist
-              style=${M({
+      () => b`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${M({
         width: "100%"
-      })}
-              @cx-change=${this.onFocusModeChange}
-              ?disabled=${this.loading || this.selectedMode?.disabledSize}
-            >
-              ${Q(
+      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${Q(
         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({
+      )}</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({
       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>`;
   }
 };
 u.styles = [E, gt];
@@ -664,18 +506,7 @@ g([
 u = g([
   N("cx-asset-link-format-crop")
 ], u);
-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%;
-    }
-  }
-`;
+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);
@@ -692,28 +523,11 @@ 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 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(
       this.items,
       (t) => t.value,
-      (t) => b`
-              <cx-option value=${t.value}>${t.displayName}</cx-option>
-            `
-    )}
-        </cx-select>
-      </cx-space>
-    `;
+      (t) => b`<cx-option value=${t.value}>${t.displayName}</cx-option>`
+    )}</cx-select></cx-space>`;
   }
 };
 U.styles = [E, ft];
@@ -732,11 +546,7 @@ et([
 U = et([
   N("cx-asset-link-format-extension")
 ], U);
-const wt = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-`;
+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);
@@ -788,53 +598,13 @@ 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 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(
       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) => 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({
       "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];
@@ -874,11 +644,7 @@ _([
 C = _([
   N("cx-asset-link-format-proxy")
 ], C);
-const bt = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-`;
+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);
@@ -930,56 +696,9 @@ 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 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({
       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];
@@ -1013,28 +732,7 @@ I([
 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;
-  }
-`;
+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{flex:1;display:flex}`;
 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);
@@ -1176,90 +874,15 @@ let f = class extends F {
     });
   }
   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 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">
                 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=${M({
       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")} 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">
                 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=${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({
       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];
@@ -1331,11 +954,7 @@ S([
 f = S([
   N("cx-asset-link-format-resize")
 ], f);
-const Mt = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-`;
+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);
@@ -1380,64 +999,10 @@ let R = class extends F {
     });
   }
   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 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({
       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} 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>`;
   }
 };
 R.styles = [E, Mt];
@@ -1471,11 +1036,7 @@ V([
 R = V([
   N("cx-asset-link-format-rotation")
 ], R);
-const Ht = D`
-  cx-details::part(base) {
-    border-bottom-width: 0;
-  }
-`;
+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);
@@ -1507,41 +1068,7 @@ 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 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>`;
   }
 };
 P.styles = [E, Ht];
@@ -2398,119 +1925,14 @@ let p = class extends F {
     });
   }
   render() {
-    return b`<div
-      class="asset-link-format"
-      @cx-show=${this.onDetailsShow}
-      @cx-hide=${this.onDetailsHide}
-    >
-      ${G(
+    return b`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${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>
-        `,
+      () => 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 || 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>
-      <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(
+    )}<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><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>
-        `
-    )}
-    </div>`;
+      () => 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>`
+    )}</div>`;
   }
 };
 p.styles = [E, ut];