@orangelogic/design-system 2.95.0 → 2.97.0

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

@@ -1,10 +1,10 @@
-import { BlockType } from '../../../types/src/content-builder';
+import { BlockType, ConfigsOptions } from '../../../types/src/content-builder';
 import { LocalizeController } from '../../../utils/src/custom-element/i18n';
 
 export default class ConfigsController {
     private readonly localize;
     constructor(localize: LocalizeController);
-    getConfigs(type: BlockType): import('../../../types/src/content-builder').PropertyConfig<{
+    getConfigs(type: BlockType, options?: ConfigsOptions): import('../../../types/src/content-builder').PropertyConfig<{
         data: string;
         'data-constraints': boolean;
         'default-open-indexes': string;
@@ -46,8 +46,10 @@ export default class ConfigsController {
         'content-variant': import('../../../types/src/gallery-item').GalleryItemContentVariant;
         'data-constraints': boolean;
         'details-source-field': string;
+        'download-format': string;
         easing: import('../../../types/src/index.ts').Easing;
         effect: import('../../../types/src/highlightable-element').HighlightableElementEffect;
+        format: string;
         'header-source-field': string;
         'highlight-border': boolean;
         'highlight-color-overlay': boolean;
@@ -63,6 +65,8 @@ export default class ConfigsController {
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
         'text-reveal-style': import('../../../types/src/highlightable-element').HighlightableElementTextRevealStyle;
+        'transformation-record-id': string;
+        transformations: string;
         'transition-type': import('../../../types/src/index.ts').TransitionType;
         variant: string;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
@@ -111,8 +115,10 @@ export default class ConfigsController {
         'content-type': import('../../../types/src/gallery').ContentType;
         'content-variant': import('../../../types/src/gallery-item').GalleryItemContentVariant;
         'details-source-field': string;
+        'download-format': string;
         easing: import('../../../types/src/index.ts').Easing;
         effect: import('../../../types/src/highlightable-element').HighlightableElementEffect;
+        format: string;
         'header-source-field': string;
         'highlight-background': boolean;
         'highlight-border': boolean;
@@ -134,6 +140,8 @@ export default class ConfigsController {
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
         'text-reveal-style': import('../../../types/src/highlightable-element').HighlightableElementTextRevealStyle;
+        'transformation-record-id': string;
+        transformations: string;
         variant: import('../../../types/src/gallery').GalleryVariant;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
@@ -167,8 +175,10 @@ export default class ConfigsController {
         'download-id'?: import('./blocks/image/image').default["downloadId"];
         'download-names'?: import('./blocks/image/image').default["downloadNames"];
         'download-src'?: import('./blocks/image/image').default["downloadSrc"];
-        easing?: import('./blocks/image/image').default["easing"];
-        effect?: import('./blocks/image/image').default["effect"];
+        easing: import('./blocks/image/image').default["easing"];
+        effect: import('./blocks/image/image').default["effect"];
+        format: import('./blocks/image/image').default["format"];
+        'format-dark-mode': import('./blocks/image/image').default["formatDarkMode"];
         'header-source-field': import('./blocks/image/image').default["headerSourceField"];
         height: import('./blocks/image/image').default["height"];
         'height-mode': import('./blocks/image/image').default["heightMode"];
@@ -187,6 +197,7 @@ export default class ConfigsController {
         src: import('./blocks/image/image').default["src"];
         'src-dark-mode': import('./blocks/image/image').default["srcDarkMode"];
         'text-reveal-style'?: import('./blocks/image/image').default["textRevealStyle"];
+        transformations: string;
         'transition-type'?: string;
         width: import('./blocks/image/image').default["width"];
         'zoom-style'?: import('./blocks/image/image').default["zoomStyle"];
@@ -207,13 +218,17 @@ export default class ConfigsController {
         'data-constraints': boolean;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         data: string;
+        format: string;
         'min-tab-width': string;
         'multi-language': boolean;
         'navigation-arrows': boolean;
         'show-thumbnails': boolean;
         'tabs-per-page': number;
+        'transformation-record-id': string;
+        transformations: string;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'additional-fields': string;
+        'asset-version': import('../../../types/src/asset-format-picker').AssetVersion;
         autoplay: import('./blocks/video/video').default["autoplay"];
         'click-action': import('../../../types/src/asset-click-action').ClickAction;
         'click-link'?: import('./blocks/video/video').default["clickLink"];
@@ -231,6 +246,9 @@ export default class ConfigsController {
         'download-id'?: import('./blocks/video/video').default["downloadId"];
         'download-names'?: import('./blocks/video/video').default["downloadNames"];
         'download-src'?: import('./blocks/video/video').default["downloadSrc"];
+        format: string;
+        'format-label'?: string;
+        'format-src': string;
         'header-source-field': import('./blocks/video/video').default["headerSourceField"];
         height: import('./blocks/video/video').default["height"];
         'height-mode': import('./blocks/video/video').default["heightMode"];
@@ -247,6 +265,10 @@ export default class ConfigsController {
         'share-src'?: import('./blocks/video/video').default["shareSrc"];
         'show-controls': import('./blocks/video/video').default["showControls"];
         src: import('./blocks/video/video').default["src"];
+        'thumbnail-format'?: string;
+        'thumbnail-record-id'?: string;
+        'thumbnail-transformations'?: string;
+        'version-label'?: string;
         width: import('./blocks/video/video').default["width"];
     }>[];
     getName(type: BlockType): string;
@@ -287,8 +309,10 @@ export default class ConfigsController {
         'content-variant': import('../../../types/src/gallery-item').GalleryItemContentVariant;
         'data-constraints': boolean;
         'details-source-field': string;
+        'download-format': string;
         easing: import('../../../types/src/index.ts').Easing;
         effect: import('../../../types/src/highlightable-element').HighlightableElementEffect;
+        format: string;
         'header-source-field': string;
         'highlight-border': boolean;
         'highlight-color-overlay': boolean;
@@ -304,6 +328,8 @@ export default class ConfigsController {
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
         'text-reveal-style': import('../../../types/src/highlightable-element').HighlightableElementTextRevealStyle;
+        'transformation-record-id': string;
+        transformations: string;
         'transition-type': import('../../../types/src/index.ts').TransitionType;
         variant: string;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
@@ -349,8 +375,10 @@ export default class ConfigsController {
         'content-type': import('../../../types/src/gallery').ContentType;
         'content-variant': import('../../../types/src/gallery-item').GalleryItemContentVariant;
         'details-source-field': string;
+        'download-format': string;
         easing: import('../../../types/src/index.ts').Easing;
         effect: import('../../../types/src/highlightable-element').HighlightableElementEffect;
+        format: string;
         'header-source-field': string;
         'highlight-background': boolean;
         'highlight-border': boolean;
@@ -372,6 +400,8 @@ export default class ConfigsController {
         'source-variant': import('../../../types/src/gallery').SourceVariant;
         src: string;
         'text-reveal-style': import('../../../types/src/highlightable-element').HighlightableElementTextRevealStyle;
+        'transformation-record-id': string;
+        transformations: string;
         variant: import('../../../types/src/gallery').GalleryVariant;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
     }> | {
@@ -387,13 +417,17 @@ export default class ConfigsController {
         'data-constraints': boolean;
     } | {
         data: string;
+        format: string;
         'min-tab-width': string;
         'multi-language': boolean;
         'navigation-arrows': boolean;
         'show-thumbnails': boolean;
         'tabs-per-page': number;
+        'transformation-record-id': string;
+        transformations: string;
     } | Partial<{
         'additional-fields': string;
+        'asset-version': import('../../../types/src/asset-format-picker').AssetVersion;
         autoplay: import('./blocks/video/video').default["autoplay"];
         'click-action': import('../../../types/src/asset-click-action').ClickAction;
         'click-link'?: import('./blocks/video/video').default["clickLink"];
@@ -411,6 +445,9 @@ export default class ConfigsController {
         'download-id'?: import('./blocks/video/video').default["downloadId"];
         'download-names'?: import('./blocks/video/video').default["downloadNames"];
         'download-src'?: import('./blocks/video/video').default["downloadSrc"];
+        format: string;
+        'format-label'?: string;
+        'format-src': string;
         'header-source-field': import('./blocks/video/video').default["headerSourceField"];
         height: import('./blocks/video/video').default["height"];
         'height-mode': import('./blocks/video/video').default["heightMode"];
@@ -427,6 +464,10 @@ export default class ConfigsController {
         'share-src'?: import('./blocks/video/video').default["shareSrc"];
         'show-controls': import('./blocks/video/video').default["showControls"];
         src: import('./blocks/video/video').default["src"];
+        'thumbnail-format'?: string;
+        'thumbnail-record-id'?: string;
+        'thumbnail-transformations'?: string;
+        'version-label'?: string;
         width: import('./blocks/video/video').default["width"];
     }>;
     getStylable(type: BlockType): string[];

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

@@ -30,5 +30,5 @@ export declare const OMITTED_ATTRIBUTES: string[];
 export declare const OMITTED_PROPERTIES: never[];
 export declare const BLOCK_CAROUSEL_LIMITED_BLOCKS: BlockType[];
 export declare const NEWLY_ADDED_COMPONENT_DELAY = 500;
-export declare const OPEN_ON_NEWLY_ADDED_COMPONENT: BlockType[];
-export declare const MULTI_LANGUAGE_BLOCKS: BlockType[];
+export declare const OPEN_ON_NEWLY_ADDED_COMPONENT: Set<BlockType>;
+export declare const MULTI_LANGUAGE_BLOCKS: Set<BlockType>;

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

@@ -3,6 +3,7 @@ import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
 import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts';
 import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { AssetFormatValue } from '../../../types/src/asset-format-picker';
 import { Asset, AssetTypeString, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
 import { Component, Editor, StyleProps } from 'grapesjs';
 import { TemplateResult } from 'lit';
@@ -13,6 +14,10 @@ import { CxRTEBubbleMenu, CxRTETableGenerator } from './plugins';
 /**
  * @summary The `cx-content-builder` component is used to create and manage content blocks in a CMS.
  *
+ * 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.
+ *
  * @event cx-change - Emitted when the content builder changes.
  */
 export default class CxContentBuilder extends CortexElement {
@@ -93,6 +98,13 @@ export default class CxContentBuilder extends CortexElement {
      * @default false
      */
     allowDuplicateBlocks: boolean;
+    /**
+     * 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.
+     * @default false
+     */
+    enableAssetFormatControls: boolean;
     /**
      * The default language of the content builder.
      * This is the language that will be used to store the translatable texts.
@@ -248,6 +260,7 @@ export default class CxContentBuilder extends CortexElement {
     handleBuilderPropsChange(): void;
     onRequestAsset(type: AssetTypeString): Promise<Asset>;
     onRequestDownloadFormat(assetIds: string[], formats?: Record<string, string[]>): Promise<{}>;
+    onRequestAssetFormat(_assetId: string, _value?: AssetFormatValue): Promise<AssetFormatValue | null | undefined>;
     /**
      * This method retrieves all the components of the specified component.
      * It recursively traverses the component's children and adds them to the list.

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

@@ -1,5 +1,49 @@
-import { Editor } from 'grapesjs';
+import { Component, ComponentDefinition, ComponentView, ComponentViewDefinition, Editor } from 'grapesjs';
+import { default as _delay } from 'lodash-es/delay';
 import { EditorPluginOptions } from './plugin-factory';
 
+export declare const GALLERY_TAG_NAME = "cx-gallery";
+export type GalleryTimerMap = WeakMap<Component, ReturnType<typeof _delay>>;
+type GalleryViewThis = ComponentViewDefinition & ComponentView<Component>;
+/**
+ * `clearHover` defaults to clearing grapesjs's hovered model. The carousel
+ * plugin passes a DOM mouseleave dispatch instead, because its lightbox
+ * interaction needs a different cleanup path.
+ */
+export declare function createBlockHoverEvent(editor: Editor, clearHover?: () => void): (event: MouseEvent) => void;
+export declare function handleOnRequestAsset(model: Component): void;
+export declare function createHandleComponentChange(timerId: GalleryTimerMap, options?: {
+    columnStyle?: ComponentDefinition['style'];
+}): (model: Component) => void;
+export declare function createInit({ editor, handleComponentChange, timerId, }: {
+    editor: Editor;
+    handleComponentChange: (model: Component) => void;
+    timerId: GalleryTimerMap;
+}): (model: Component) => void;
+export declare function createRemoved({ handleComponentChange, timerId, }: {
+    handleComponentChange: (model: Component) => void;
+    timerId: GalleryTimerMap;
+}): (model: Component) => void;
+/**
+ * Move a record one position. `wrap: true` makes the first/last item swap
+ * with the last/first (used by the carousel in loop mode); `wrap: false`
+ * leaves the boundary item in place (used by the gallery, which hides the
+ * arrow button in that case).
+ */
+export declare function performMoveItem(model: Component, itemDetail: {
+    id?: string;
+    rawId?: string;
+}, direction: 'left' | 'right', options?: {
+    wrap?: boolean;
+}): void;
+/**
+ * View methods that the gallery and carousel plugins share verbatim. Move,
+ * config-hide/show, and the events() list stay in the caller because they
+ * differ between plugins.
+ */
+export declare function createSharedViewMethods({ editor, handleComponentChange, }: {
+    editor: Editor;
+    handleComponentChange: (model: Component) => void;
+}): Partial<ComponentViewDefinition> & ThisType<GalleryViewThis>;
 declare const GalleryPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default GalleryPlugin;

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

@@ -45,6 +45,25 @@ export default class StyleController {
         full?: boolean | undefined;
         accept?: string;
         api?: () => Promise<import('../../../types/src/content-builder').Option[]> | import('../../../types/src/folder-select').FolderSelectApi;
+        assetFormatPickerConfigs?: {
+            assetIdKey?: string;
+            assetVersionKey?: string;
+            formatLabelKey?: string;
+            formatSrcKey?: string;
+            versionLabelKey?: string;
+        };
+        assetTransformationConfigs?: {
+            assetIdKey?: string;
+            defaultFormat?: string;
+            dialogLabel?: string;
+            formatKey?: string;
+            multiple?: boolean;
+            noCrop?: boolean;
+            noResize?: boolean;
+            noRotate?: boolean;
+            recordsKey?: string;
+            srcKey?: string;
+        };
         callback?: ((params: {
             extraValue?: Record<string, unknown>;
             record: Record<string, any>;
@@ -53,7 +72,7 @@ export default class StyleController {
         checkedValue?: string | boolean;
         children?: import('../../../types/src/content-builder').PropertyConfig[];
         clearable?: boolean;
-        controlType: "bicolor-picker" | "border-input-group" | "button-group" | "checkbox" | "checkbox-group" | "color-swatch-picker" | "corner-position-input-group" | "download-format-picker" | "file" | "folder-picker" | "gallery-picker" | "group" | "group-heading" | "icon-picker" | "image-picker" | "input" | "list-editor" | "all-picker" | "other-picker" | "padding-input-group" | "page-picker" | "placeholder" | "position-picker" | "radio-card-group" | "radio-group" | "select" | "shadow-input-group" | "size-input-group" | "switch" | "table" | "text" | "video-picker";
+        controlType: "asset-transformation" | "bicolor-picker" | "border-input-group" | "button-group" | "checkbox" | "checkbox-group" | "color-swatch-picker" | "corner-position-input-group" | "download-format-picker" | "file" | "folder-picker" | "gallery-picker" | "group" | "group-heading" | "icon-picker" | "image-picker" | "input" | "list-editor" | "all-picker" | "other-picker" | "padding-input-group" | "page-picker" | "placeholder" | "position-picker" | "radio-card-group" | "radio-group" | "select" | "shadow-input-group" | "size-input-group" | "switch" | "table" | "text" | "asset-format-picker" | "video-picker";
         cornerStyleKey?: {
             offsetX: string;
             offsetY: string;
@@ -62,13 +81,19 @@ export default class StyleController {
         disabled?: boolean | ((record: Record<string, unknown>) => boolean);
         disabledTooltip?: string;
         downloadFormatPickerConfigs?: {
+            allowDocTypes?: string[];
             assetIdsKey?: string;
+            isObjectFormat?: boolean;
+            objectIdKey?: string;
         };
         folderPickerConfigs?: {
             useFullPath: boolean;
         };
         galleryPickerConfigs?: {
             dialog: import('../../../types/src/content-builder').DialogType;
+            formatKey?: string;
+            transformationRecordIdKey?: string;
+            transformationsKey?: string;
         };
         groupConfigs?: {
             columnGap?: string;

package/library/packages/organisms/src/index.d.ts

@@ -1,4 +1,5 @@
 export { default as CxAssetLinkFormat } from './asset-link-format/asset-link-format';
+export { default as CxAssetTransformationDialog } from './asset-transformation-dialog/asset-transformation-dialog';
 export { default as CxDashboardFilter } from './dashboard-filter/dashboard-filter';
 export { default as CxDashboardTable } from './dashboard-table/dashboard-table';
 export { default as CxBentoGrid } from './bento-grid/bento-grid';
@@ -12,6 +13,7 @@ export { default as CxContentBuilder } from './content-builder/content-builder';
 export { default as CxDownloader } from './downloader/downloader';
 export { default as CxFileOnDemand } from './file-on-demand/file-on-demand';
 export { default as CxFindAndReplace } from './find-and-replace/find-and-replace';
+export { default as CxLightbox } from './lightbox/lightbox';
 export { default as CxMultiSelect } from './multi-select/multi-select';
 export { default as CxSpecialCharactersDialog } from './special-characters-dialog/special-characters-dialog';
 export { default as CxTemplateSwitcher } from './template-switcher/template-switcher';

package/library/packages/organisms/src/lightbox/lightbox.d.ts

@@ -0,0 +1,79 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
+import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { default as CxCarousel } from '../carousel/carousel.ts';
+import { GalleryItem } from '../../../types/src/gallery-item';
+import { TemplateResult } from 'lit';
+
+/**
+ * @summary A fullscreen lightbox that wraps a dialog and carousel for browsing gallery items.
+ * Supports download, keyboard/click-to-close, and lazy loading via chunk-based data fetching.
+ *
+ * @csspart base - The outer lightbox wrapper inside the dialog body.
+ * @csspart toolbar - The top-right action toolbar.
+ * @csspart counter - The slide counter label.
+ *
+ * @event cx-lightbox-close - Emitted when the lightbox is closed. Detail: `{ index: number }`
+ * @event cx-lightbox-download - Emitted when the download button is clicked. Detail: `{ index: number; item: GalleryItem }`
+ * @event cx-slide-change - Re-emitted from the internal carousel when the active slide changes.
+ * @event cx-gallery-chunk-request - Re-emitted from the internal carousel when more data is needed.
+ */
+export default class CxLightbox extends CortexElement {
+    static readonly styles: import('lit').CSSResult[];
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-carousel': typeof CxCarousel;
+        'cx-dialog': typeof CxDialog;
+        'cx-icon': typeof CxIcon;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    private readonly carouselEl?;
+    /**
+     * Controls visibility of the lightbox.
+     */
+    open: boolean;
+    /**
+     * Array of slide items to display.
+     */
+    data: GalleryItem[];
+    /**
+     * Total number of items (used for the counter and carousel chunking).
+     */
+    totalData: number;
+    /**
+     * Loaded data range passed through to the carousel for lazy loading.
+     */
+    chunk: [number, number];
+    /**
+     * The slide index to jump to when the lightbox opens.
+     */
+    startIndex: number;
+    /**
+     * Whether the carousel loops back to the start after the last slide.
+     */
+    loop: boolean;
+    /**
+     * Show the download button in the toolbar.
+     */
+    canDownload: boolean;
+    /**
+     * Current active slide index, synced from internal carousel.
+     */
+    private activeIndex;
+    mappedData: GalleryItem[];
+    handleOpenChange(): Promise<void>;
+    handleDataChange(): void;
+    private handleRequestClose;
+    private handleSlideChange;
+    private handleDownload;
+    private renderToolbar;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-lightbox': CxLightbox;
+    }
+}

package/library/packages/organisms/src/lightbox/lightbox.styles.d.ts

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

package/library/packages/services/src/api/asset/asset.d.ts

@@ -37,8 +37,8 @@ export declare function apiGetTransformAssetLink({ assetId, extension, format, s
     transformations?: string;
     useSession?: string;
 }): Promise<GetTransformAssetLinkResponse | null>;
-export declare function apiGetAssets({ extraFields, recordIds, }: GetAssetsRequest): Promise<GetAssetsResponse>;
-export declare function apiGetAssetsInFolder({ countPerPage, extraFields, limitedDocTypes, pageNumber, parentFolderIdentifier, searchTerm, sortOrder, }: GetAssetsInFolderRequest): Promise<GetAssetsInFolderResponse>;
+export declare function apiGetAssets({ extraFields, getPermanentAssetsPaths, recordIds, token, }: GetAssetsRequest): Promise<GetAssetsResponse>;
+export declare function apiGetAssetsInFolder({ countPerPage, extraFields, getPermanentAssetsPaths, limitedDocTypes, pageNumber, parentFolderIdentifier, searchTerm, sortOrder, token, }: GetAssetsInFolderRequest): Promise<GetAssetsInFolderResponse>;
 export declare function apiGetCropFocusMode({ autoCropMode, cropHeight, cropWidth, imageUrl, useSession, }: GetCropZoneSuggestionRequest): Promise<GetCropZoneSuggestionResponse | null>;
 export declare function apiGetAvailableProxies({ assetRecordId, siteUrl, token, useSession, }: {
     assetRecordId: string;

package/library/packages/services/src/api/asset/asset.types.d.ts

@@ -38,11 +38,13 @@ export type Facet = {
 export type GetAssetsInFolderRequest = {
     countPerPage: number;
     extraFields?: string[];
+    getPermanentAssetsPaths?: boolean;
     limitedDocTypes: string[];
     pageNumber: number;
     parentFolderIdentifier: string;
     searchTerm: string;
     sortOrder: string;
+    token?: string;
 };
 export type GetAssetsInFolderResponse = {
     facets: Facet[];
@@ -64,7 +66,9 @@ export type GetTransformAssetLinkResponse = {
 };
 export type GetAssetsRequest = {
     extraFields?: string[];
+    getPermanentAssetsPaths?: boolean;
     recordIds: string[];
+    token?: string;
 };
 export type GetAssetsResponse = {
     facets: Facet[];

package/library/packages/tools/src/fetch-asset/fetch-asset.d.ts

@@ -4,9 +4,10 @@ export declare class FetchAssetController implements ReactiveController {
     private readonly host;
     private data;
     constructor(host: ReactiveElement);
-    fetchAssetByID({ extraFields, recordId, }: {
+    fetchAssetByID({ extraFields, recordId, token, }: {
         extraFields?: string[];
         recordId: string;
+        token?: string;
     }): Promise<Record<string, string>>;
     hostConnected?(): void;
     hostDisconnected?(): void;

package/library/packages/tools/src/fetch-image/fetch-image.d.ts

@@ -1,3 +1,4 @@
+import { Transformation } from '../../../types/src/asset-link-format';
 import { GalleryItem } from '../../../types/src/gallery-item';
 import { ReactiveController, ReactiveElement } from 'lit';
 
@@ -7,7 +8,9 @@ export type ExtendedGalleryItem = GalleryItem & {
 type FetchImageControllerOptions = {
     maxEnd?: number;
     pageSize?: number;
+    token?: string;
 };
+export declare function isSupportedImageExtension(extension: string): boolean;
 export declare class FetchImageController implements ReactiveController {
     private readonly host;
     private data;
@@ -17,40 +20,51 @@ export declare class FetchImageController implements ReactiveController {
     private totalCount;
     private maxEnd;
     private pageSize;
+    private readonly authToken;
     constructor(host: ReactiveElement, options?: FetchImageControllerOptions);
     get totalDataCount(): number;
-    fetchImages({ end, extraFields, start, }: {
+    fetchImages({ end, extraFields, format, start, transformations, }: {
         end: number;
         extraFields: string[];
+        format?: string;
         start: number;
+        transformations?: Transformation[];
     }): Promise<ExtendedGalleryItem[] | undefined>;
-    fetchImagesInFolderBySlide({ activeSlide, extraFields, folderId, forceRefetch, minLimit, noPlaceholders, }: {
+    fetchImagesInFolderBySlide({ activeSlide, extraFields, folderId, forceRefetch, format, minLimit, noPlaceholders, transformations, }: {
         activeSlide: number;
         extraFields?: string[];
         folderId: string;
         forceRefetch?: boolean;
+        format?: string;
         minLimit?: number;
         noPlaceholders?: boolean;
+        transformations?: Transformation[];
     }): Promise<ExtendedGalleryItem[]>;
-    fetchImagesByIDs({ extraFields, recordIds, }: {
+    fetchImagesByIDs({ extraFields, format, recordIds, transformations, }: {
         extraFields?: string[];
+        format?: string;
         recordIds: string[];
+        transformations?: Transformation[];
     }): Promise<ExtendedGalleryItem[]>;
-    fetchImagesInFolderByPage({ extraFields, folderId, forceRefetch, noPlaceholders, page, pageSize, }: {
+    fetchImagesInFolderByPage({ extraFields, folderId, forceRefetch, format, noPlaceholders, page, pageSize, transformations, }: {
         extraFields?: string[];
         folderId: string;
         forceRefetch?: boolean;
+        format?: string;
         noPlaceholders?: boolean;
         page: number;
         pageSize?: number;
+        transformations?: Transformation[];
     }): Promise<ExtendedGalleryItem[]>;
-    fetchImagesInFolderByChunk({ chunkSize: rawChunkSize, end, extraFields, folderId, forceRefetch, start, }: {
+    fetchImagesInFolderByChunk({ chunkSize: rawChunkSize, end, extraFields, folderId, forceRefetch, format, start, transformations, }: {
         chunkSize?: number;
         end?: number;
         extraFields?: string[];
         folderId: string;
         forceRefetch?: boolean;
+        format?: string;
         start?: number;
+        transformations?: Transformation[];
     }): AsyncGenerator<ExtendedGalleryItem[], void, unknown>;
     hostConnected?(): void;
     hostDisconnected?(): void;

package/library/packages/types/src/asset-click-action.d.ts

@@ -2,12 +2,14 @@ export declare enum ClickAction {
     DoNothing = "do-nothing",
     DownloadAsset = "download-asset",
     ExpandAssetInFullScreen = "expand-asset-in-full-screen",
+    OpenAssetInLibrary = "open-asset-in-library",
     OpenAssetOverview = "open-asset-overview",
     OpenLink = "open-link",
     OpenPage = "open-page",
     OpenSpace = "open-space",
     ShareAsset = "share-asset",
-    ShowAssetInLibrary = "show-asset-in-library"
+    ShowAssetInLibrary = "show-asset-in-library",
+    Zoom = "zoom"
 }
 export type AssetFormat = {
     _3DFormats?: string[];

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

@@ -0,0 +1,11 @@
+export declare enum AssetVersion {
+    Current = "current",
+    Latest = "latest"
+}
+export interface AssetFormatValue {
+    assetSrc?: string;
+    assetVersion: AssetVersion | string;
+    format: string;
+    formatLabel?: string;
+    versionLabel?: string;
+}

package/library/packages/types/src/bento-grid.d.ts

@@ -16,3 +16,40 @@ export declare enum FillerMode {
     Fit = "fit",
     Full = "full"
 }
+/** Pixel position of a single placed bento item (absolute coordinates). */
+export interface BentoItemPosition {
+    /** 0-based exclusive column index where the item ends (used for data-column attribute). */
+    columnEnd: number;
+    /** 0-based column index where the item starts (used for data-column attribute). */
+    columnStart: number;
+    height: number;
+    left: number;
+    /** 0-based row index where the item starts (used for maxRows filtering and data-row attribute). */
+    rowStart: number;
+    top: number;
+    width: number;
+}
+/** Parameters passed to BentoLayout.compute(). */
+export interface BentoLayoutParams {
+    columnGap: number;
+    columns: number;
+    containerWidth: number;
+    itemHeight: number;
+    /**
+     * Maximum number of rows to display. When finite, scroll height is capped at
+     * maxRows × (itemHeight + rowGap) − rowGap so hidden rows don't inflate the container.
+     */
+    maxRows?: number;
+    rowGap: number;
+    /**
+     * Total number of items including those not yet loaded.
+     * When provided and greater than items.length, the scroll height is extended
+     * to approximate the full dataset size (unloaded items assumed to be 1×1).
+     */
+    totalItems?: number;
+}
+/** Inclusive item index range returned by BentoLayout.getActiveRange(). */
+export interface BentoActiveRange {
+    first: number;
+    last: number;
+}