@umbraco-cms/backoffice 17.1.0 → 17.2.0-rc

package/dist-cms/packages/core/collection/conditions/index.js

@@ -1,2 +1,3 @@
 export * from './collection-alias.condition.js';
+export * from './collection-has-items.condition.js';
 export * from './constants.js';

package/dist-cms/packages/core/collection/conditions/manifests.js

@@ -1,9 +1,17 @@
-import { UMB_COLLECTION_ALIAS_CONDITION } from './constants.js';
+import UmbCollectionAliasCondition from './collection-alias.condition.js';
+import { UmbCollectionHasItemsCondition } from './collection-has-items.condition.js';
+import { UMB_COLLECTION_ALIAS_CONDITION, UMB_COLLECTION_HAS_ITEMS_CONDITION_ALIAS } from './constants.js';
 export const manifests = [
     {
         type: 'condition',
         name: 'Collection Alias Condition',
         alias: UMB_COLLECTION_ALIAS_CONDITION,
-        api: () => import('./collection-alias.condition.js'),
+        api: UmbCollectionAliasCondition,
+    },
+    {
+        type: 'condition',
+        name: 'Collection Has Items Condition',
+        alias: UMB_COLLECTION_HAS_ITEMS_CONDITION_ALIAS,
+        api: UmbCollectionHasItemsCondition,
     },
 ];

package/dist-cms/packages/core/collection/conditions/types.d.ts

@@ -1,4 +1,4 @@
-import type { UMB_COLLECTION_ALIAS_CONDITION } from './constants.js';
+import type { UMB_COLLECTION_ALIAS_CONDITION, UMB_COLLECTION_HAS_ITEMS_CONDITION_ALIAS } from './constants.js';
 import type { UmbConditionConfigBase } from '../../../../libs/extension-api/index.js';
 export type CollectionAliasConditionConfig = UmbConditionConfigBase<typeof UMB_COLLECTION_ALIAS_CONDITION> & {
     /**
@@ -8,8 +8,11 @@ export type CollectionAliasConditionConfig = UmbConditionConfigBase<typeof UMB_C
      */
     match: string;
 };
+export interface UmbCollectionHasItemsConditionConfig extends UmbConditionConfigBase<typeof UMB_COLLECTION_HAS_ITEMS_CONDITION_ALIAS> {
+}
 declare global {
     interface UmbExtensionConditionConfigMap {
         CollectionAliasConditionConfig: CollectionAliasConditionConfig;
+        UmbCollectionHasItemsConditionConfig: UmbCollectionHasItemsConditionConfig;
     }
 }

package/dist-cms/packages/core/collection/default/collection-default.context.d.ts

@@ -4,9 +4,10 @@ import type { UmbCollectionFilterModel } from '../collection-filter-model.interf
 import type { UmbCollectionRepository } from '../repository/collection-repository.interface.js';
 import type { ManifestCollection } from '../extensions/types.js';
 import { UmbCollectionBulkActionManager } from '../bulk-action/collection-bulk-action.manager.js';
-import { UmbArrayState, UmbNumberState, UmbObjectState } from '../../../../libs/observable-api/index.js';
+import { UmbCollectionSelectionManager } from '../selection/collection-selection.manager.js';
+import { UmbArrayState, UmbBooleanState, UmbNumberState, UmbObjectState } from '../../../../libs/observable-api/index.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
-import { UmbSelectionManager, UmbPaginationManager } from '../../utils/index.js';
+import { UmbPaginationManager } from '../../utils/index.js';
 import type { UmbApi } from '../../../../libs/extension-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 import { type UmbModalRouteBuilder } from '../../router/index.js';
@@ -25,11 +26,13 @@ export declare class UmbDefaultCollectionContext<CollectionItemType extends {
     readonly totalItems: import("rxjs").Observable<number>;
     protected _filter: UmbObjectState<object | FilterModelType>;
     readonly filter: import("rxjs").Observable<object | FilterModelType>;
+    protected _selectOnly: UmbBooleanState<undefined>;
+    readonly selectOnly: import("rxjs").Observable<boolean | undefined>;
     readonly workspacePathBuilder: import("rxjs").Observable<UmbModalRouteBuilder | undefined>;
     readonly userDefinedProperties: import("rxjs").Observable<UmbCollectionColumnConfiguration[]>;
     readonly viewLayouts: import("rxjs").Observable<UmbCollectionLayoutConfiguration[]>;
     readonly pagination: UmbPaginationManager;
-    readonly selection: UmbSelectionManager<string | null>;
+    readonly selection: UmbCollectionSelectionManager<import("../types.js").UmbCollectionItemModel>;
     readonly view: UmbCollectionViewManager;
     readonly bulkAction: UmbCollectionBulkActionManager;
     protected _init: Promise<void>;
@@ -47,7 +50,7 @@ export declare class UmbDefaultCollectionContext<CollectionItemType extends {
     set manifest(manifest: ManifestCollection | undefined);
     get manifest(): ManifestCollection | undefined;
     getEmptyLabel(): string;
-    loadCollection: (this: any, ...args: any[]) => void;
+    loadCollection: import("../../utils/index.js").UmbDebouncedFunction<() => Promise<void>>;
     /**
      * Requests the collection from the repository.
      * @returns {Promise<void>}

package/dist-cms/packages/core/collection/default/collection-default.context.js

@@ -1,12 +1,13 @@
 import { UmbCollectionViewManager } from '../view/collection-view.manager.js';
 import { UmbCollectionBulkActionManager } from '../bulk-action/collection-bulk-action.manager.js';
+import { UmbCollectionSelectionManager } from '../selection/collection-selection.manager.js';
 import { UMB_COLLECTION_CONTEXT } from './collection-default.context-token.js';
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
-import { UmbArrayState, UmbBasicState, UmbNumberState, UmbObjectState } from '../../../../libs/observable-api/index.js';
+import { UmbArrayState, UmbBasicState, UmbBooleanState, UmbNumberState, UmbObjectState, } from '../../../../libs/observable-api/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbExtensionApiInitializer } from '../../../../libs/extension-api/index.js';
-import { UmbSelectionManager, UmbPaginationManager, UmbDeprecation, debounce } from '../../utils/index.js';
+import { UmbPaginationManager, UmbDeprecation, debounce } from '../../utils/index.js';
 import { UmbRequestReloadChildrenOfEntityEvent, UmbRequestReloadStructureForEntityEvent, } from '../../entity-action/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../action/index.js';
 import { UMB_ENTITY_CONTEXT, UmbParentEntityContext } from '../../entity/index.js';
@@ -36,6 +37,8 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
         this.totalItems = this._totalItems.asObservable();
         this._filter = new UmbObjectState({});
         this.filter = this._filter.asObservable();
+        this._selectOnly = new UmbBooleanState(undefined);
+        this.selectOnly = this._selectOnly.asObservable();
         this.#workspacePathBuilder = new UmbBasicState(undefined);
         this.workspacePathBuilder = this.#workspacePathBuilder.asObservable();
         this.#userDefinedProperties = new UmbArrayState([], (x) => x.alias);
@@ -43,7 +46,7 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
         this.#viewLayouts = new UmbArrayState([], (x) => x.collectionView);
         this.viewLayouts = this.#viewLayouts.asObservable();
         this.pagination = new UmbPaginationManager();
-        this.selection = new UmbSelectionManager(this);
+        this.selection = new UmbCollectionSelectionManager(this);
         this.view = new UmbCollectionViewManager(this);
         this.bulkAction = new UmbCollectionBulkActionManager(this);
         this.#initialized = false;
@@ -133,6 +136,23 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
         if (!this.#config)
             return;
         this.#configureSelection();
+        this.bulkAction.setConfig(this.#config.bulkActionConfiguration);
+        // Observe bulk actions to enable selection when bulk actions are available
+        // Bulk Actions are an integrated part of a Collection so we handle it here instead of a configuration
+        this.observe(this.bulkAction.hasBulkActions, (hasBulkActions) => {
+            // Allow selection if there are bulk actions available
+            if (hasBulkActions) {
+                // TODO: This is a temporary workaround until we support two types of selection (bulk action selection and normal selection)
+                // We have to use the same selection configuration for both types of selection to ensure that selection works as expected in multi vs single select mode (ex: pickers).
+                // We currently disable bulk actions in pickers until we have a solution in place for supporting both types of selection.
+                // With this workaround the experience will be that a collection, supporting bulk actions configured as single select, will only be able to select one item at a time.
+                const config = this.#config?.selectionConfiguration;
+                const selectable = config?.selectable ?? true;
+                const multiple = config?.multiple ?? true;
+                this.selection.setSelectable(selectable);
+                this.selection.setMultiple(multiple);
+            }
+        }, 'umbCollectionHasBulkActionsObserver');
         if (this.#config.pageSize) {
             this.pagination.setPageSize(this.#config.pageSize);
         }
@@ -154,20 +174,6 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
         this.view.setConfig(viewManagerConfig);
         this._configured = true;
     }
-    #configureSelection() {
-        // TODO: We need support a collection selection configuration here so ex. Pickers can turn on single and multi select and set a selection.
-        this.selection.setSelectable(false);
-        this.selection.setMultiple(false);
-        // Observe bulk actions to enable selection when bulk actions are available
-        // Bulk Actions are an integrated part of a Collection so we handle it here instead of a configuration
-        this.observe(this.bulkAction.hasBulkActions, (hasBulkActions) => {
-            // Allow selection if there are bulk actions available
-            if (hasBulkActions) {
-                this.selection.setSelectable(true);
-                this.selection.setMultiple(true);
-            }
-        }, 'umbCollectionHasBulkActionsObserver');
-    }
     #checkIfInitialized() {
         if (this._repository) {
             this.#initialized = true;
@@ -190,6 +196,7 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
      */
     setConfig(config) {
         this.#config = config;
+        this._configure();
     }
     getConfig() {
         return this.#config;
@@ -316,4 +323,16 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
     async requestItemHref(_item) {
         return undefined;
     }
+    #configureSelection() {
+        const selectionConfiguration = this.#config?.selectionConfiguration;
+        this.selection.setConfig(selectionConfiguration);
+        const selectOnly = selectionConfiguration?.selectOnly;
+        this._selectOnly.setValue(selectOnly === true);
+        // If there is an selection, and selectOnly is not explicitly set, set selectOnly in context when there is more than 0 items selected.
+        this.observe(this.selection.selection, (selection) => {
+            if (selectOnly === undefined) {
+                this._selectOnly.setValue(selection.length > 0);
+            }
+        });
+    }
 }

package/dist-cms/packages/core/collection/filter/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/collection/filter/manifests.js

@@ -0,0 +1,2 @@
+import { manifests as textFilterManifests } from './text/manifests.js';
+export const manifests = [...textFilterManifests];

package/dist-cms/packages/core/collection/filter/text/collection-text-filter-api.interface.d.ts

@@ -0,0 +1,13 @@
+import type { UmbApi } from '../../../../../libs/extension-api/index.js';
+import type { Observable } from '../../../../../libs/observable-api/index.js';
+export interface UmbCollectionTextFilterApi extends UmbApi {
+    /**
+     * Observable for the current text filter value
+     */
+    text: Observable<string | undefined>;
+    /**
+     * Update the text filter value
+     * @param {string} value The filter text value
+     */
+    setText(value: string): void;
+}

package/dist-cms/packages/core/collection/filter/text/collection-text-filter-api.interface.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/collection/filter/text/collection-text-filter-element.interface.d.ts

@@ -0,0 +1,7 @@
+import type { UmbCollectionTextFilterApi } from './collection-text-filter-api.interface.js';
+import type { ManifestCollectionTextFilter } from './collection-text-filter.extension.js';
+import type { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
+export interface UmbCollectionTextFilterElement extends UmbControllerHostElement {
+    api?: UmbCollectionTextFilterApi;
+    manifest?: ManifestCollectionTextFilter;
+}

package/dist-cms/packages/core/collection/filter/text/collection-text-filter-element.interface.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/collection/filter/text/collection-text-filter.extension.d.ts

@@ -0,0 +1,11 @@
+import type { UmbCollectionTextFilterElement } from './collection-text-filter-element.interface.js';
+import type { UmbCollectionTextFilterApi } from './collection-text-filter-api.interface.js';
+import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '../../../../../libs/extension-api/index.js';
+export interface ManifestCollectionTextFilter extends ManifestElementAndApi<UmbCollectionTextFilterElement, UmbCollectionTextFilterApi>, ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
+    type: 'collectionTextFilter';
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        umbCollectionTextFilter: ManifestCollectionTextFilter;
+    }
+}

package/dist-cms/packages/core/collection/filter/text/collection-text-filter.extension.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/collection/filter/text/default-collection-text-filter.api.d.ts

@@ -0,0 +1,25 @@
+import type { UmbCollectionTextFilterApi } from './collection-text-filter-api.interface.js';
+import { UmbControllerBase } from '../../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+/**
+ * Default API for the collection text filter extension.
+ *
+ * This API handles updating the collection filter with a debounced text value.
+ * It consumes the collection context and applies the filter when the user types.
+ * @class UmbDefaultCollectionTextFilterApi
+ * @augments {UmbControllerBase}
+ * @implements {UmbCollectionTextFilterApi}
+ */
+export declare class UmbDefaultCollectionTextFilterApi extends UmbControllerBase implements UmbCollectionTextFilterApi {
+    #private;
+    readonly text: import("rxjs").Observable<string | undefined>;
+    constructor(host: UmbControllerHost);
+    /**
+     * Updates the collection filter with the given text value.
+     * The filter is debounced to avoid excessive updates while the user is typing.
+     * @param {string} value - The text value to filter the collection by.
+     */
+    setText(value: string): void;
+    destroy(): void;
+}
+export { UmbDefaultCollectionTextFilterApi as api };

package/dist-cms/packages/core/collection/filter/text/default-collection-text-filter.api.js

@@ -0,0 +1,47 @@
+import { UMB_COLLECTION_CONTEXT } from '../../default/index.js';
+import { UmbControllerBase } from '../../../../../libs/class-api/index.js';
+import { UmbStringState } from '../../../../../libs/observable-api/index.js';
+import { debounce } from '../../../utils/index.js';
+/**
+ * Default API for the collection text filter extension.
+ *
+ * This API handles updating the collection filter with a debounced text value.
+ * It consumes the collection context and applies the filter when the user types.
+ * @class UmbDefaultCollectionTextFilterApi
+ * @augments {UmbControllerBase}
+ * @implements {UmbCollectionTextFilterApi}
+ */
+export class UmbDefaultCollectionTextFilterApi extends UmbControllerBase {
+    #text;
+    #collectionContext;
+    constructor(host) {
+        super(host);
+        this.#text = new UmbStringState(undefined);
+        this.text = this.#text.asObservable();
+        this.#debouncedFilter = debounce((value) => this.#collectionContext?.setFilter({ filter: value }), 500);
+        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+            this.#collectionContext = instance;
+            this.#observeFilter();
+        });
+    }
+    #observeFilter() {
+        this.observe(this.#collectionContext?.filter, (value) => {
+            const filterText = value?.filter;
+            this.#text.setValue(filterText);
+        });
+    }
+    /**
+     * Updates the collection filter with the given text value.
+     * The filter is debounced to avoid excessive updates while the user is typing.
+     * @param {string} value - The text value to filter the collection by.
+     */
+    setText(value) {
+        this.#debouncedFilter(value);
+    }
+    #debouncedFilter;
+    destroy() {
+        this.#debouncedFilter.cancel();
+        super.destroy();
+    }
+}
+export { UmbDefaultCollectionTextFilterApi as api };

package/dist-cms/packages/core/collection/filter/text/default-collection-text-filter.element.d.ts

@@ -0,0 +1,32 @@
+import type { UmbCollectionTextFilterApi } from './collection-text-filter-api.interface.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+/**
+ * Default element for the collection text filter extension.
+ *
+ * Renders a text input that allows users to filter collection items.
+ * Works in conjunction with {@link UmbDefaultCollectionTextFilterApi} to apply the filter.
+ * @element umb-default-collection-text-filter
+ */
+export declare class UmbDefaultCollectionTextFilterElement extends UmbLitElement {
+    #private;
+    private _text;
+    /**
+     * The API instance that handles the filter logic.
+     * This is set by the extension system when the element is created.
+     * @returns {UmbCollectionTextFilterApi | undefined} The collection text filter API instance.
+     */
+    get api(): UmbCollectionTextFilterApi | undefined;
+    /**
+     * Sets the API instance that handles the filter logic.
+     * @param {UmbCollectionTextFilterApi | undefined} value - The collection text filter API instance.
+     */
+    set api(value: UmbCollectionTextFilterApi | undefined);
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbDefaultCollectionTextFilterElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-default-collection-text-filter': UmbDefaultCollectionTextFilterElement;
+    }
+}

package/dist-cms/packages/core/collection/filter/text/default-collection-text-filter.element.js

@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, html, state } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+/**
+ * Default element for the collection text filter extension.
+ *
+ * Renders a text input that allows users to filter collection items.
+ * Works in conjunction with {@link UmbDefaultCollectionTextFilterApi} to apply the filter.
+ * @element umb-default-collection-text-filter
+ */
+let UmbDefaultCollectionTextFilterElement = class UmbDefaultCollectionTextFilterElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._text = undefined;
+    }
+    #api;
+    /**
+     * The API instance that handles the filter logic.
+     * This is set by the extension system when the element is created.
+     * @returns {UmbCollectionTextFilterApi | undefined} The collection text filter API instance.
+     */
+    get api() {
+        return this.#api;
+    }
+    /**
+     * Sets the API instance that handles the filter logic.
+     * @param {UmbCollectionTextFilterApi | undefined} value - The collection text filter API instance.
+     */
+    set api(value) {
+        this.#api = value;
+        this.observe(this.#api?.text, (value) => (this._text = value), 'umbApiTextObserver');
+    }
+    #onTextFilterChange(event) {
+        const target = event.target;
+        const value = target.value || '';
+        this.#api?.setText(value);
+    }
+    render() {
+        return html `
+			<uui-input
+				value=${this._text || ''}
+				@input=${this.#onTextFilterChange}
+				label=${this.localize.term('placeholders_filter')}
+				placeholder=${this.localize.term('placeholders_filter')}
+				data-mark="collection-text-filter"></uui-input>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				flex: 1 1 auto;
+			}
+
+			uui-input {
+				width: 100%;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbDefaultCollectionTextFilterElement.prototype, "_text", void 0);
+UmbDefaultCollectionTextFilterElement = __decorate([
+    customElement('umb-default-collection-text-filter')
+], UmbDefaultCollectionTextFilterElement);
+export { UmbDefaultCollectionTextFilterElement };
+export { UmbDefaultCollectionTextFilterElement as element };

package/dist-cms/packages/core/collection/filter/text/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/collection/filter/text/manifests.js

@@ -0,0 +1,14 @@
+export const manifests = [
+    {
+        type: 'kind',
+        alias: 'Umb.Kind.CollectionTextFilter.Default',
+        matchKind: 'default',
+        matchType: 'collectionTextFilter',
+        manifest: {
+            type: 'collectionTextFilter',
+            kind: 'default',
+            element: () => import('./default-collection-text-filter.element.js'),
+            api: () => import('./default-collection-text-filter.api.js'),
+        },
+    },
+];

package/dist-cms/packages/core/collection/filter/text/types.d.ts

@@ -0,0 +1,3 @@
+export type * from './collection-text-filter.extension.js';
+export type * from './collection-text-filter-api.interface.js';
+export type * from './collection-text-filter-element.interface.js';

package/dist-cms/packages/core/collection/filter/text/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/collection/filter/types.d.ts

@@ -0,0 +1 @@
+export type * from './text/types.js';

package/dist-cms/packages/core/collection/filter/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/collection/index.d.ts

@@ -9,6 +9,7 @@ export * from './constants.js';
 export * from './default/collection-default.element.js';
 export * from './global-components.js';
 export * from './menu/index.js';
+export * from './view/index.js';
 export * from './workspace-view/index.js';
 export * from './default/collection-default.context.js';
 export * from './default/collection-default.context-token.js';

package/dist-cms/packages/core/collection/index.js

@@ -9,6 +9,7 @@ export * from './constants.js';
 export * from './default/collection-default.element.js';
 export * from './global-components.js';
 export * from './menu/index.js';
+export * from './view/index.js';
 export * from './workspace-view/index.js';
 export * from './default/collection-default.context.js';
 export * from './default/collection-default.context-token.js';

package/dist-cms/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.d.ts

@@ -1,10 +1,12 @@
-import type { UmbCollectionItemModel } from '../types.js';
 import type { UmbEntityCollectionItemElement } from '../entity-collection-item-element.interface.js';
+import type { UmbCollectionItemModel } from '../types.js';
 import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbWithOptionalThumbnailModel } from '../../../models/index.js';
+type UmbDefaultCollectionItemCardItemModel = UmbCollectionItemModel & UmbWithOptionalThumbnailModel;
 export declare class UmbDefaultCollectionItemCardElement extends UmbLitElement implements UmbEntityCollectionItemElement {
     #private;
-    item?: UmbCollectionItemModel;
+    item?: UmbDefaultCollectionItemCardItemModel;
     selectable: boolean;
     selected: boolean;
     selectOnly: boolean;
@@ -17,3 +19,4 @@ declare global {
         'umb-default-collection-item-card': UmbDefaultCollectionItemCardElement;
     }
 }
+export {};

package/dist-cms/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.js

@@ -32,7 +32,7 @@ let UmbDefaultCollectionItemCardElement = class UmbDefaultCollectionItemCardElem
         if (!this.item)
             return nothing;
         return html `
-			<uui-card-content-node
+			<umb-figure-card
 				name=${this.item.name ?? `${getItemFallbackName(this.item)}`}
 				href=${ifDefined(this.href)}
 				?selectable=${this.selectable}
@@ -41,15 +41,21 @@ let UmbDefaultCollectionItemCardElement = class UmbDefaultCollectionItemCardElem
 				?disabled=${this.disabled}
 				@selected=${this.#onSelected}
 				@deselected=${this.#onDeselected}
-				?readonly=${!this.href}>
+				?readonly=${!this.href}
+				background-color="var(--uui-color-surface)">
 				<slot name="actions" slot="actions"></slot>
-				${this.#renderIcon(this.item)}
-			</uui-card-content-node>
+				${this.item.thumbnail ? this.#renderThumbnail(this.item) : this.#renderIcon(this.item)}
+			</umb-figure-card>
 		`;
     }
+    #renderThumbnail(item) {
+        if (!item.thumbnail)
+            return nothing;
+        return html `<img src=${item.thumbnail.src} alt=${item.thumbnail.alt || item.name || ''} />`;
+    }
     #renderIcon(item) {
         const icon = item.icon || getItemFallbackIcon();
-        return html `<umb-icon slot="icon" name=${icon}></umb-icon>`;
+        return html `<umb-icon name=${icon}></umb-icon>`;
     }
 };
 __decorate([

package/dist-cms/packages/core/collection/manifests.js

@@ -1,12 +1,14 @@
 import { manifests as actionManifests } from './action/manifests.js';
+import { manifests as pickerModalManifests } from './collection-item-picker-modal/manifests.js';
 import { manifests as conditionManifests } from './conditions/manifests.js';
+import { manifests as filterManifests } from './filter/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
-import { manifests as pickerModalManifests } from './collection-item-picker-modal/manifests.js';
 import { manifests as viewManifests } from './view/manifests.js';
 import { manifests as workspaceViewManifests } from './workspace-view/manifests.js';
 export const manifests = [
     ...actionManifests,
     ...conditionManifests,
+    ...filterManifests,
     ...menuManifests,
     ...pickerModalManifests,
     ...viewManifests,

package/dist-cms/packages/core/collection/selection/collection-selection.manager.d.ts

@@ -0,0 +1,17 @@
+import type { UmbCollectionItemModel } from '../types.js';
+import type { UmbCollectionSelectionManagerConfig } from './types.js';
+import { UmbSelectionManager } from '../../utils/index.js';
+export declare class UmbCollectionSelectionManager<CollectionItemType extends UmbCollectionItemModel = UmbCollectionItemModel> extends UmbSelectionManager<UmbCollectionItemModel['unique']> {
+    #private;
+    selectableFilter: (item: CollectionItemType) => boolean;
+    /**
+     * Sets the configuration for the selection manager.
+     * @param {UmbCollectionSelectionManagerConfig | undefined} config - Initial configuration for the selection manager.
+     */
+    setConfig(config: UmbCollectionSelectionManagerConfig | undefined): void;
+    /**
+     * The current configuration of the selection manager.
+     * @returns {UmbCollectionSelectionManagerConfig | undefined} - The current configuration of the selection manager.
+     */
+    getConfig(): UmbCollectionSelectionManagerConfig | undefined;
+}

package/dist-cms/packages/core/collection/selection/collection-selection.manager.js

@@ -0,0 +1,29 @@
+import { UmbSelectionManager } from '../../utils/index.js';
+export class UmbCollectionSelectionManager extends UmbSelectionManager {
+    constructor() {
+        super(...arguments);
+        this.selectableFilter = () => true;
+    }
+    #config;
+    /**
+     * Sets the configuration for the selection manager.
+     * @param {UmbCollectionSelectionManagerConfig | undefined} config - Initial configuration for the selection manager.
+     */
+    setConfig(config) {
+        this.#config = config;
+        this.setSelectable(this.#config?.selectable ?? false);
+        this.setMultiple(this.#config?.multiple ?? false);
+        this.setSelection(this.#config?.selection ?? []);
+        const selectableFilter = this.#config?.selectableFilter;
+        if (selectableFilter) {
+            this.selectableFilter = selectableFilter;
+        }
+    }
+    /**
+     * The current configuration of the selection manager.
+     * @returns {UmbCollectionSelectionManagerConfig | undefined} - The current configuration of the selection manager.
+     */
+    getConfig() {
+        return this.#config;
+    }
+}

package/dist-cms/packages/core/collection/selection/types.d.ts

@@ -0,0 +1,7 @@
+import type { UmbCollectionItemModel } from '../item/types.js';
+export interface UmbCollectionSelectionManagerConfig {
+    multiple?: boolean;
+    selectable?: boolean;
+    selection?: Array<UmbCollectionItemModel['unique']>;
+    selectableFilter?(item: UmbCollectionItemModel): boolean;
+}

package/dist-cms/packages/core/collection/selection/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/collection/types.d.ts

@@ -6,6 +6,7 @@ import type { UmbPaginationManager } from '../utils/index.js';
 export type * from './action/create/types.js';
 export type * from './collection-item-picker-modal/types.js';
 export type * from './conditions/types.js';
+export type * from './filter/types.js';
 export type * from './extensions/types.js';
 export type * from './item/types.js';
 export type * from './menu/types.js';
@@ -20,6 +21,8 @@ export interface UmbCollectionConfiguration {
     pageSize?: number;
     noItemsLabel?: string;
     userDefinedProperties?: Array<UmbCollectionColumnConfiguration>;
+    selectionConfiguration?: UmbCollectionSelectionConfiguration;
+    bulkActionConfiguration?: UmbCollectionBulkActionConfiguration;
 }
 export interface UmbCollectionColumnConfiguration {
     alias: string;
@@ -36,7 +39,12 @@ export interface UmbCollectionLayoutConfiguration {
 export type UmbCollectionSelectionConfiguration = {
     multiple?: boolean;
     selectable?: boolean;
-    selection?: Array<string | null>;
+    selectOnly?: boolean;
+    selection?: Array<UmbCollectionItemModel['unique']>;
+    selectableFilter?(item: UmbCollectionItemModel): boolean;
+};
+export type UmbCollectionBulkActionConfiguration = {
+    enabled?: boolean;
 };
 export interface UmbCollectionContext {
     setConfig(config: UmbCollectionConfiguration): void;