@umbraco-cms/backoffice 17.1.0 → 17.2.0-rc2

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;

package/dist-cms/packages/core/collection/view/card/card-collection-view.element.js

@@ -12,8 +12,10 @@ let UmbCardCollectionViewElement = class UmbCardCollectionViewElement extends Um
         if (this._loading)
             return nothing;
         return html `
-			<div id="card-grid">
-				${repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item))}
+			<div id="card-grid-container">
+				<div id="card-grid">
+					${repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item))}
+				</div>
 			</div>
 		`;
     }
@@ -22,8 +24,8 @@ let UmbCardCollectionViewElement = class UmbCardCollectionViewElement extends Um
         return html ` <umb-entity-collection-item-card
 			.item=${item}
 			href=${href ?? nothing}
-			?selectable=${this._selectable}
-			?select-only=${this._selection.length > 0}
+			?selectable=${this._isSelectableItem(item)}
+			?select-only=${this._selectOnly}
 			?selected=${this._isSelectedItem(item.unique)}
 			@selected=${() => this._selectItem(item.unique)}
 			@deselected=${() => this._deselectItem(item.unique)}>
@@ -41,11 +43,22 @@ let UmbCardCollectionViewElement = class UmbCardCollectionViewElement extends Um
 				flex-direction: column;
 			}
 
+			#card-grid-container {
+				container-type: inline-size;
+				container-name: card-grid-container;
+			}
+
 			#card-grid {
 				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+				grid-template-columns: repeat(auto-fill, minmax(var(--umb-card-medium-min-width), 1fr));
 				gap: var(--uui-size-space-4);
 			}
+
+			@container card-grid-container (width > 800px) {
+				#card-grid {
+					grid-template-columns: repeat(auto-fill, minmax(var(--umb-card-large-min-width), 1fr));
+				}
+			}
 		`,
     ]; }
 };

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

@@ -0,0 +1 @@
+export { UmbCollectionViewElementBase } from './umb-collection-view-element-base.js';

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

@@ -0,0 +1 @@
+export { UmbCollectionViewElementBase } from './umb-collection-view-element-base.js';

package/dist-cms/packages/core/collection/view/ref/ref-collection-view.element.js

@@ -22,8 +22,8 @@ let UmbRefCollectionViewElement = class UmbRefCollectionViewElement extends UmbC
         return html `<umb-entity-collection-item-ref
 			.item=${item}
 			href=${href ?? nothing}
-			?selectable=${this._selectable}
-			?select-only=${this._selection.length > 0}
+			?selectable=${this._isSelectableItem(item)}
+			?select-only=${this._selectOnly}
 			?selected=${this._isSelectedItem(item.unique)}
 			@selected=${() => this._selectItem(item.unique)}
 			@deselected=${() => this._deselectItem(item.unique)}>
@@ -40,6 +40,14 @@ let UmbRefCollectionViewElement = class UmbRefCollectionViewElement extends UmbC
 				display: flex;
 				flex-direction: column;
 			}
+
+			umb-entity-collection-item-ref {
+				margin-bottom: var(--uui-size-4);
+
+				&:last-of-type {
+					margin-bottom: 0;
+				}
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/core/collection/view/umb-collection-view-element-base.d.ts

@@ -8,10 +8,18 @@ export declare abstract class UmbCollectionViewElementBase extends UmbLitElement
     #private;
     protected _items: Array<UmbCollectionItemModel>;
     protected _selectable: boolean;
+    protected _multiple: boolean;
+    protected _selectOnly: boolean;
     protected _selection: Array<string | null>;
     protected _loading: boolean;
     protected _itemHrefs: Map<string, string>;
     constructor();
+    /**
+     * Determines if an item is selectable
+     * @param {UmbCollectionItemModel} item - The item to check for selectability.
+     * @returns {boolean} True if the item is selectable, false otherwise.
+     */
+    protected _isSelectableItem(item: UmbCollectionItemModel): boolean;
     /**
      * Selects an item in the collection.
      * @param {string} unique - The unique identifier of the item to select.
@@ -22,6 +30,11 @@ export declare abstract class UmbCollectionViewElementBase extends UmbLitElement
      * @param {string} unique - The unique identifier of the item to deselect.
      */
     protected _deselectItem(unique: UmbCollectionItemModel['unique']): void;
+    /**
+     * Sets the current selection in the collection.
+     * @param {Array<string>} selection - An array of unique identifiers representing the new selection.
+     */
+    protected _setSelection(selection: Array<string>): void;
     /**
      * Checks if an item is currently selected.
      * @param {string} unique - The unique identifier of the item to check.

package/dist-cms/packages/core/collection/view/umb-collection-view-element-base.js

@@ -17,19 +17,39 @@ export class UmbCollectionViewElementBase extends UmbLitElement {
         super();
         this._items = [];
         this._selectable = false;
+        this._multiple = false;
+        this._selectOnly = false;
         this._selection = [];
         this._loading = false;
         this._itemHrefs = new Map();
         this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
             this.#collectionContext = instance;
             this.observe(this.#collectionContext?.selection.selectable, (selectable) => (this._selectable = selectable ?? false), 'umbCollectionSelectableObserver');
+            this.observe(this.#collectionContext?.selectOnly, (selectOnly) => {
+                this._selectOnly = selectOnly ?? false;
+            }, 'umbCollectionSelectOnlyObserver');
             this.observe(this.#collectionContext?.selection.selection, (selection) => (this._selection = selection ?? []), 'umbCollectionSelectionObserver');
+            this.observe(this.#collectionContext?.selection.multiple, (multiple) => (this._multiple = multiple ?? false), 'umbCollectionSelectionMultipleObserver');
             this.observe(this.#collectionContext?.items, async (items) => {
                 this._items = items ?? [];
                 await this.#updateItemHrefs();
             }, 'umbCollectionItemsObserver');
         });
     }
+    /**
+     * Determines if an item is selectable
+     * @param {UmbCollectionItemModel} item - The item to check for selectability.
+     * @returns {boolean} True if the item is selectable, false otherwise.
+     */
+    _isSelectableItem(item) {
+        if (!this._selectable) {
+            return false;
+        }
+        if (!this.#collectionContext?.selection.selectableFilter) {
+            return true;
+        }
+        return this.#collectionContext.selection.selectableFilter(item);
+    }
     /**
      * Selects an item in the collection.
      * @param {string} unique - The unique identifier of the item to select.
@@ -44,6 +64,13 @@ export class UmbCollectionViewElementBase extends UmbLitElement {
     _deselectItem(unique) {
         this.#collectionContext?.selection.deselect(unique);
     }
+    /**
+     * Sets the current selection in the collection.
+     * @param {Array<string>} selection - An array of unique identifiers representing the new selection.
+     */
+    _setSelection(selection) {
+        this.#collectionContext?.selection.setSelection(selection);
+    }
     /**
      * Checks if an item is currently selected.
      * @param {string} unique - The unique identifier of the item to check.
@@ -66,6 +93,12 @@ __decorate([
 __decorate([
     state()
 ], UmbCollectionViewElementBase.prototype, "_selectable", void 0);
+__decorate([
+    state()
+], UmbCollectionViewElementBase.prototype, "_multiple", void 0);
+__decorate([
+    state()
+], UmbCollectionViewElementBase.prototype, "_selectOnly", void 0);
 __decorate([
     state()
 ], UmbCollectionViewElementBase.prototype, "_selection", void 0);

package/dist-cms/packages/core/components/backoffice-notification-container/backoffice-notification-container.element.d.ts

@@ -1,11 +1,13 @@
 import type { CSSResultGroup } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 export declare class UmbBackofficeNotificationContainerElement extends UmbLitElement {
+    #private;
     private _notificationsElement?;
-    private _srLive?;
     private _notifications?;
     private _notificationContext?;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private _observeNotifications;
     private _getNotificationText;
     private _announce;

package/dist-cms/packages/core/components/backoffice-notification-container/backoffice-notification-container.element.js

@@ -9,6 +9,7 @@ import { css, html, customElement, state, repeat, query } from '../../../../exte
 import { UMB_NOTIFICATION_CONTEXT } from '../../notification/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 let UmbBackofficeNotificationContainerElement = class UmbBackofficeNotificationContainerElement extends UmbLitElement {
+    #srContainer;
     constructor() {
         super();
         this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {
@@ -16,6 +17,43 @@ let UmbBackofficeNotificationContainerElement = class UmbBackofficeNotificationC
             this._observeNotifications();
         });
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#createSrContainer();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#destroySrContainer();
+    }
+    #createSrContainer() {
+        if (this.#srContainer)
+            return;
+        // Check if a global announcer container already exists
+        const existing = document.getElementById('umb-sr-announcer');
+        if (existing) {
+            this.#srContainer = existing;
+            return;
+        }
+        this.#srContainer = document.createElement('div');
+        this.#srContainer.id = 'umb-sr-announcer';
+        // Visually hidden but accessible to screen readers
+        Object.assign(this.#srContainer.style, {
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: '0',
+            margin: '-1px',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            clip: 'rect(0, 0, 0, 0)',
+            clipPath: 'inset(50%)',
+            border: '0',
+        });
+        document.body.appendChild(this.#srContainer);
+    }
+    #destroySrContainer() {
+        this.#srContainer = undefined;
+    }
     _observeNotifications() {
         if (!this._notificationContext)
             return;
@@ -30,23 +68,31 @@ let UmbBackofficeNotificationContainerElement = class UmbBackofficeNotificationC
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this._notificationsElement?.showPopover?.(); // To prevent issues in FireFox I added `?.` before `()`  [NL]
-            //Announce the newest notification
+            // Announce the newest notification
             this._announceNewest(this._notifications);
         });
     }
-    _getNotificationText(notificatonData) {
-        //Trick to be able to access to the data(notification messagge) inside a private propertity
-        const data = notificatonData._data ?? {};
+    _getNotificationText(notificationData) {
+        // Trick to access the data (notification message) inside a private property
+        const data = notificationData._data ?? {};
         const notificationText = data.message ?? '';
         return notificationText;
     }
     _announce(message) {
-        if (!this._srLive)
+        if (!this.#srContainer || !message)
             return;
-        this._srLive.textContent = 'u00A0'; //to avoid same text suppression
+        // Create a new element for each announcement - this is more reliable
+        // than updating text content of an existing live region
+        const alert = document.createElement('div');
+        alert.setAttribute('role', 'alert');
+        alert.setAttribute('aria-live', 'assertive');
+        alert.setAttribute('aria-atomic', 'true');
+        alert.textContent = message;
+        this.#srContainer.appendChild(alert);
+        // Clean up after announcement (screen readers will have captured it)
         setTimeout(() => {
-            this._srLive.textContent = message || '';
-        }, 0);
+            alert.remove();
+        }, 1000);
     }
     _announceNewest(list) {
         const newest = list?.[list.length - 1];
@@ -61,7 +107,6 @@ let UmbBackofficeNotificationContainerElement = class UmbBackofficeNotificationC
             ? repeat(this._notifications, (notification) => notification.key, (notification) => html `${notification.element} `)
             : ''}
 			</uui-toast-notification-container>
-			<div id="sr-live" aria-live="assertive" aria-role="true"></div>
 		`;
     }
     static { this.styles = [
@@ -81,27 +126,12 @@ let UmbBackofficeNotificationContainerElement = class UmbBackofficeNotificationC
 				border: 0;
 				margin: 0;
 			}
-			#sr-live {
-				position: absolute;
-				width: 1px;
-				height: 1px;
-				padding: 0;
-				margin: -1px;
-				overflow: hidden;
-				white-space: nowrap;
-				clip: rect(0 0 0 0);
-				clip-path: inset(50%);
-				border: 0;
-			}
 		`,
     ]; }
 };
 __decorate([
     query('#notifications')
 ], UmbBackofficeNotificationContainerElement.prototype, "_notificationsElement", void 0);
-__decorate([
-    query('#sr-live')
-], UmbBackofficeNotificationContainerElement.prototype, "_srLive", void 0);
 __decorate([
     state()
 ], UmbBackofficeNotificationContainerElement.prototype, "_notifications", void 0);

package/dist-cms/packages/core/components/body-layout/body-layout.element.js

@@ -141,7 +141,7 @@ let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement {
 				background-color: transparent;
 				border-color: transparent;
 				transition: box-shadow 150ms ease-in-out;
-				box-shadow: 0 -1px 0px 0px rgba(0, 0, 0, 0.5);
+				clip-path: inset(0px -15px -15px -15px);
 			}
 			:host([header-transparent][scrolling]) #header {
 				/* This should be using the uui-shadows but for now they are too drastic for this use case */

package/dist-cms/packages/core/components/code-block/code-block.element.js

@@ -76,6 +76,7 @@ let UmbCodeBlockElement = class UmbCodeBlockElement extends LitElement {
 			code {
 				word-wrap: normal;
 				white-space: pre;
+				color: var(--uui-color-text);
 			}
 
 			#header {

package/dist-cms/packages/core/components/figure-card/figure-card.element.d.ts

@@ -0,0 +1,33 @@
+import { UUICardElement } from '../../../../external/uui/index.js';
+/**
+ * @element umb-figure-card
+ * @slot - slot for the default content area
+ * @slot tag - slot for the tag with support for `<uui-tag>` elements
+ * @slot actions - slot for the actions with support for the `<uui-action-bar>` element
+ */
+export declare class UmbFigureCardElement extends UUICardElement {
+    #private;
+    /**
+     * Name
+     * @type {string}
+     * @attr name
+     * @default ''
+     */
+    name: string;
+    /**
+     * Description
+     * @type {string}
+     * @attr description
+     * @default undefined
+     */
+    description?: string;
+    get backgroundColor(): string | undefined;
+    set backgroundColor(value: string | undefined);
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-figure-card': UmbFigureCardElement;
+    }
+}