@orangelogic/orange-dam-content-browser-sdk 2.3.6 → 2.3.7-table-view-beta-2

package/build/api/asset/asset.d.ts

@@ -30,7 +30,8 @@ export declare function resolveAssetExtraFilters(selectedFacets?: Record<string,
 };
 export declare function apiGetAssetLinks({ assets, extension, extraFields, parameters, permanentLink, proxyPreference, transformations, useSession, }: GetAssetLinksRequest): Promise<GetAssetLinksResponse>;
 export declare function apiGetAssetsByIDs({ extraFields, recordIds, }: GetAssetsByIDsRequest): Promise<GetAssetsByIDsResponse>;
-export declare function apiGetAssets({ folderId, isSeeThrough, limitedToDocTypes, pageSize, searchText, selectedFacets, sortOrder, start, useSession, }: GetAssetsRequest): Promise<GetAssetsResponse>;
+export declare const ASSET_LIST_FIELDS: string[];
+export declare function apiGetAssets({ fields, folderId, isSeeThrough, limitedToDocTypes, pageSize, searchText, selectedFacets, sortOrder, start, useSession, }: GetAssetsRequest): Promise<GetAssetsResponse>;
 export declare function apiGetAvailableProxies({ assetRecordId, siteUrl, }: {
     assetRecordId: string;
     siteUrl?: string;

package/build/components/content-browser/content-browser.d.ts

@@ -6,7 +6,8 @@ import CxContentBrowserFormatDialog from '../../components/content-browser-forma
 import CxContentBrowserGrid from '../../components/content-browser-grid/content-browser-grid';
 import CxContentBrowserHeader from '../../components/content-browser-header/content-browser-header';
 import CxContentBrowserNoResult from '../../components/content-browser-no-result/content-browser-no-result';
-import { type CtaTextTransform, GridView } from '../../types/content-browser';
+import CxContentBrowserTable from '../../components/content-browser-table/content-browser-table';
+import { type AutoSelectFormat, type ContentBrowserView, type CtaTextTransform, type TableColumn } from '../../types/content-browser';
 import { GetFolderRequest } from '../../types/folder';
 import CxIcon from '@orangelogic/design-system/components/icon';
 import CxIconButton from '@orangelogic/design-system/components/icon-button';
@@ -18,6 +19,7 @@ export declare const COMPUTED_FIELDS: string[];
  * @summary CxContentBrowser
  */
 export default class CxContentBrowser extends CortexElement {
+    #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-content-browser-browser': typeof CxContentBrowserBrowser;
@@ -26,6 +28,7 @@ export default class CxContentBrowser extends CortexElement {
         'cx-content-browser-grid': typeof CxContentBrowserGrid;
         'cx-content-browser-header': typeof CxContentBrowserHeader;
         'cx-content-browser-no-result': typeof CxContentBrowserNoResult;
+        'cx-content-browser-table': typeof CxContentBrowserTable;
         'cx-icon': typeof CxIcon;
         'cx-icon-button': typeof CxIconButton;
         'cx-resize-observer': typeof CxResizeObserver;
@@ -62,6 +65,10 @@ export default class CxContentBrowser extends CortexElement {
      * shows the asset's LargeSizePreview and confirming emits the asset straight to the host.
      * Implies `can-use-proxies=false`.
      */
+    /**
+     * Host-level import behaviour; forwarded to the format dialog. See `AutoSelectFormat`.
+     */
+    autoSelectFormat: AutoSelectFormat;
     simplePick: boolean;
     canViewVersions: boolean;
     canTrack: boolean;
@@ -69,7 +76,13 @@ export default class CxContentBrowser extends CortexElement {
     ctaText: string;
     ctaTextTransform: CtaTextTransform;
     extraFields: string[];
-    defaultGridView: GridView;
+    defaultGridView: ContentBrowserView;
+    /**
+     * Columns of the table view, defined by the host: a title, the Cortex field the column reads, and
+     * its styling. The table view is offered only while this is non-empty — an empty table is not a
+     * view mode — and the fields are read once, when the fetch controller is created.
+     */
+    tableColumns: TableColumn[];
     defaultSortOrderName: string;
     defaultSortDirection: 'ascending' | 'descending';
     defaultSelectedFacets: Record<string, string[]>;
@@ -97,6 +110,15 @@ export default class CxContentBrowser extends CortexElement {
     private defaultPageSize;
     private fetchAndMergeAssetsController;
     willUpdate(changedProperties: PropertyValues): void;
+    /**
+     * Never trust the host's value: it also arrives by direct property assignment, past the converter.
+     * Entries are checked one by one, not just the outer array — `field` is dereferenced while the
+     * fetch controller is being built, where a throw leaves the controller unassigned and the picker
+     * blank. `title` is only rendered, and Lit renders a nullish one as nothing, so a column is not
+     * worth dropping over it.
+     */
+    private get tableColumnList();
+    private get canUseTable();
     runFirstUpdated(): void;
     fetchAssets(request: GetAssetsRequest): Promise<import("../../api/asset/asset.types").GetAssetsResponse>;
     fetchFolders(request: GetFolderRequest): Promise<import("../../types/folder").GetFolderResponse>;
@@ -106,8 +128,20 @@ export default class CxContentBrowser extends CortexElement {
      * pin/unpin request (see `cx-content-browser-pin-asset-change`) to reflect the result.
      */
     setIsAssetPinned(isAssetPinned: boolean): void;
+    /**
+     * The asset a click is still working on, or undefined. The two private flags below drive the
+     * guards; this drives the UI, and is a separate field because they are plain fields rather than
+     * reactive state.
+     *
+     * Cleared the moment the format dialog actually opens: from there the dialog's own confirm button
+     * carries the pending state, and two spinners for one operation reads as two operations. It
+     * survives when no dialog opens, which is the auto-confirm path, where the CTA is the only thing
+     * the user can be told anything by.
+     */
+    private busyAssetId;
     private openFormatDialog;
     handleLastRequestChange(): Promise<void>;
+    handleTableColumnsChange(): void;
     handleAuthChange(): void;
     handleSiteSessionChange(): void;
     private handleSortOrderChange;
@@ -127,6 +161,7 @@ export default class CxContentBrowser extends CortexElement {
      */
     private handlePinAssetChange;
     private handleProxyConfirm;
+    private reportProxyConfirmFailure;
     private handleFormatConfirm;
     private handleFormatDialogClose;
     private handleSelectedAsset;

package/build/components/content-browser-asset-card/content-browser-asset-card.d.ts

@@ -1,8 +1,9 @@
 import { CSSResultGroup } from 'lit';
 import CortexElement from '../../base/element';
 import { MediaType } from '../../types/asset';
-import { GridView } from '../../types/content-browser';
+import { type CtaTextTransform, GridView } from '../../types/content-browser';
 import CxArrayLineClamp from '@orangelogic/design-system/components/array-line-clamp';
+import CxButton from '@orangelogic/design-system/components/button';
 import CxCard from '@orangelogic/design-system/components/card';
 import CxCheckbox from '@orangelogic/design-system/components/checkbox';
 import CxLineClamp from '@orangelogic/design-system/components/line-clamp';
@@ -14,6 +15,7 @@ export default class CxContentBrowserAssetCard extends CortexElement {
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-array-line-clamp': typeof CxArrayLineClamp;
+        'cx-button': typeof CxButton;
         'cx-card': typeof CxCard;
         'cx-checkbox': typeof CxCheckbox;
         'cx-content-browser-asset-preview': typeof CxContentBrowserAssetPreview;
@@ -22,6 +24,20 @@ export default class CxContentBrowserAssetCard extends CortexElement {
         'cx-tag': typeof CxTag;
         'cx-typography': typeof CxTypography;
     };
+    private readonly localize;
+    /**
+     * Show the hover overlay that says clicking this card inserts. Set when the host has asked to
+     * skip the format picker: without the dialog a click hands the asset over immediately, and the
+     * card would otherwise carry no sign of that.
+     */
+    showCta: boolean;
+    ctaText: string;
+    ctaTextTransform: CtaTextTransform;
+    /**
+     * This card's insert is still running: hold the overlay open and spin its CTA, so the feedback
+     * does not vanish the moment the pointer leaves.
+     */
+    busy: boolean;
     imageUrl: string;
     originalUrl: string;
     scrubUrl: string;

package/build/components/content-browser-control-bar/content-browser-control-bar.d.ts

@@ -61,6 +61,7 @@ export default class CxContentBrowserControlBar extends CortexElement {
     newlyChangedOption: ChangeOption | undefined;
     searchText: string;
     isMobile: boolean;
+    canUseTable: boolean;
     private handleSearchChange;
     render(): TemplateResult;
 }

package/build/components/content-browser-control-view/content-browser-control-view.d.ts

@@ -10,7 +10,7 @@ import CxSpace from '@orangelogic/design-system/components/space';
 import CxSwitch from '@orangelogic/design-system/components/switch';
 import CxTooltip from '@orangelogic/design-system/components/tooltip';
 import CortexElement from '../../base/element';
-import { ControlOption, GridView } from '../../types/content-browser';
+import { type ContentBrowserView, ControlOption } from '../../types/content-browser';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary DAM view control toolbar for selecting asset view modes and toggling options.
@@ -41,14 +41,17 @@ export default class CxContentBrowserControlView extends CortexElement {
         'cx-tooltip': typeof CxTooltip;
     };
     private readonly localize;
-    view: GridView;
+    view: ContentBrowserView;
     views: ControlOption[];
     isSeeThrough: boolean;
     isMobile: boolean;
+    canUseTable: boolean;
     private selectedView;
+    private get isTable();
     runConnectedCallback(): void;
     private handleSeeThroughClick;
     private handleViewSelect;
+    private renderTableOption;
     handleViewChange(): void;
     render(): TemplateResult;
 }

package/build/components/content-browser-format-dialog/content-browser-format-dialog.d.ts

@@ -15,7 +15,7 @@ import CxTypography from '@orangelogic/design-system/components/typography';
 import CxContentBrowserAssetPreview from '../content-browser-asset-preview/content-browser-asset-preview';
 import CxContentBrowserAssetProxySelector from '../content-browser-asset-proxy-selector/content-browser-asset-proxy-selector';
 import CxContentBrowserAssetVersionHistory from '../content-browser-asset-version-history/content-browser-asset-version-history';
-import { type Parameter, type Transformation, type CtaTextTransform, ContentBrowserFormatDialogVariant } from '../../types/content-browser';
+import { type Parameter, type Transformation, type CtaTextTransform, type AutoSelectFormat, ContentBrowserFormatDialogVariant } from '../../types/content-browser';
 export default class CxContentBrowserFormatDialog extends CortexElement {
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
@@ -47,6 +47,12 @@ export default class CxContentBrowserFormatDialog extends CortexElement {
     canPinAsset: boolean;
     canTrack: boolean;
     canUseProxies: boolean;
+    /**
+     * Skip the format picker and insert directly — see `resolveAutoSelection` for what each value
+     * does. Off by default: this changes what a click does, so a host opts in rather than
+     * inheriting it.
+     */
+    autoSelectFormat: AutoSelectFormat;
     /**
      * Pick-only mode. Suppresses the custom-format editor entirely: cx-asset-link-format issues its
      * own transformasset request as soon as it is in the DOM, so hiding it with CSS is not enough.
@@ -92,7 +98,19 @@ export default class CxContentBrowserFormatDialog extends CortexElement {
     trackingParameters: Parameter[];
     private get shouldAppendAutoExtension();
     private get canUseATS();
+    private filterProxies;
     handleSupportedExtensionsChange(): void;
+    /**
+     * What `autoSelectFormat` resolves to for this asset: the proxy to insert with, or `undefined`
+     * when the dialog should open as usual.
+     *
+     * `{ proxy: undefined }` is deliberate rather than a miss — with the picker switched off there is
+     * no format to name and the original file is the only outcome, which is `handleProxyConfirm`'s
+     * no-proxy branch. With the picker on a proxy must actually resolve: confirming none emits
+     * nothing and would turn the click into a silent no-op, so both an empty proxy list and a format
+     * name that matches nothing fall back to the dialog.
+     */
+    private resolveAutoSelection;
     open({ asset, isFavorite, isAssetPinned, proxies, }: {
         asset: Asset & {
             previewUrl: string;
@@ -102,6 +120,14 @@ export default class CxContentBrowserFormatDialog extends CortexElement {
         proxies: AvailableProxy[];
     }): void;
     hide(): void;
+    /**
+     * Show a dialog that `open()` skipped through the auto-confirm shortcut. The asset, proxies and
+     * resolved selection are still in place, so this lands the user on exactly the dialog the
+     * shortcut spared them, with its confirm button live again to retry.
+     */
+    revealAfterAutoConfirm(): void;
+    /** Whether the dialog is actually on screen — false when `open()` took the auto-confirm path. */
+    get isDialogOpen(): boolean;
     setVersionHistory(versions: AssetVersion[]): void;
     setIsFavorite(isFavorite: boolean): void;
     setIsAssetPinned(isAssetPinned: boolean): void;

package/build/components/content-browser-grid/content-browser-grid.d.ts

@@ -1,7 +1,7 @@
 import '@lit-labs/virtualizer';
 import CortexElement from '../../base/element';
 import { Asset } from '../../types/asset';
-import { GridView } from '../../types/content-browser';
+import { GridView, type CtaTextTransform } from '../../types/content-browser';
 import CxProgressBar from '@orangelogic/design-system/components/progress-bar';
 import CxResizeObserver from '@orangelogic/design-system/components/resize-observer';
 import CxContentBrowserAssetCard from '../content-browser-asset-card/content-browser-asset-card';
@@ -28,6 +28,10 @@ export default class CxContentBrowserGrid extends CortexElement {
     showSize: boolean;
     showDimensions: boolean;
     showTags: boolean;
+    showCta: boolean;
+    ctaText: string;
+    ctaTextTransform: CtaTextTransform;
+    busyAssetId: string | undefined;
     selectedAssetId: string | undefined;
     assetMap: Map<string, Asset>;
     columnWidth: number;

package/build/components/content-browser-grid/scroll-anchor-controller.d.ts

@@ -1,10 +1,21 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-type ScrollAnchorContainer = HTMLElement & {
+type ScrollAnchorLayoutSource = {
     layoutComplete?: Promise<unknown>;
 };
+type ScrollAnchorContainer = HTMLElement & ScrollAnchorLayoutSource;
 type ScrollAnchorControllerOptions = {
     getContainer: () => ScrollAnchorContainer | undefined;
+    /**
+     * Distance from the scroller's content origin down to the top of row 0 -- the height of whatever
+     * leads the content, such as a sticky header. Defaults to 0: the rows start at the origin.
+     */
+    getContentOffset?: () => number;
     getItemIndexById: (id: string) => number;
+    /**
+     * The object whose `layoutComplete` a restore waits on. Defaults to the container, which carries
+     * it when the virtualizer is itself the scroller.
+     */
+    getLayoutSource?: () => ScrollAnchorLayoutSource | undefined;
     itemSelector: string;
 };
 export default class ScrollAnchorController implements ReactiveController {

package/build/components/content-browser-table/content-browser-table.d.ts

@@ -0,0 +1,178 @@
+import '@lit-labs/virtualizer';
+import CortexElement from '../../base/element';
+import { Asset } from '../../types/asset';
+import { type CtaTextTransform, TableColumn } from '../../types/content-browser';
+import CxButton from '@orangelogic/design-system/components/button';
+import CxLineClamp from '@orangelogic/design-system/components/line-clamp';
+import CxProgressBar from '@orangelogic/design-system/components/progress-bar';
+import CxResizeObserver from '@orangelogic/design-system/components/resize-observer';
+import CxTypography from '@orangelogic/design-system/components/typography';
+import CxContentBrowserNoResult from '../content-browser-no-result/content-browser-no-result';
+import type { CSSResultGroup } from 'lit';
+export declare const ROW_HEIGHT = 40;
+/**
+ * The action column is an explicit track, not an implicit one. Left implicit, the grid sizes it
+ * from content *after* distributing free space, so a host's fractional track (`minmax(0, 2fr)` on
+ * Title) is computed against a width the button then eats into and the last text column is clipped.
+ * `max-content` is stable across rows because every row's button carries the same label.
+ */
+export declare const ACTION_COLUMN_TRACK = "max-content";
+/** Narrow enough to be a deliberate choice, wide enough that a column never becomes a sliver. */
+export declare const MIN_COLUMN_WIDTH = 48;
+/**
+ * The widest a column may be dragged. The table scrolls horizontally, so there is no layout-derived
+ * maximum any more, but a bound is still needed twice over: a stray pointer event must not be able
+ * to produce an absurd track, and the separator has to report a real `aria-valuemax`. Fixed rather
+ * than measured, so the range is a constant and render costs no layout read.
+ */
+export declare const MAX_COLUMN_WIDTH = 2000;
+/** Keyboard resize step, in pixels; Shift takes the larger one. */
+export declare const COLUMN_RESIZE_STEP = 8;
+export declare const COLUMN_RESIZE_STEP_LARGE = 32;
+/**
+ * The header and the virtualized rows are separate grids that must always resolve the same track
+ * list. Publishing it as one custom property on the host keeps them in step, and lets a drag
+ * repaint by writing a single property instead of re-rendering every visible row.
+ */
+export declare const TABLE_COLUMNS_PROPERTY = "--cx-content-browser-table-columns";
+/**
+ * Raises a flexible track's base size to `MIN_COLUMN_WIDTH`.
+ *
+ * `min-width: min-content` on the grids is what carries the table past its scrollport, but it also
+ * means the grid is sized under a min-content constraint, and a flexible track resolves to its
+ * *base* size under one. `minmax(0, 1fr)` has a base size of 0, so every flexible column collapsed
+ * the moment the table overflowed: its title and cells clipped away and its resize handle trapped
+ * inside a zero-width clipping cell, where the pointer cannot reach it to drag the column back.
+ * Flooring the base at the width a drag already refuses to go below keeps the column reachable, and
+ * covers a host-authored `minmax(0, 2fr)` or bare `2fr` the same way it covers the default.
+ */
+export declare function floorFlexibleTrack(track: string): string;
+/**
+ * Column values ride on the asset under the Cortex field name as requested (see `apiGetAssets`),
+ * which `Asset` cannot declare because the field set is the host's, not the SDK's.
+ */
+export declare function readCellValue(asset: Asset, field: string): string;
+/**
+ * @summary Table layout for the Content Browser: one row per asset, host-configured metadata columns
+ * instead of a thumbnail.
+ *
+ * @description Renders the same asset list the grid does and emits the same item events, so an asset
+ * with no rendition — a text fragment, `digitized = 0` — is browsable and selectable by its
+ * identifying fields. It fetches nothing of its own: a row exists, and a cell has a value, only
+ * because the search response the grid also consumes carried it.
+ *
+ * @event cx-content-browser-grid-click - Emitted when a row is activated by click or keyboard.
+ * @event cx-content-browser-grid-resize - Emitted with the visible row count so the host can grow the page size.
+ * @event cx-content-browser-grid-scroll-end - Emitted when the row list is scrolled to the end.
+ * @event cx-content-browser-table-column-resize - Emitted when a column settles on a new width: a
+ * drag released, a keyboard step, or a reset by double click or Home. `detail.width` is the pixel
+ * width, or `undefined` when the column was reset to the track the host configured. Resized widths
+ * are session-only -- the SDK has no storage that survives a reload -- so this event is the host's
+ * only chance to persist them.
+ */
+export default class CxContentBrowserTable extends CortexElement {
+    #private;
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-content-browser-no-result': typeof CxContentBrowserNoResult;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-progress-bar': typeof CxProgressBar;
+        'cx-resize-observer': typeof CxResizeObserver;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    private readonly containerEl;
+    private readonly headEl;
+    private readonly bodyEl;
+    assets: Asset[];
+    columns: TableColumn[];
+    ctaText: string;
+    ctaTextTransform: CtaTextTransform;
+    empty: boolean;
+    hasMore: boolean;
+    loading: boolean;
+    selectedAssetId: string | undefined;
+    /**
+     * The asset whose insert is still running, so its row keeps the CTA on screen and spinning.
+     */
+    busyAssetId: string | undefined;
+    assetMap: Map<string, Asset>;
+    /** Widths the user has dragged, in pixels, keyed by the column's Cortex field. */
+    private columnWidths;
+    private readonly scrollAnchorController;
+    constructor();
+    /** One authored track per configured column, in order. The action track is not one of them. */
+    private buildColumnTracks;
+    private buildTemplateColumns;
+    private get templateColumns();
+    private resolveColumnWidth;
+    private clampColumnWidth;
+    private commitColumnWidth;
+    /**
+     * Kept off the reactive path: its only effect is the cursor, the text selection and the handle
+     * colour, while a reactive toggle would rebind `renderItem` and re-render every visible row twice
+     * per drag.
+     */
+    private setResizingClass;
+    private bindFallbackListeners;
+    private releaseFallbackListeners;
+    /**
+     * With the fallback bound, an event dispatched at the handle reaches the handle's own binding and
+     * then the document one, running every terminal handler twice. The fallback owns the whole drag on
+     * that path, so the element-level delivery is dropped.
+     */
+    private isHandledByFallback;
+    /** Every trace of a drag: the state the track-list publish is gated on, the cursor, the fallback. */
+    private endResize;
+    private handleResizeStart;
+    /**
+     * The track list a running drag owns, built against the columns rendering right now: the committed
+     * widths with the drag's own preview over the top. Falls back to the committed list when no drag is
+     * running, so one expression covers both.
+     */
+    private get previewTemplateColumns();
+    /** Repaints the drag with one property write: no re-render, no layout read. */
+    private previewColumnWidth;
+    private handleResizeMove;
+    private handleResizeEnd;
+    /**
+     * A gesture the user agent took away was never a decision: restore the committed track list and
+     * tell the host nothing.
+     */
+    private handleResizeCancel;
+    private handleResizeKeyDown;
+    private handleResizeReset;
+    private renderResizeHandle;
+    handleColumnsChange(): void;
+    updated(): void;
+    disconnectedCallback(): void;
+    handleAssetsChange(): void;
+    private handleResize;
+    private readonly debouncedCalculatePageSize;
+    private calculatePageSize;
+    private selectRow;
+    private handleRowClick;
+    private handleActionClick;
+    private handleRowKeyDown;
+    /**
+     * @param assetId - omitted for the header's sizing twin, which is inert and never announced.
+     */
+    private renderActionButton;
+    /**
+     * Bound fresh on every render at the call site, deliberately. `lit-virtualizer` re-runs this only
+     * when `items` or `renderItem` change identity, and the selected id lives on neither — with a
+     * stable reference the rows keep their first render and the selected row is never marked. A new
+     * `items` array alone does not do it; the function identity is what the virtualizer acts on.
+     */
+    private renderRow;
+    private handleScroll;
+    private readonly debouncedHandleScrollEnd;
+    private handleScrollEnd;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-table': CxContentBrowserTable;
+    }
+}

package/build/components/content-browser-table/content-browser-table.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;