@orangelogic/design-system 2.160.0 → 2.162.0

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.160.0",
+  "version": "2.162.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/Page/Page.d.ts

@@ -20,6 +20,12 @@ export default class Page extends Module implements IPage {
     dataChanging: boolean;
     pageSizes: number[];
     mode: 'remote' | 'local' | 'progressive_load' | 'progressive_scroll';
+    /**
+     * Coalesces bursts of 'row-added'/'row-deleted' (e.g. a streaming loader
+     * calling addData() per chunk, which dispatches one event per row) into a
+     * single pipeline refresh instead of one full re-render per row.
+     */
+    private rowsUpdatedScheduled;
     constructor(table: Tabulator);
     options(key: string): any;
     initialize(): void;

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/Validate/Validate.d.ts

@@ -106,6 +106,12 @@ export default class Validate extends Module {
      * responsive.
      */
     private validateColumnsOnMainThread;
+    /**
+     * Only style cells that already have real DOM (`cell.loaded`). Calling
+     * `getElement()` on an unloaded cell forces it to generate a detached
+     * element — the virtual renderer's later `layoutCell()` call (on scroll/
+     * page change) is what actually applies the style once the cell is real.
+     */
     private applyCellInvalidState;
     private clearCellInvalidState;
     private runSuppressed;

package/library/packages/molecules/src/annotator/annotator.d.ts

@@ -40,7 +40,11 @@ export default class CxAnnotator extends CortexElement {
     markerArea: MarkerArea | null;
     color: string;
     lineWeight: number;
-    /** Internal cache of the latest annotation state, kept in sync with the marker area. */
+    /**
+     * Last known good annotation state. Synced from the marker area only when
+     * its state has non-zero dimensions, so hidden (0×0) captures never
+     * replace a valid recovery source.
+     */
     private annotationStateValue;
     private resizeObserver;
     get currentMarker(): import('@markerjs/markerjs3').MarkerBase | undefined;
@@ -58,6 +62,15 @@ export default class CxAnnotator extends CortexElement {
     private destroyMarkerArea;
     private initMarkerArea;
     private restoreAnnotationState;
+    /**
+     * Builds the state to pass to markerjs3's restoreState. A state that
+     * carries markers keeps its own width/height (the canvas size the markers
+     * were drawn at) so markerjs3 rescales them to the current target size;
+     * overriding those dimensions here would skip that scaling and render the
+     * markers at their original pixel coordinates on a different-sized canvas.
+     * Empty or dimensionless states adopt the target size instead.
+     */
+    private toRestorableState;
     private handleAreaStateChange;
     private handleMarkerAreaShow;
     /**

package/library/packages/molecules/src/pdf-viewer-toolbar/pdf-viewer-toolbar.d.ts

@@ -90,6 +90,7 @@ export default class CxPdfViewerToolbar extends CortexElement {
     private handleMoreOptionsSelect;
     private renderLeft;
     private static getScaleOptions;
+    private renderCustomScaleOption;
     private renderMiddle;
     private renderRight;
     render(): TemplateResult;

package/library/packages/organisms/src/content-builder/components/config-manager/config-manager.d.ts

@@ -66,6 +66,31 @@ export default class CxConfigManager extends CortexElement {
      * @default false
      */
     enableFontFamilyControls: boolean;
+    /**
+     * Default asset format applied to image blocks.
+     * @default 'TRX'
+     */
+    defaultImageFormat: string;
+    /**
+     * Default asset format applied to video poster (thumbnail) blocks.
+     * @default 'TRX'
+     */
+    defaultVideoPosterFormat: string;
+    /**
+     * Default asset format applied to gallery blocks.
+     * @default 'TRX'
+     */
+    defaultGalleryFormat: string;
+    /**
+     * Default asset format applied to carousel blocks.
+     * @default 'TRX'
+     */
+    defaultCarouselFormat: string;
+    /**
+     * Default asset format applied to timeline blocks.
+     * @default 'TRX'
+     */
+    defaultTimelineFormat: string;
     /**
      * Root folder ids the folder-picker controls are restricted to (forwarded to
      * cx-config-form). Sourced from the space's configured root folders.

package/library/packages/organisms/src/content-builder/content-builder-constants.d.ts

@@ -32,3 +32,4 @@ export declare const BLOCK_CAROUSEL_LIMITED_BLOCKS: BlockType[];
 export declare const NEWLY_ADDED_COMPONENT_DELAY = 500;
 export declare const OPEN_ON_NEWLY_ADDED_COMPONENT: Set<BlockType>;
 export declare const MULTI_LANGUAGE_BLOCKS: Set<BlockType>;
+export declare const DEFAULT_IMAGE_FORMAT = "TR1";

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -18,6 +18,12 @@ import { CxRTEBubbleMenu, CxRTETableGenerator } from './plugins';
  * download-format, and asset-format-picker controls on image, video, gallery,
  * carousel, and timeline blocks. Off by default.
  *
+ * `default-image-format`, `default-video-poster-format`,
+ * `default-gallery-format`, `default-carousel-format`, and
+ * `default-timeline-format` set the initial format for their respective block
+ * type. All apply regardless of `enable-asset-format-controls`, and act as the
+ * fallback when a block has not had its format explicitly configured.
+ *
  * @event cx-change - Emitted when the content builder changes.
  */
 export default class CxContentBuilder extends CortexElement {
@@ -105,6 +111,41 @@ export default class CxContentBuilder extends CortexElement {
      * @default false
      */
     enableAssetFormatControls: boolean;
+    /**
+     * Default asset format applied to image blocks.
+     * Used as the initial format when a block is added, whether or not
+     * `enable-asset-format-controls` is on.
+     * @default 'TR1'
+     */
+    defaultImageFormat: string;
+    /**
+     * Default asset format applied to video poster (thumbnail) blocks.
+     * Used as the initial format when a block is added, whether or not
+     * `enable-asset-format-controls` is on.
+     * @default 'TR1'
+     */
+    defaultVideoPosterFormat: string;
+    /**
+     * Default asset format applied to gallery blocks.
+     * Used as the initial format when a block is added, whether or not
+     * `enable-asset-format-controls` is on.
+     * @default 'TR1'
+     */
+    defaultGalleryFormat: string;
+    /**
+     * Default asset format applied to carousel blocks.
+     * Used as the initial format when a block is added, whether or not
+     * `enable-asset-format-controls` is on.
+     * @default 'TR1'
+     */
+    defaultCarouselFormat: string;
+    /**
+     * Default asset format applied to timeline blocks.
+     * Used as the initial format when a block is added, whether or not
+     * `enable-asset-format-controls` is on.
+     * @default 'TR1'
+     */
+    defaultTimelineFormat: string;
     /**
      * Set `enable-font-family-controls` to expose the font family / style / weight
      * pickers (and their font-size controls) in the block config sidebar.

package/library/packages/organisms/src/content-builder/plugins/plugin-factory.d.ts

@@ -4,6 +4,11 @@ import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 import { Component, ComponentDefinition, ComponentView, ComponentViewDefinition, Editor } from 'grapesjs';
 
 export type EditorPluginOptions = {
+    defaultCarouselFormat?: string;
+    defaultGalleryFormat?: string;
+    defaultImageFormat?: string;
+    defaultTimelineFormat?: string;
+    defaultVideoPosterFormat?: string;
     enableAssetFormatControls?: boolean;
     localize: LocalizeController;
     multiLanguage?: boolean;

package/library/packages/organisms/src/content-builder/styleController.d.ts

@@ -139,6 +139,7 @@ export default class StyleController {
         multiple?: boolean;
         pickerConfigs?: {
             accepts?: string[];
+            defaultFormat?: string;
             multiple?: boolean;
             nameKey?: string;
             parentAssetIdKey?: string;

package/library/packages/types/src/content-builder.d.ts

@@ -157,6 +157,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
     options?: Option[];
     pickerConfigs?: {
         accepts?: string[];
+        /** The format code used to resolve a preview src immediately after picking an image (before the user configures a format). */
+        defaultFormat?: string;
         multiple?: boolean;
         /** The block-attribute key that stores the asset name. Defaults to 'name'. */
         nameKey?: string;
@@ -355,6 +357,11 @@ export declare enum DataSourceId {
     TranslatableTexts = "TRANSLATABLE_TEXTS"
 }
 export type ConfigsOptions = {
+    defaultCarouselFormat?: string;
+    defaultGalleryFormat?: string;
+    defaultImageFormat?: string;
+    defaultTimelineFormat?: string;
+    defaultVideoPosterFormat?: string;
     enableAssetFormatControls?: boolean;
     enableFontFamilyControls?: boolean;
 };

package/library/packages/types/src/pdf-viewer-toolbar.d.ts

@@ -11,10 +11,11 @@ export type PdfViewerScrollMode = 'page' | 'vertical' | 'horizontal' | 'wrapped'
 /** How page spreads are joined. */
 export type PdfViewerSpreadMode = 'none' | 'odd' | 'even';
 /**
- * The zoom scale. Either a named mode, a percentage zoom factor (as a string, e.g.
- * `'150-percent'` = 150%), or `'custom'` for a non-preset factor shown via `customScalePercent`.
+ * The zoom scale: a named mode, one of the select's percentage presets, or — for a
+ * zoom off that list, e.g. once the zoom buttons step past 400% — the raw scale
+ * factor as a number string (`'4.6'` = 460%).
  */
-export type PdfViewerScaleValue = 'auto' | 'page-actual' | 'page-fit' | 'page-width' | '50-percent' | '75-percent' | '100-percent' | '125-percent' | '150-percent' | '200-percent' | '300-percent' | '400-percent';
+export type PdfViewerScaleValue = 'auto' | 'page-actual' | 'page-fit' | 'page-width' | '50-percent' | '75-percent' | '100-percent' | '125-percent' | '150-percent' | '200-percent' | '300-percent' | '400-percent' | `${number}`;
 /** A row in the "View on asset" dropdown. */
 export interface ViewOnAssetRow {
     checked: boolean;

package/library/packages/utils/src/transformation/transformation.d.ts

@@ -11,3 +11,11 @@ export declare function buildTransformationString({ asset, baseUrl, extension, o
     transformations?: Transformation[];
     useSession?: string;
 }): string;
+/**
+ * Applies transformations to a (possibly finished) asset URL and returns the display URL.
+ *
+ * The backend resolver splits on the FIRST `/t/` after the access key, so for `/AssetLink/`
+ * URLs the transform is anchored right after the access key (before any prettyName/ext tail)
+ * and merged into an existing `/t/`. Other URLs keep the plain append behavior.
+ */
+export declare function applyTransformationsToUrl(url: string, transformations: Transformation[]): string;

package/library/react-web-component.d.ts

@@ -6840,7 +6840,7 @@
         /**
           * Current zoom scale.
         */
-        scaleValue?: 'auto' | 'page-actual' | 'page-fit' | 'page-width' | '50-percent' | '75-percent' | '100-percent' | '125-percent' | '150-percent' | '200-percent' | '300-percent' | '400-percent';
+        scaleValue?: 'auto' | 'page-actual' | 'page-fit' | 'page-width' | '50-percent' | '75-percent' | '100-percent' | '125-percent' | '150-percent' | '200-percent' | '300-percent' | '400-percent' | string;
         /**
           * Disables the zoom-in button.
         */
@@ -9647,7 +9647,7 @@
         preRender?: boolean;
             } 
             /**
-              * The `cx-content-builder` component is used to create and manage content blocks in a CMS.<br/> Set `enable-asset-format-controls` to expose the asset format, transformation, download-format, and asset-format-picker controls on image, video, gallery, carousel, and timeline blocks. Off by default.
+              * The `cx-content-builder` component is used to create and manage content blocks in a CMS.<br/> Set `enable-asset-format-controls` to expose the asset format, transformation, download-format, and asset-format-picker controls on image, video, gallery, carousel, and timeline blocks. Off by default.<br/> `default-image-format`, `default-video-poster-format`, `default-gallery-format`, `default-carousel-format`, and `default-timeline-format` set the initial format for their respective block type. All apply regardless of `enable-asset-format-controls`, and act as the fallback when a block has not had its format explicitly configured.
             */
             interface CxContentBuilderAttributes extends HTMLAttributes<CxContentBuilder> {
               
@@ -9687,6 +9687,26 @@
           * Whether to expose the asset format / transformation / download-format / asset-format-picker controls in the per-block config sidebar for image, video, gallery, carousel, and timeline blocks. <br/>@default false
         */
         enableAssetFormatControls?: boolean;
+        /**
+          * Default asset format applied to image blocks. Used as the initial format when a block is added, whether or not `enable-asset-format-controls` is on. <br/>@default 'TR1'
+        */
+        defaultImageFormat?: string;
+        /**
+          * Default asset format applied to video poster (thumbnail) blocks. Used as the initial format when a block is added, whether or not `enable-asset-format-controls` is on. <br/>@default 'TR1'
+        */
+        defaultVideoPosterFormat?: string;
+        /**
+          * Default asset format applied to gallery blocks. Used as the initial format when a block is added, whether or not `enable-asset-format-controls` is on. <br/>@default 'TR1'
+        */
+        defaultGalleryFormat?: string;
+        /**
+          * Default asset format applied to carousel blocks. Used as the initial format when a block is added, whether or not `enable-asset-format-controls` is on. <br/>@default 'TR1'
+        */
+        defaultCarouselFormat?: string;
+        /**
+          * Default asset format applied to timeline blocks. Used as the initial format when a block is added, whether or not `enable-asset-format-controls` is on. <br/>@default 'TR1'
+        */
+        defaultTimelineFormat?: string;
         /**
           * Set `enable-font-family-controls` to expose the font family / style / weight pickers (and their font-size controls) in the block config sidebar. <br/>@default false
         */

package/library/utils.js

@@ -9,7 +9,7 @@ import { t as Ae } from "./chunks/converters.DkDtLstb.js";
 import { c as Le } from "./chunks/custom-element.L4WJXn1j.js";
 import { d as Re } from "./chunks/debounce.DaHuiSGU.js";
 import { d as Ve } from "./chunks/default-value.COZopaet.js";
-import { d as Oe } from "./chunks/drag.DXEXVXPv.js";
+import { d as Oe } from "./chunks/drag.DenOh3AE.js";
 import { f as Ye } from "./chunks/focus-when-visible.jWSw9ks0.js";
 import { f as k } from "./chunks/form.CP9KLGjF.js";
 import { F as Ue, c as _e, g as Pe, v as Xe, a as He } from "./chunks/form.CP9KLGjF.js";
@@ -34,7 +34,7 @@ import { s as ga } from "./chunks/parse.Cu5nBDTb.js";
 import { b as pa, o as Da, d as Ta, e as wa, f as Ca, m as xa, q as Ma, g as ya, h as Sa, l as Ea, p as Aa, z as Ia, y as La, a as va, c as Ra, s as ba, x as Va, v as Fa, t as Oa, r as ka, w as Ya, i as Na, n as Ua, u as _a } from "./chunks/string.BhJ0Zogu.js";
 import { g as Xa, a as Ha } from "./chunks/template.ClovJacp.js";
 import { c as Ba, f as $a, a as Ga, g as za } from "./chunks/time.DWfbnPnM.js";
-import { b as Qa } from "./chunks/transformation.BDmd3kER.js";
+import { a as Qa, b as Za } from "./chunks/transformation.D1alV_s4.js";
 function n(t) {
   const e = t.getFullYear(), r = String(t.getMonth() + 1).padStart(2, "0"), s = String(t.getDate()).padStart(2, "0");
   return `${e}-${r}-${s}`;
@@ -598,7 +598,8 @@ export {
   we as animateTo,
   O as appendProtocol,
   Et as appendQueryParam,
-  Qa as buildTransformationString,
+  Qa as applyTransformationsToUrl,
+  Za as buildTransformationString,
   ea as buildWaveformPath,
   $r as calculateAspectRatioFit,
   ze as clamp,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.160.0",
+  "version": "2.162.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/chunks/drag.DXEXVXPv.js

@@ -1,18 +0,0 @@
-function s(i, e) {
-  function o(t) {
-    const l = i.getBoundingClientRect(), f = i.ownerDocument.defaultView, d = l.left + f.scrollX, a = l.top + f.scrollY;
-    let u = t.pageX - d, r = t.pageY - a;
-    if (t._parentEvent) {
-      const n = t.target;
-      n instanceof HTMLElement && (u += n.getBoundingClientRect().left + n.ownerDocument.defaultView.scrollX, r += n.getBoundingClientRect().top + n.ownerDocument.defaultView.scrollY);
-    }
-    e?.onMove && e.onMove(u, r, t);
-  }
-  function c() {
-    document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", c), e?.onStop && e.onStop();
-  }
-  document.addEventListener("pointermove", o, { passive: !0 }), document.addEventListener("pointerup", c), e?.initialEvent instanceof PointerEvent && o(e.initialEvent);
-}
-export {
-  s as d
-};

package/library/chunks/transformation.BDmd3kER.js

@@ -1,163 +0,0 @@
-import { T as n, U as $ } from "./asset-link-format.QzzboHHE.js";
-function R({
-  asset: p,
-  baseUrl: c,
-  extension: f,
-  options: _,
-  parameters: y,
-  transformations: r,
-  useSession: k = ""
-}) {
-  if (c == null)
-    return "";
-  let i = c;
-  const s = r?.findLast(
-    (a) => a.key === n.Quality
-  );
-  if (s && (r = [
-    ...r?.filter(
-      (a) => a.key !== n.Quality
-    ) || [],
-    s
-  ]), r) {
-    const a = [];
-    for (let e = 0; e < r.length; e++) {
-      const o = r[e];
-      if (o.key === n.Rotate) {
-        let t = o.value.rotation ?? 0;
-        for (; r[e + 1]?.key === n.Rotate; )
-          e++, t += r[e].value.rotation ?? 0;
-        t !== 0 && a.push({ key: n.Rotate, value: { rotation: t } });
-      } else
-        a.push(o);
-    }
-    r = a;
-  }
-  r && r.length > 0 && (i += "/t/"), r?.forEach(({ key: a, value: e }) => {
-    if (a === n.Resize) {
-      if (e.unit === $.AspectRatio && e.ratioWidth && e.ratioHeight) {
-        i += `re_ar_${e.ratioWidth}:${e.ratioHeight}/`;
-        return;
-      }
-      const o = [
-        ...[
-          {
-            key: "re_w_",
-            value: Math.round(e.width ?? 0)
-          },
-          {
-            key: "re_h_",
-            value: Math.round(e.height ?? 0)
-          }
-        ].filter((t) => t.value !== void 0).map((t) => ({
-          key: t.key,
-          value: Math.round(Number(t.value))
-        })),
-        {
-          key: "re_rm_",
-          value: "stretch"
-        }
-      ];
-      o.forEach(({ key: t, value: d }, u) => {
-        i += `${t}${d}${u < o.length - 1 ? "," : ""}`;
-      }), i += "/";
-    }
-    if (a === n.Crop) {
-      const o = e.unit === $.AspectRatio && !!e.ratioWidth && !!e.ratioHeight, t = !e.disabledSize && !o, d = t && (e.x !== void 0 || e.y !== void 0), u = [
-        ...[
-          {
-            key: "c_",
-            value: e.mode
-          },
-          ...o ? [
-            {
-              key: "ar_",
-              value: `${e.ratioWidth}:${e.ratioHeight}`
-            }
-          ] : [],
-          ...t ? [
-            {
-              key: "c_w_",
-              value: Math.round(e.width ?? 0)
-            },
-            {
-              key: "c_h_",
-              value: Math.round(e.height ?? 0)
-            },
-            {
-              key: "c_x_",
-              value: Math.round(e.x ?? 0) === 0 && _?.omitZeroXY ? void 0 : Math.round(e.x ?? 0)
-            },
-            {
-              key: "c_y_",
-              value: Math.round(e.y ?? 0) === 0 && _?.omitZeroXY ? void 0 : Math.round(e.y ?? 0)
-            }
-          ] : [],
-          ...!d && e.focusMode && e.focusMode !== "manual" ? [
-            {
-              key: e.isFocusModeAuto ? "acm_" : "c_g_",
-              value: e.focusMode
-            }
-          ] : []
-        ].filter((h) => h.value !== void 0 && h.value !== null).map((h) => ({
-          key: h.key,
-          value: h.value
-        })),
-        ...o ? [] : [
-          {
-            key: "c_whu_",
-            value: "pixel"
-          }
-        ]
-      ];
-      u.forEach(({ key: h, value: v }, M) => {
-        const g = ["c_w_", "c_h_", "c_x_", "c_y_"].includes(h);
-        i += `${h}${g ? Math.round(Number(v)) : v}${M < u.length - 1 ? "," : ""}`;
-      }), i += "/";
-    }
-    if (a === n.Rotate && ([
-      {
-        key: "r_a_",
-        value: e.rotation
-      }
-    ].filter((t) => t.value !== void 0).map((t) => ({
-      key: t.key,
-      value: Math.round(Number(t.value))
-    })).forEach(({ key: t, value: d }) => {
-      i += `${t}${d}`;
-    }), i += "/"), a === n.Quality) {
-      const o = [
-        {
-          key: "q_level_",
-          value: e.quality
-        }
-      ].filter((t) => t.value !== void 0).map((t) => ({
-        key: t.key,
-        value: Math.round(Number(t.value))
-      }));
-      o.forEach(({ key: t, value: d }, u) => {
-        i += `${t}${d}${u < o.length - 1 ? "," : ""}`;
-      }), i += "/";
-    }
-    if (a === n.Metadata) {
-      const o = [
-        {
-          key: "fl_keep_metadata",
-          value: e.keepMetadata
-        }
-      ].filter((t) => t.value !== void 0).map((t) => ({ key: t.key, value: t.value }));
-      o.forEach(({ key: t }, d) => {
-        i += `${t}${d < o.length - 1 ? "," : ""}`;
-      }), i += "/";
-    }
-  }), f && (i += `${p?.identifier ?? crypto.randomUUID()}${f}`);
-  const l = [];
-  return y && y.length > 0 && y.forEach(({ key: a, value: e }) => {
-    l.push(
-      `${encodeURIComponent(a.trim())}=${encodeURIComponent(e.trim())}`
-    );
-  }), c && k && l.push(`UseSession=${encodeURIComponent(k)}`), l.length > 0 && (i += `?${l.join("&")}`), i.endsWith("/") && (i = i.slice(0, -1)), i;
-}
-export {
-  R as b
-};