@orangelogic/design-system 2.101.0 → 2.103.0

package/library/package.json

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

package/library/packages/atoms/src/components/drawer/drawer.d.ts

@@ -10,6 +10,7 @@ import { default as CxIconButton } from '../icon-button/icon-button';
  * @slot (default) - The drawer's main content.
  * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
  * @slot header-actions - Optional actions to add to the header. Works best with `<cx-icon-button>`.
+ * @slot description - Optional description content rendered between the header and body.
  * @slot footer - The drawer's footer, usually one or more buttons representing various options.
  *
  * @event cx-show - Emitted when the drawer opens.
@@ -31,6 +32,7 @@ import { default as CxIconButton } from '../icon-button/icon-button';
  * @csspart title - The drawer's title.
  * @csspart close-button - The close button, an `<cx-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
+ * @csspart description - The drawer's description section, rendered between the header and body.
  * @csspart body - The drawer's body.
  * @csspart footer - The drawer's footer.
  *
@@ -92,6 +94,12 @@ export default class CxDrawer extends CortexElement {
      * its parent element, set this attribute and add `position: relative` to the parent.
      */
     contained: boolean;
+    /**
+     * When combined with `contained`, allows the drawer panel to overflow the parent's width boundary.
+     * Useful when the parent container has height but no explicit width — the drawer panel will still
+     * appear by overflowing visually outside the zero-width container.
+     */
+    ignoreParentWidth: boolean;
     /**
      * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
      * accessible way for users to dismiss the drawer.

package/library/packages/atoms/src/components/tag/tag.d.ts

@@ -6,12 +6,16 @@ import { default as CxLineClamp } from '../line-clamp/line-clamp';
 /**
  * @summary Tags are used as labels to organize things or to indicate a selection.
  *
- * @slot (default) - The tag's content.
+ * @slot (default) - The tag's content. Clamped to `lines` lines (single line by default).
+ * @slot prefix - Content shown before the label, e.g. an avatar or icon. Not clamped.
+ * @slot suffix - Content shown after the label, e.g. a clickable icon, tooltip, or dropdown. Not clamped.
  *
  * @event cx-remove - Emitted when the remove button is activated.
  *
  * @csspart base - The component's base wrapper.
  * @csspart content - The tag's content.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
  * @csspart remove-button - The tag's remove button, an `<cx-icon-button>`.
  * @csspart remove-button__base - The remove button's exported `base` part.
  */
@@ -22,6 +26,7 @@ export default class CxTag extends CortexElement {
         'cx-line-clamp': typeof CxLineClamp;
     };
     private readonly localize;
+    private readonly hasSlotController;
     /** The tag's theme variant. */
     variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
     /** The tag's size. */
@@ -30,6 +35,11 @@ export default class CxTag extends CortexElement {
     pill: boolean;
     /** Makes the tag removable and shows a remove button. */
     removable: boolean;
+    /**
+     * The number of lines to clamp the label to before truncating with an ellipsis.
+     * Defaults to DEFAULT_LINE (single line). Increase to let the label wrap onto multiple lines.
+     */
+    lines: number;
     private handleRemoveClick;
     render(): import('lit').TemplateResult<1>;
 }

package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts

@@ -18,6 +18,12 @@ export type CxAssetLinkFormatChangeEvent = CustomEvent<string>;
  * @summary The `cx-asset-link-format` component is used to format an asset link with various transformations such as cropping, resizing, rotating, and applying quality settings.
  *
  * @event `cx-asset-link-format-change` - Emitted when the asset link format is changed.
+ *
+ * @property {boolean} no-format - When true, hides the format proxy (format selection) panel.
+ * @property {boolean} no-metadata - When true, hides the metadata panel.
+ * @property {boolean} no-crop - When true, hides the crop panel.
+ * @property {boolean} no-resize - When true, hides the resize panel.
+ * @property {boolean} no-rotate - When true, hides the rotation panel.
  */
 export default class CxAssetLinkFormat extends CortexElement {
     static readonly styles: CSSResultGroup;
@@ -94,6 +100,7 @@ export default class CxAssetLinkFormat extends CortexElement {
     selectedProxy: string;
     useCustomExtension: boolean;
     noMetadata: boolean;
+    noFormat: boolean;
     noCrop: boolean;
     noResize: boolean;
     noRotate: boolean;
@@ -260,6 +267,7 @@ export default class CxAssetLinkFormat extends CortexElement {
     };
     setActiveSetting(activeSetting: string): void;
     private freezeTransformations;
+    private upsertTransformation;
     handleTransformationsChange(): Promise<void>;
     private handleCropperElementChange;
     private handleCropperSelectorChange;

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-crop/asset-link-format-crop.d.ts

@@ -106,6 +106,10 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
      * Whether the apply button is disabled.
      */
     disabledApply: boolean;
+    /**
+     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
+     */
+    canApply: boolean;
     /**
      * The last applied crop settings for each unit.
      * This is used to restore the last applied settings when the component is closed.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-quality/asset-link-format-quality.d.ts

@@ -48,6 +48,10 @@ export default class CxAssetLinkFormatQuality extends CortexElement {
      * @default false
      */
     loading: boolean;
+    /**
+     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
+     */
+    canApply: boolean;
     scopedValue: number;
     /**
      * A computed property that checks if the current quality value is invalid.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-resize/asset-link-format-resize.d.ts

@@ -104,6 +104,10 @@ export default class CxAssetLinkFormatResize extends CortexElement {
      * @default false
      */
     loading: boolean;
+    /**
+     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
+     */
+    canApply: boolean;
     /**
      * Whether to keep the aspect ratio when changing width or height.
      * This is used to automatically adjust the other dimension when one is changed.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-rotation/asset-link-format-rotation.d.ts

@@ -56,6 +56,10 @@ export default class CxAssetLinkFormatRotation extends CortexElement {
      * @default false
      */
     loading: boolean;
+    /**
+     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
+     */
+    canApply: boolean;
     handleOpenChange(): void;
     private handleRotationChange;
     private handleButtonClick;

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

@@ -127,7 +127,8 @@ export default class StyleController {
         pickerConfigs?: {
             accepts?: string[];
             multiple?: boolean;
-            name?: string;
+            nameKey?: string;
+            representativeKey?: string;
         };
         radioGroupConfigs?: {
             gap?: string;

package/library/packages/types/src/asset-link-format.d.ts

@@ -56,7 +56,9 @@ export type Transformation = {
     key: TransformationAction;
     value: {
         disabledSize?: boolean;
+        focusMode?: string;
         height?: number;
+        isFocusModeAuto?: boolean;
         keepMetadata?: boolean;
         mode?: string;
         quality?: number;

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

@@ -136,7 +136,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
     pickerConfigs?: {
         accepts?: string[];
         multiple?: boolean;
-        name?: string;
+        nameKey?: string;
+        representativeKey?: string;
     };
     placeholder?: string;
     radioGroupConfigs?: {
@@ -191,8 +192,11 @@ export declare enum AssetType {
 }
 export type AssetTypeString = AssetType | `${AssetType} ${AssetTypeString}`;
 export type Asset = {
+    extension?: string;
     id: string;
     name: string;
+    /** Representative (thumbnail/preview) URL fetched from the API. */
+    representative?: string;
     src: string;
     type: AssetType;
     url?: string;

package/library/packages/types/src/tag.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_LINE = 1;

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

@@ -1,9 +1,12 @@
 import { Asset, Parameter, Transformation } from '../../../types/src/asset-link-format';
 
-export declare function buildTransformationString({ asset, baseUrl, extension, parameters, transformations, useSession, }: {
+export declare function buildTransformationString({ asset, baseUrl, extension, options, parameters, transformations, useSession, }: {
     asset?: Asset;
     baseUrl?: string;
     extension?: string;
+    options?: {
+        omitZeroXY?: boolean;
+    };
     parameters?: Parameter[];
     transformations?: Transformation[];
     useSession?: string;

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

@@ -33,18 +33,18 @@
             export type CxShareOptionListShareOptionListItem = { disabled: boolean; icon: string; id: string; name: string; tooltip: string; };
             export type CxStepperWizardStepData = { color: string; description: string; icon: string; iconVariant: 'outlined' | 'filled' | 'fa'; id: string; name: string; readonly: boolean; state: 'Done' | 'Active' | 'None' | 'Disabled'; };
             export type CxTimelineTimelineItem = { id: string; label: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; recordId: string; thumbnail: string; };
-            export type CxTimelineTransformation = { key: 'Crop' | 'Metadata' | 'Proxy' | 'Quality' | 'Resize' | 'Rotate'; value: { disabledSize: boolean; height: number; keepMetadata: boolean; mode: string; quality: number; rotation: number; unit: '%' | 'px'; width: number; x: number; y: number; }; };
+            export type CxTimelineTransformation = { key: 'Crop' | 'Metadata' | 'Proxy' | 'Quality' | 'Resize' | 'Rotate'; value: { disabledSize: boolean; focusMode: string; height: number; isFocusModeAuto: boolean; keepMetadata: boolean; mode: string; quality: number; rotation: number; unit: '%' | 'px'; width: number; x: number; y: number; }; };
             export type CxAssetLinkFormatAsset = { allowATSLink: boolean; docSubType: string; docType: 'Album' | 'Audio' | 'Image' | 'Multimedia' | 'Story' | 'Video' | 'Widget'; extension: string; height: string; id: string; identifier: string; imageUrl: string; name: string; originalUrl: string; scrubUrl: string; size: string; tags: string; width: string; };
             export type CxAssetLinkFormatCropMode = { auto: boolean; disabledSize: boolean; label: string; value: string; };
             export type CxAssetLinkFormatFocusMode = { auto: boolean; label: string; value: string; };
             export type CxAssetLinkFormatProxy = { cdnName: string; extension: string; formatHeight: number; formatWidth: number; height: number; id: string; permanentLink: string; proxyLabel: string; proxyName: string; width: number; };
-            export type CxAssetLinkFormatTransformation = { key: 'Crop' | 'Metadata' | 'Proxy' | 'Quality' | 'Resize' | 'Rotate'; value: { disabledSize: boolean; height: number; keepMetadata: boolean; mode: string; quality: number; rotation: number; unit: '%' | 'px'; width: number; x: number; y: number; }; };
+            export type CxAssetLinkFormatTransformation = { key: 'Crop' | 'Metadata' | 'Proxy' | 'Quality' | 'Resize' | 'Rotate'; value: { disabledSize: boolean; focusMode: string; height: number; isFocusModeAuto: boolean; keepMetadata: boolean; mode: string; quality: number; rotation: number; unit: '%' | 'px'; width: number; x: number; y: number; }; };
             export type CxBentoGridGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; filler: boolean; header: string; id: string; isClone: boolean; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
             export type CxCarouselGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; filler: boolean; header: string; id: string; isClone: boolean; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
             export type CxChatbotChatbotEvent = { event: string; excludedFromPurposes: string[]; label: string; };
             export type CxColorSwatchGroupColorSwatchData = { cmyk: string; color: string; hex: string; id: string; name: string; palette: string; pms: string; rgb: string; };
             export type CxGalleryGalleryRecord = { id: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; rawId: string; src: string; };
-            export type CxGalleryTransformation = { key: 'Crop' | 'Metadata' | 'Proxy' | 'Quality' | 'Resize' | 'Rotate'; value: { disabledSize: boolean; height: number; keepMetadata: boolean; mode: string; quality: number; rotation: number; unit: '%' | 'px'; width: number; x: number; y: number; }; };
+            export type CxGalleryTransformation = { key: 'Crop' | 'Metadata' | 'Proxy' | 'Quality' | 'Resize' | 'Rotate'; value: { disabledSize: boolean; focusMode: string; height: number; isFocusModeAuto: boolean; keepMetadata: boolean; mode: string; quality: number; rotation: number; unit: '%' | 'px'; width: number; x: number; y: number; }; };
             export type CxContentBuilderDevice = { canvasWidth: string; height: string; id: string; maxWidth: string; name: string; };
             export type CxDashboardFilterDashboardFilterControl = { controlId: string; controlType: string; id: string; label: string; maxOptionsVisible: number; optionColumnMapping: CxDashboardFilterPartial; options: CxDashboardFilterDashboardFilterOption[] | dictionary[]; placeholder: string; type: string; };
             export type CxDashboardFilterPartial = any;
@@ -1354,6 +1354,10 @@
           * Makes the tag removable and shows a remove button.
         */
         removable?: boolean;
+        /**
+          * The number of lines to clamp the label to before truncating with an ellipsis. Defaults to DEFAULT_LINE (single line). Increase to let the label wrap onto multiple lines.
+        */
+        lines?: number;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -2156,6 +2160,10 @@
           * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this attribute and add `position: relative` to the parent.
         */
         contained?: boolean;
+        /**
+          * When combined with `contained`, allows the drawer panel to overflow the parent's width boundary. Useful when the parent container has height but no explicit width — the drawer panel will still appear by overflowing visually outside the zero-width container.
+        */
+        ignoreParentWidth?: boolean;
         /**
           * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
         */
@@ -7055,6 +7063,10 @@
         /**
           * 
         */
+        noFormat?: boolean;
+        /**
+          * 
+        */
         noCrop?: boolean;
         /**
           * 

package/library/utils.js

@@ -28,7 +28,7 @@ import { g as Ds, a as As } from "./chunks/responsive.Oz9HWjyQ.js";
 import { c as ys, b as Ss, e as Ms, f as Ls, l as Is, g as vs, j as Rs, p as Vs, v as bs, r as ks, a as Fs, d as Os, s as Ns, k as Xs, o as Ps, m as _s, n as Bs, q as Hs, t as Us, u as Gs } from "./chunks/string.DUgD4c9f.js";
 import { g as Ws, a as zs } from "./chunks/template.ClovJacp.js";
 import { c as Zs, a as js, f as Js, g as $s } from "./chunks/time.BiQnh9wt.js";
-import { b as Ks } from "./chunks/transformation.Cqz3hPaQ.js";
+import { b as Ks } from "./chunks/transformation.Dir8s_wm.js";
 function b(t) {
   if (!this.ownerDocument.defaultView?.Matrix3 || !t)
     return;

package/package.json

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

package/library/chunks/transformation.Cqz3hPaQ.js

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