@orangelogic/design-system 2.118.0 → 2.119.0

package/library/packages/organisms/src/capacity-planner/capacity-planner.d.ts

@@ -0,0 +1,194 @@
+import { default as CxRadioButton } from '../../../atoms/src/components/radio-button/radio-button.ts';
+import { default as CxRadioGroup } from '../../../atoms/src/components/radio-group/radio-group.ts';
+import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { CapacityCategory, CapacityWeek } from '../../../types/src/capacity-planner';
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { FLOOR, isoWeekNumber, quantizeLargestRemainder, UNAVAILABLE_COLOR, UNAVAILABLE_ID, UNAVAILABLE_NAME } from './capacity-core';
+import { default as CxCapacityToolbar } from './components/capacity-toolbar/capacity-toolbar';
+import { default as CxCapacityWeekBar } from './components/capacity-week-bar/capacity-week-bar';
+
+export { FLOOR, isoWeekNumber, quantizeLargestRemainder, UNAVAILABLE_COLOR, UNAVAILABLE_ID, UNAVAILABLE_NAME, };
+/** Edit interaction modes for the individual planner. */
+export type CapacityEditMode = 'adjust' | 'copy';
+/**
+ * @summary Individual weekly capacity planner. Each week distributes a fixed
+ * weekly capacity across work categories as a horizontal bar of colored bands.
+ * Users either drag a band to rebalance the split or copy whole weeks across a
+ * range. A reserved, component-synthesized "Unavailable" (grey) band fills
+ * each week up to the weekly capacity, so the UI total is ALWAYS exactly the
+ * capacity while the REAL categories may sum to LESS. Dragging any band
+ * (including Unavailable) rebalances proportionally against the others; an
+ * empty week renders as 100% Unavailable with the real bands at 0 shown as
+ * grabbable FLOOR-width slivers. Hours are floats internally and rounded only
+ * for display/save. The Unavailable band is NEVER saved: edits emit a
+ * debounced `cx-capacity-change` carrying ONLY the real categories for each
+ * edited week, with integer hours (largest-remainder) that sum to
+ * round(capacity) − round(unavailable) and match the visible labels.
+ *
+ * @event {{ weeks: Array<{ weekStart: string, allocations: Array<{ categoryId: string, hours: number }> }> }} cx-capacity-change - Debounced (~1000ms) emit of every edited week's REAL category allocations (integer hours; the unallocated remainder is implicit and the synthetic Unavailable band is never included).
+ */
+export default class CxCapacityPlanner extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-capacity-toolbar': typeof CxCapacityToolbar;
+        'cx-capacity-week-bar': typeof CxCapacityWeekBar;
+        'cx-radio-button': typeof CxRadioButton;
+        'cx-radio-group': typeof CxRadioGroup;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    /**
+     * Work categories (≤10). `color` is optional; a stable one is derived if
+     * absent. JS-only (array of objects) — never reflected to/parsed from an
+     * attribute.
+     */
+    categories: CapacityCategory[];
+    /** Per-week allocations for the visible horizon (weeks ordered ascending). */
+    weeks: CapacityWeek[];
+    /** Total hours available per week (C). Defaults to 40. */
+    weeklyCapacity: number;
+    /** Optional per-category clamp (max hours a single category may hold). */
+    maxHourPerCell?: number;
+    /** When false, the planner is fully read-only (no drag, copy, or seeding). */
+    editable: boolean;
+    /** ISO date; weeks starting before this are read-only (e.g. the past). */
+    firstEditableWeek?: string;
+    /** Intl date-format locale used for week-start labels. */
+    dateFormat: string;
+    /** First day of the week for display alignment (Monday by default). */
+    weekStartsOn: string;
+    private editMode;
+    private selActive;
+    /** Selection anchor/focus week indices (inclusive range when sorted). */
+    private selAnchorW;
+    private selFocusW;
+    private filling;
+    private fillToW;
+    private copyMsg;
+    private barWidth;
+    private readonly scrollEl;
+    /**
+     * Live plan: plan[weekIndex] = { categoryId -> hours } as floats. This is a
+     * plain field (not reactive) because it mutates many times per drag frame; we
+     * schedule renders via requestAnimationFrame instead.
+     */
+    private plan;
+    /** Indices of weeks edited since the last debounced emit. */
+    private readonly dirtyWeeks;
+    private interaction;
+    private rafId;
+    private flashTimer;
+    /** Module-level-style clipboard: an N-week buffer of category->hours maps. */
+    private clipboard;
+    constructor();
+    runConnectedCallback(): void;
+    disconnectedCallback(): void;
+    runFirstUpdated(): void;
+    /**
+     * The synthetic Unavailable pseudo-category. NOT part of the
+     * server-provided `categories` prop — appended internally as the LAST band so
+     * every week's UI total is exactly the capacity. Never emitted.
+     */
+    private get unavailableCategory();
+    /**
+     * Cached derived state, recomputed ONLY when `categories` changes (see
+     * `recomputeDerived`). These were getters that rebuilt their map/arrays on
+     * every render call — with many weeks/categories that ran dozens of times per
+     * drag frame. They depend solely on `categories`, so caching them keeps the
+     * values byte-identical while removing the per-render churn.
+     *
+     * - `effectiveCategories`: the real `categories` followed by the synthetic
+     *   Unavailable band (always last). All allocation math runs over THIS set.
+     * - `colorMap`: category id -> resolved color (provided or derived from id).
+     * - `legend`: toolbar legend entries (reals + the reserved Unavailable entry).
+     */
+    private effectiveCategories;
+    private colorMap;
+    private legend;
+    private recomputeDerived;
+    /** Whether the week at `index` is editable (mode + horizon gate). */
+    private isWeekEditable;
+    private rebuildPlan;
+    /**
+     * Integer hours for a week over the FULL effective set (real categories
+     * followed by Unavailable), in band order, via a largest-remainder
+     * (Hamilton) quantizer: floor every band, then hand the `round(C) − Σfloors`
+     * leftover units to the bands with the largest fractional remainders
+     * (deterministic tie-break: larger float value, then lower index). The result
+     * always sums to exactly `Math.round(C)`. Internal working values stay floats;
+     * this drives the displayed hour labels AND (after dropping the trailing OOO
+     * unit) the emitted payload, so "what you see equals what's saved" for the
+     * real categories.
+     */
+    private quantizeWeek;
+    /**
+     * Thin wrappers around the shared pure `capacity-core` math. Each preserves
+     * the exact private-method signature and call sites the rest of this class
+     * (and its test suites) rely on — only the BODY now delegates to the core,
+     * passing `this.weeklyCapacity` / `this.maxHourPerCell` / `this.categories`.
+     * This keeps the behavior byte-stable while letting `cx-team-capacity` reuse
+     * the identical algorithms.
+     */
+    private get capacityConstraints();
+    private clamp;
+    private correctToCapacity;
+    private effectiveCapFor;
+    private cappedWaterFill;
+    private normalizeWeekToCapacity;
+    private rebalance;
+    private writeWeek;
+    private copyWeek;
+    private markDirty;
+    private scheduleEmit;
+    private emitChange;
+    private scheduleRender;
+    private measure;
+    private handleResize;
+    private bandsForWeek;
+    private weekLabel;
+    /** Read the week index from the `data-week-index` attr on the event target. */
+    private weekIndexFromEvent;
+    private handleBandPointerDown;
+    /** Keyboard step on a band — routed through the SAME rebalance + emit. */
+    private handleBandStep;
+    private handlePointerMove;
+    private handlePointerUp;
+    private weekFromY;
+    private handleScrollPointerDown;
+    private handleFillPointerDown;
+    private performFill;
+    /** Move browser focus to a week row by index (clamped to the visible range). */
+    private focusWeekRow;
+    /**
+     * Keyboard selection on a focusable week row (copy mode). Arrow Up/Down moves
+     * the focused week (mirroring the pointer selection by setting the SAME
+     * selAnchorW/selFocusW state); Shift+Arrow extends the contiguous selection
+     * (anchor fixed, focus moves). Mirrors how a pointer drag drives selection.
+     */
+    private handleRowKeyDown;
+    /** Establish a single-week selection when a row gains keyboard focus. */
+    private handleRowFocus;
+    /**
+     * Keyboard on the fill handle (role=button). Enter/Space toggles fill mode;
+     * while filling, Arrow Down/Up adjusts the fill target row, Enter commits the
+     * cyclic fill (same `source = lo + ((t-lo) mod N)` logic as the pointer path),
+     * Esc cancels.
+     */
+    private handleFillKeyDown;
+    private handleKeyDown;
+    private doCopy;
+    private doPaste;
+    private flash;
+    private setMode;
+    /** Mode change from the design-system `cx-radio-group` (`cx-change`). */
+    private handleModeChange;
+    private get hintText();
+    private renderRow;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-capacity-planner': CxCapacityPlanner;
+    }
+}

package/library/packages/organisms/src/capacity-planner/capacity-planner.styles.d.ts

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

package/library/packages/organisms/src/capacity-planner/components/capacity-toolbar/capacity-toolbar.d.ts

@@ -0,0 +1,35 @@
+import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/** A legend entry: a category with its resolved color. */
+export interface CapacityLegendItem {
+    color: string;
+    id: string;
+    name: string;
+    /**
+     * When true this is a reserved, component-synthesized entry (the "Out of
+     * Office" band) rather than a real category. The toolbar renders it last,
+     * visually separated from the real categories.
+     */
+    reserved?: boolean;
+}
+/**
+ * @summary Capacity planner toolbar: the category legend (left-aligned, spanning
+ * the toolbar) and a trailing capacity note ("{capacity}h / week"). The app mark
+ * and title were dropped — the component lives under a host that already has a
+ * header. Purely presentational.
+ */
+export default class CxCapacityToolbar extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    private readonly localize;
+    /** Weekly capacity, shown in the trailing note. */
+    capacity: number;
+    /** Legend entries (categories with resolved colors). */
+    legend: CapacityLegendItem[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-capacity-toolbar': CxCapacityToolbar;
+    }
+}

package/library/packages/organisms/src/capacity-planner/components/capacity-toolbar/capacity-toolbar.styles.d.ts

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

package/library/packages/organisms/src/capacity-planner/components/capacity-week-bar/capacity-week-bar.d.ts

@@ -0,0 +1,101 @@
+import { default as CxTooltip } from '../../../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+
+/**
+ * A single resolved band to render. All values are pre-computed by the
+ * container; this component performs no allocation math.
+ */
+export interface CapacityBand {
+    /** Category id (for hit-testing on pointer-down). */
+    categoryId: string;
+    /** Category name (for the accessible value text). */
+    categoryName: string;
+    /** Background color (already resolved to a concrete CSS color). */
+    color: string;
+    /** Hours for this band — used as the flex-grow weight and aria-valuenow. */
+    hours: number;
+    /** Full label text, e.g. "12h · Reviews". */
+    label: string;
+    /** Short label text (the rounded number only). */
+    shortLabel: string;
+    /** Tooltip text, e.g. "Reviews · 12h" (set when no inline label fits). */
+    tip: string;
+    /**
+     * When true the band ignores `maxHourPerCell` for its slider ceiling (used by
+     * the synthetic "Unavailable" band, which is uncapped). Optional; defaults
+     * to capped behaviour.
+     */
+    uncapped?: boolean;
+}
+/**
+ * @summary Presentational capacity bar: a flex row of category bands sized by
+ * hours. All mutation/allocation logic lives in the `cx-capacity-planner`
+ * container — this component only renders bands and forwards pointer/keyboard
+ * intent. When `resizable`, bands are exposed as ARIA sliders (keyboard +
+ * screen-reader accessible, mirroring `cx-range`). Every week always has bands
+ * (the container synthesizes a grey "Unavailable" band that fills the week up
+ * to capacity), so there is no empty/unplanned track to special-case.
+ *
+ * @event {{ barWidth: number, categoryId: string, pointerEvent: PointerEvent }} cx-capacity-week-bar-band-pointer-down - Fired when a resizable band is pressed.
+ * @event {{ categoryId: string, deltaHours: number }} cx-capacity-week-bar-band-step - Fired when a band is stepped via the keyboard.
+ */
+export default class CxCapacityWeekBar extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-tooltip': typeof CxTooltip;
+    };
+    /** Pre-resolved bands to render (in category order). */
+    bands: CapacityBand[];
+    /** Pixel width of the bar — used to decide which labels fit. */
+    barWidth: number;
+    /** Total weekly capacity (C). The bands always sum to it (incl. Unavailable). */
+    capacity: number;
+    /** Per-band slider floor (lowest hours a band may hold). */
+    floor: number;
+    /** Optional per-band slider ceiling (max hours a single band may hold). */
+    maxHourPerCell?: number;
+    /** Whether bands are resizable (drag-to-rebalance / keyboard steppable). */
+    resizable: boolean;
+    /**
+     * When true, a band with 0 hours renders at 0px width (no FLOOR-clamped grab
+     * sliver). For read-only displays (e.g. the team grid's mini-bars) there is no
+     * need for a draggable zone, so a 0-hours category should simply not show.
+     * Defaults false — the resizable planner/zoom bars keep the FLOOR-width grab
+     * sliver so a 0-hours category stays clickable to grow back.
+     */
+    collapseZeroBands: boolean;
+    /** Px width threshold above which the full "{h}h · {name}" label is shown. */
+    fullLabelThreshold: number;
+    /** Px width threshold above which the number-only label is shown. */
+    shortLabelThreshold: number;
+    private readonly barEl;
+    private summary;
+    private geometries;
+    willUpdate(changed: PropertyValues<this>): void;
+    /** Measure the live bar width; falls back to the cached prop if unmeasurable. */
+    private measuredBarWidth;
+    private handleBandPointerDown;
+    private handleBandKeyDown;
+    private bandValueMax;
+    private renderLabels;
+    /**
+     * Display geometry for a band — shared by `renderBand` and the tooltip gate in
+     * `render` so the tip shows/hides in exact sync with the inline label (and so
+     * the tip text tracks a band being resized under a captured pointer).
+     *
+     * In `collapseZeroBands` (read-only display) mode a 0-hours category renders at
+     * 0px (no grab sliver needed — nothing to drag). Otherwise the DISPLAY width is
+     * clamped to a FLOOR-equivalent minimum so a category at 0 (or below FLOOR)
+     * still renders as a grabbable band, while its label/saved value stay the true
+     * (quantized) hours.
+     */
+    private bandGeometry;
+    private renderBand;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-capacity-week-bar': CxCapacityWeekBar;
+    }
+}

package/library/packages/organisms/src/capacity-planner/components/capacity-week-bar/capacity-week-bar.styles.d.ts

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

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

@@ -45,6 +45,7 @@ import { default as CxAssetTransformationDialog } from '../../../asset-transform
 import { AssetFormatValue } from '../../../../../types/src/asset-format-picker';
 import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
 import { StyleProps } from 'grapesjs';
+import { default as CxDamCustomToolbarButtonsEditor } from '../../../dam-custom-toolbar-buttons-editor/dam-custom-toolbar-buttons-editor';
 import { CxColorSwatchPicker } from '../color-swatch-picker';
 import { CxFolderPicker } from '../folder-picker';
 import { default as CxGalleryPicker } from '../gallery-picker/gallery-picker';
@@ -63,8 +64,10 @@ export type CxContentBuilderFormSaveEvent = CustomEvent<{
     isNewTemplate: boolean;
 }>;
 export declare enum TabType {
+    Appearance = "appearance",
     Content = "content",
     Effects = "effects",
+    SidePanels = "sidePanels",
     Styling = "styling"
 }
 /**
@@ -87,6 +90,7 @@ export default class CxConfigForm extends CortexElement {
         'cx-color-swatch-picker': typeof CxColorSwatchPicker;
         'cx-confirm-popover': typeof CxConfirmPopover;
         'cx-corner-position-input-group': typeof CxCornerPositionInputGroup;
+        'cx-dam-custom-toolbar-buttons-editor': typeof CxDamCustomToolbarButtonsEditor;
         'cx-dialog': typeof CxDialog;
         'cx-divider': typeof CxDivider;
         'cx-download-format-picker': typeof CxDownloadFormatPicker;
@@ -213,6 +217,14 @@ export default class CxConfigForm extends CortexElement {
     onRequestDownloadFormat: ((assetIds: string[], formats?: Record<string, string[]>) => Promise<Record<string, string[]>>) | undefined;
     /** Callback invoked when an asset format needs to be selected via an external popup. */
     onRequestAssetFormat: ((assetId: string, value?: AssetFormatValue) => Promise<AssetFormatValue | null | undefined>) | undefined;
+    /**
+     * Function to configure a workflow.
+     * Called when the user clicks the "Configure Workflow" button on a trait with action: executeWorkflow.
+     * @param id - The id of the trait that triggered the workflow configuration.
+     * @returns A promise that resolves when the workflow is configured.
+     * @default undefined
+     */
+    onConfigureWorkflow: ((id?: string) => Promise<string>) | undefined;
     /**
      * The attributes of the component.
      * This is used to store the attributes of the block being configured.

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

@@ -110,6 +110,12 @@ export default class CxConfigManager extends CortexElement {
     onRequestDownloadFormat: ((assetIds: string[]) => Promise<Asset[]>) | undefined;
     /** Callback forwarded to `cx-config-form` → `cx-asset-format-picker` for asset format selection. */
     onRequestAssetFormat: ((assetId: string, value?: AssetFormatValue) => Promise<AssetFormatValue | null | undefined>) | undefined;
+    /**
+     * Function to configure a workflow.
+     * Called when the user clicks the "Configure Workflow" button on a trait with action: executeWorkflow.
+     * @default undefined
+     */
+    onConfigureWorkflow: ((id?: string) => Promise<string>) | undefined;
     /**
      * The attributes of the component.
      * This is used to store the attributes of the block being configured.

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

@@ -0,0 +1,66 @@
+import { PropertyConfig } from '../../../../types/src/content-builder';
+import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
+import { default as CxSbDamView } from '../blocks/dam-view/dam-view';
+
+type Attribute = {
+    'allow-asset-selection': CxSbDamView['allowAssetSelection'];
+    'always-show-favorite-folder': CxSbDamView['alwaysShowFavoriteFolder'];
+    'always-show-personal-folder': CxSbDamView['alwaysShowPersonalFolder'];
+    'apply-border-radius-to-panels': CxSbDamView['applyBorderRadiusToPanels'];
+    'asset-statuses': CxSbDamView['assetStatuses'];
+    'asset-types': CxSbDamView['assetTypes'];
+    'available-sort-orders': CxSbDamView['availableSortOrders'];
+    'available-views': CxSbDamView['availableViews'];
+    'custom-toolbar-buttons': CxSbDamView['customToolbarButtons'];
+    'data-grid-rows-desktop': CxSbDamView['dataGridRowsDesktop'];
+    'data-grid-rows-mobile': CxSbDamView['dataGridRowsMobile'];
+    'default-folders': CxSbDamView['defaultFolders'];
+    'default-sort-order': CxSbDamView['defaultSortOrder'];
+    'default-view': CxSbDamView['defaultView'];
+    'deploy-stacks': CxSbDamView['deployStacks'];
+    'enable-asset-actions': CxSbDamView['enableAssetActions'];
+    'enable-right-click-menu': CxSbDamView['enableRightClickMenu'];
+    'expanded-folders': CxSbDamView['expandedFolders'];
+    'filter-button-action': CxSbDamView['filterButtonAction'];
+    'folder-hierarchy': CxSbDamView['folderHierarchy'];
+    'highlight-representative-asset': CxSbDamView['highlightRepresentativeAsset'];
+    'items-per-page': string;
+    'left-additional-filters': CxSbDamView['leftAdditionalFilters'];
+    'left-available-panels': CxSbDamView['leftAvailablePanels'];
+    'left-default-panel': CxSbDamView['leftDefaultPanel'];
+    'left-panel-collapsed-by-default': CxSbDamView['leftPanelCollapsedByDefault'];
+    'left-panel-collapsible': CxSbDamView['leftPanelCollapsible'];
+    'left-panel-default-width': CxSbDamView['leftPanelDefaultWidth'];
+    'left-panel-remember-collapsed-state': CxSbDamView['leftPanelRememberCollapsedState'];
+    'restrict-asset-by-active-tasks': CxSbDamView['restrictAssetByActiveTasks'];
+    'restrict-asset-by-creator': CxSbDamView['restrictAssetByCreator'];
+    'restrict-asset-by-follower': CxSbDamView['restrictAssetByFollower'];
+    'restrict-asset-by-participant': CxSbDamView['restrictAssetByParticipant'];
+    'retain-filters-in-containers': CxSbDamView['retainFiltersInContainers'];
+    'right-additional-filters': CxSbDamView['rightAdditionalFilters'];
+    'right-available-panels': CxSbDamView['rightAvailablePanels'];
+    'right-default-panel': CxSbDamView['rightDefaultPanel'];
+    'right-panel-collapsed-by-default': CxSbDamView['rightPanelCollapsedByDefault'];
+    'right-panel-collapsible': CxSbDamView['rightPanelCollapsible'];
+    'right-panel-default-width': CxSbDamView['rightPanelDefaultWidth'];
+    'right-panel-remember-collapsed-state': CxSbDamView['rightPanelRememberCollapsedState'];
+    'search-placeholder': CxSbDamView['searchPlaceholder'];
+    'see-thru': CxSbDamView['seeThru'];
+    'show-all-assets': CxSbDamView['showAllAssets'];
+    'show-bottom-pagination': CxSbDamView['showBottomPagination'];
+    'show-breadcrumbs': CxSbDamView['showBreadcrumbs'];
+    'show-group-by': CxSbDamView['showGroupBy'];
+    'show-left-panel': CxSbDamView['showLeftPanel'];
+    'show-page-title': CxSbDamView['showPageTitle'];
+    'show-right-panel': CxSbDamView['showRightPanel'];
+    'show-search-box': CxSbDamView['showSearchBox'];
+    'show-sort-dropdown': CxSbDamView['showSortDropdown'];
+    'show-top-pagination': CxSbDamView['showTopPagination'];
+    'show-view-switcher': CxSbDamView['showViewSwitcher'];
+};
+declare const _default: {
+    configs: (localize: LocalizeController) => Array<PropertyConfig<Attribute>>;
+    defaultValue: Attribute;
+    stylable: string[];
+};
+export default _default;

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

@@ -5,6 +5,7 @@ export { default as carousel } from './carousel';
 export { default as colorSwatches } from './color-swatches';
 export { default as column } from './column';
 export { default as columnGroup } from './column-group';
+export { default as damView } from './dam-view';
 export { default as divider } from './divider';
 export { default as documentViewer } from './document-viewer';
 export { default as fontKit } from './font-kit';

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

@@ -100,6 +100,61 @@ export default class ConfigsController {
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'data-constraints': boolean;
         'width-type': import('../../../types/src/column').ColumnWidthType;
+    }>[] | import('../../../types/src/content-builder').PropertyConfig<{
+        'allow-asset-selection': import('./blocks').CxSbDamView["allowAssetSelection"];
+        'always-show-favorite-folder': import('./blocks').CxSbDamView["alwaysShowFavoriteFolder"];
+        'always-show-personal-folder': import('./blocks').CxSbDamView["alwaysShowPersonalFolder"];
+        'apply-border-radius-to-panels': import('./blocks').CxSbDamView["applyBorderRadiusToPanels"];
+        'asset-statuses': import('./blocks').CxSbDamView["assetStatuses"];
+        'asset-types': import('./blocks').CxSbDamView["assetTypes"];
+        'available-sort-orders': import('./blocks').CxSbDamView["availableSortOrders"];
+        'available-views': import('./blocks').CxSbDamView["availableViews"];
+        'custom-toolbar-buttons': import('./blocks').CxSbDamView["customToolbarButtons"];
+        'data-grid-rows-desktop': import('./blocks').CxSbDamView["dataGridRowsDesktop"];
+        'data-grid-rows-mobile': import('./blocks').CxSbDamView["dataGridRowsMobile"];
+        'default-folders': import('./blocks').CxSbDamView["defaultFolders"];
+        'default-sort-order': import('./blocks').CxSbDamView["defaultSortOrder"];
+        'default-view': import('./blocks').CxSbDamView["defaultView"];
+        'deploy-stacks': import('./blocks').CxSbDamView["deployStacks"];
+        'enable-asset-actions': import('./blocks').CxSbDamView["enableAssetActions"];
+        'enable-right-click-menu': import('./blocks').CxSbDamView["enableRightClickMenu"];
+        'expanded-folders': import('./blocks').CxSbDamView["expandedFolders"];
+        'filter-button-action': import('./blocks').CxSbDamView["filterButtonAction"];
+        'folder-hierarchy': import('./blocks').CxSbDamView["folderHierarchy"];
+        'highlight-representative-asset': import('./blocks').CxSbDamView["highlightRepresentativeAsset"];
+        'items-per-page': string;
+        'left-additional-filters': import('./blocks').CxSbDamView["leftAdditionalFilters"];
+        'left-available-panels': import('./blocks').CxSbDamView["leftAvailablePanels"];
+        'left-default-panel': import('./blocks').CxSbDamView["leftDefaultPanel"];
+        'left-panel-collapsed-by-default': import('./blocks').CxSbDamView["leftPanelCollapsedByDefault"];
+        'left-panel-collapsible': import('./blocks').CxSbDamView["leftPanelCollapsible"];
+        'left-panel-default-width': import('./blocks').CxSbDamView["leftPanelDefaultWidth"];
+        'left-panel-remember-collapsed-state': import('./blocks').CxSbDamView["leftPanelRememberCollapsedState"];
+        'restrict-asset-by-active-tasks': import('./blocks').CxSbDamView["restrictAssetByActiveTasks"];
+        'restrict-asset-by-creator': import('./blocks').CxSbDamView["restrictAssetByCreator"];
+        'restrict-asset-by-follower': import('./blocks').CxSbDamView["restrictAssetByFollower"];
+        'restrict-asset-by-participant': import('./blocks').CxSbDamView["restrictAssetByParticipant"];
+        'retain-filters-in-containers': import('./blocks').CxSbDamView["retainFiltersInContainers"];
+        'right-additional-filters': import('./blocks').CxSbDamView["rightAdditionalFilters"];
+        'right-available-panels': import('./blocks').CxSbDamView["rightAvailablePanels"];
+        'right-default-panel': import('./blocks').CxSbDamView["rightDefaultPanel"];
+        'right-panel-collapsed-by-default': import('./blocks').CxSbDamView["rightPanelCollapsedByDefault"];
+        'right-panel-collapsible': import('./blocks').CxSbDamView["rightPanelCollapsible"];
+        'right-panel-default-width': import('./blocks').CxSbDamView["rightPanelDefaultWidth"];
+        'right-panel-remember-collapsed-state': import('./blocks').CxSbDamView["rightPanelRememberCollapsedState"];
+        'search-placeholder': import('./blocks').CxSbDamView["searchPlaceholder"];
+        'see-thru': import('./blocks').CxSbDamView["seeThru"];
+        'show-all-assets': import('./blocks').CxSbDamView["showAllAssets"];
+        'show-bottom-pagination': import('./blocks').CxSbDamView["showBottomPagination"];
+        'show-breadcrumbs': import('./blocks').CxSbDamView["showBreadcrumbs"];
+        'show-group-by': import('./blocks').CxSbDamView["showGroupBy"];
+        'show-left-panel': import('./blocks').CxSbDamView["showLeftPanel"];
+        'show-page-title': import('./blocks').CxSbDamView["showPageTitle"];
+        'show-right-panel': import('./blocks').CxSbDamView["showRightPanel"];
+        'show-search-box': import('./blocks').CxSbDamView["showSearchBox"];
+        'show-sort-dropdown': import('./blocks').CxSbDamView["showSortDropdown"];
+        'show-top-pagination': import('./blocks').CxSbDamView["showTopPagination"];
+        'show-view-switcher': import('./blocks').CxSbDamView["showViewSwitcher"];
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'use-padding': boolean;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
@@ -389,6 +444,61 @@ export default class ConfigsController {
         trigger: string;
         'width-type': import('../../../types/src/column').ColumnWidthType;
     }> | {
+        'allow-asset-selection': import('./blocks').CxSbDamView["allowAssetSelection"];
+        'always-show-favorite-folder': import('./blocks').CxSbDamView["alwaysShowFavoriteFolder"];
+        'always-show-personal-folder': import('./blocks').CxSbDamView["alwaysShowPersonalFolder"];
+        'apply-border-radius-to-panels': import('./blocks').CxSbDamView["applyBorderRadiusToPanels"];
+        'asset-statuses': import('./blocks').CxSbDamView["assetStatuses"];
+        'asset-types': import('./blocks').CxSbDamView["assetTypes"];
+        'available-sort-orders': import('./blocks').CxSbDamView["availableSortOrders"];
+        'available-views': import('./blocks').CxSbDamView["availableViews"];
+        'custom-toolbar-buttons': import('./blocks').CxSbDamView["customToolbarButtons"];
+        'data-grid-rows-desktop': import('./blocks').CxSbDamView["dataGridRowsDesktop"];
+        'data-grid-rows-mobile': import('./blocks').CxSbDamView["dataGridRowsMobile"];
+        'default-folders': import('./blocks').CxSbDamView["defaultFolders"];
+        'default-sort-order': import('./blocks').CxSbDamView["defaultSortOrder"];
+        'default-view': import('./blocks').CxSbDamView["defaultView"];
+        'deploy-stacks': import('./blocks').CxSbDamView["deployStacks"];
+        'enable-asset-actions': import('./blocks').CxSbDamView["enableAssetActions"];
+        'enable-right-click-menu': import('./blocks').CxSbDamView["enableRightClickMenu"];
+        'expanded-folders': import('./blocks').CxSbDamView["expandedFolders"];
+        'filter-button-action': import('./blocks').CxSbDamView["filterButtonAction"];
+        'folder-hierarchy': import('./blocks').CxSbDamView["folderHierarchy"];
+        'highlight-representative-asset': import('./blocks').CxSbDamView["highlightRepresentativeAsset"];
+        'items-per-page': string;
+        'left-additional-filters': import('./blocks').CxSbDamView["leftAdditionalFilters"];
+        'left-available-panels': import('./blocks').CxSbDamView["leftAvailablePanels"];
+        'left-default-panel': import('./blocks').CxSbDamView["leftDefaultPanel"];
+        'left-panel-collapsed-by-default': import('./blocks').CxSbDamView["leftPanelCollapsedByDefault"];
+        'left-panel-collapsible': import('./blocks').CxSbDamView["leftPanelCollapsible"];
+        'left-panel-default-width': import('./blocks').CxSbDamView["leftPanelDefaultWidth"];
+        'left-panel-remember-collapsed-state': import('./blocks').CxSbDamView["leftPanelRememberCollapsedState"];
+        'restrict-asset-by-active-tasks': import('./blocks').CxSbDamView["restrictAssetByActiveTasks"];
+        'restrict-asset-by-creator': import('./blocks').CxSbDamView["restrictAssetByCreator"];
+        'restrict-asset-by-follower': import('./blocks').CxSbDamView["restrictAssetByFollower"];
+        'restrict-asset-by-participant': import('./blocks').CxSbDamView["restrictAssetByParticipant"];
+        'retain-filters-in-containers': import('./blocks').CxSbDamView["retainFiltersInContainers"];
+        'right-additional-filters': import('./blocks').CxSbDamView["rightAdditionalFilters"];
+        'right-available-panels': import('./blocks').CxSbDamView["rightAvailablePanels"];
+        'right-default-panel': import('./blocks').CxSbDamView["rightDefaultPanel"];
+        'right-panel-collapsed-by-default': import('./blocks').CxSbDamView["rightPanelCollapsedByDefault"];
+        'right-panel-collapsible': import('./blocks').CxSbDamView["rightPanelCollapsible"];
+        'right-panel-default-width': import('./blocks').CxSbDamView["rightPanelDefaultWidth"];
+        'right-panel-remember-collapsed-state': import('./blocks').CxSbDamView["rightPanelRememberCollapsedState"];
+        'search-placeholder': import('./blocks').CxSbDamView["searchPlaceholder"];
+        'see-thru': import('./blocks').CxSbDamView["seeThru"];
+        'show-all-assets': import('./blocks').CxSbDamView["showAllAssets"];
+        'show-bottom-pagination': import('./blocks').CxSbDamView["showBottomPagination"];
+        'show-breadcrumbs': import('./blocks').CxSbDamView["showBreadcrumbs"];
+        'show-group-by': import('./blocks').CxSbDamView["showGroupBy"];
+        'show-left-panel': import('./blocks').CxSbDamView["showLeftPanel"];
+        'show-page-title': import('./blocks').CxSbDamView["showPageTitle"];
+        'show-right-panel': import('./blocks').CxSbDamView["showRightPanel"];
+        'show-search-box': import('./blocks').CxSbDamView["showSearchBox"];
+        'show-sort-dropdown': import('./blocks').CxSbDamView["showSortDropdown"];
+        'show-top-pagination': import('./blocks').CxSbDamView["showTopPagination"];
+        'show-view-switcher': import('./blocks').CxSbDamView["showViewSwitcher"];
+    } | {
         'use-padding': boolean;
     } | {
         'can-open-asset': import('./blocks/document-viewer/document-viewer').default["canOpenAsset"];

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

@@ -29,6 +29,9 @@ export declare const defaultBlockValue: {
     BlockColumns: {
         components: undefined;
     };
+    BlockDamView: {
+        components: undefined;
+    };
     BlockDivider: {
         components: undefined;
     };

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

@@ -262,6 +262,7 @@ export default class CxContentBuilder extends CortexElement {
     handleBuilderPropsChange(): void;
     onRequestAsset(type: AssetTypeString): Promise<Asset>;
     onRequestDownloadFormat(assetIds: string[], formats?: Record<string, string[]>): Promise<{}>;
+    onConfigureWorkflow(buttonId?: string): Promise<string>;
     onRequestAssetFormat(_assetId: string, _value?: AssetFormatValue): Promise<AssetFormatValue | null | undefined>;
     /**
      * This method retrieves all the components of the specified component.

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

@@ -0,0 +1,5 @@
+import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
+
+declare const DamViewPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
+export default DamViewPlugin;

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

@@ -7,6 +7,7 @@ export { default as ColumnPlugin } from './column';
 export { default as ColumnGroupPlugin } from './column-group';
 export { default as CorePlugin } from './core';
 export { default as InjectCustomFrameAbilityForGrapesJS } from './custom-frame';
+export { default as DamViewPlugin } from './dam-view';
 export { default as DividerPlugin } from './divider';
 export { default as DocumentViewerPlugin } from './document-viewer';
 export { default as FontKitPlugin } from './font-kit';