@umbraco-cms/backoffice 14.2.0 → 14.3.0

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

@@ -2,6 +2,11 @@ export interface UmbPickerModalData<ItemType> {
     multiple?: boolean;
     filter?: (item: ItemType) => boolean;
     pickableFilter?: (item: ItemType) => boolean;
+    search?: UmbPickerModalSearchConfig;
+}
+export interface UmbPickerModalSearchConfig {
+    providerAlias: string;
+    queryParams?: object;
 }
 export interface UmbPickerModalValue {
     selection: Array<string | null>;

package/dist-cms/packages/core/notification/notification-handler.d.ts

@@ -1,6 +1,5 @@
 import type { UmbNotificationOptions, UmbNotificationColor } from './notification.context.js';
 /**
- * @export
  * @class UmbNotificationHandler
  */
 export declare class UmbNotificationHandler {

package/dist-cms/packages/core/notification/notification-handler.js

@@ -1,6 +1,5 @@
 import { UmbId } from '../id/index.js';
 /**
- * @export
  * @class UmbNotificationHandler
  */
 export class UmbNotificationHandler {

package/dist-cms/packages/core/notification/notification.context.d.ts

@@ -4,7 +4,6 @@ import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
 /**
  * The default data of notifications
- * @export
  * @interface UmbNotificationDefaultData
  */
 export interface UmbNotificationDefaultData {
@@ -13,7 +12,6 @@ export interface UmbNotificationDefaultData {
     structuredList?: Record<string, Array<unknown>>;
 }
 /**
- * @export
  * @interface UmbNotificationOptions
  * @template UmbNotificationData
  */

package/dist-cms/packages/{object-type → core/object-type}/input-object-type.element.d.ts

@@ -1,6 +1,6 @@
-import type { UUISelectElement } from '../../external/uui/index.js';
-import { UmbLitElement } from '../core/lit-element/index.js';
-declare const UmbInputObjectTypeElement_base: (new (...args: any[]) => import("../../external/uui/index.js").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
+import type { UUISelectElement } from '../../../external/uui/index.js';
+import { UmbLitElement } from '../lit-element/index.js';
+declare const UmbInputObjectTypeElement_base: (new (...args: any[]) => import("../../../external/uui/index.js").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputObjectTypeElement extends UmbInputObjectTypeElement_base {
     #private;
     private select;

package/dist-cms/packages/{object-type → core/object-type}/input-object-type.element.js

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbObjectTypeRepository } from './object-type.repository.js';
-import { html, customElement, property, query, state } from '../../external/lit/index.js';
-import { UUIFormControlMixin } from '../../external/uui/index.js';
-import { UmbLitElement } from '../core/lit-element/index.js';
+import { html, customElement, property, query, state } from '../../../external/lit/index.js';
+import { UUIFormControlMixin } from '../../../external/uui/index.js';
+import { UmbLitElement } from '../lit-element/index.js';
 let UmbInputObjectTypeElement = class UmbInputObjectTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
     set value(value) {
         this.select.value = value;

package/dist-cms/packages/core/object-type/object-type.repository.d.ts

@@ -0,0 +1,11 @@
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+import type { UmbApi } from '../../../libs/extension-api/index.js';
+export declare class UmbObjectTypeRepository extends UmbControllerBase implements UmbApi {
+    #private;
+    constructor(host: UmbControllerHost);
+    read(): Promise<{
+        data: import("../../../external/backend-api/index.js").PagedObjectTypeResponseModel | undefined;
+        error: import("../../../external/backend-api/index.js").ApiError | import("../../../external/backend-api/index.js").CancelError | undefined;
+    }>;
+}

package/dist-cms/packages/{object-type → core/object-type}/object-type.repository.js

@@ -1,6 +1,6 @@
-import { ObjectTypesService } from '../../external/backend-api/index.js';
-import { UmbControllerBase } from '../../libs/class-api/index.js';
-import { tryExecuteAndNotify } from '../core/resources/index.js';
+import { ObjectTypesService } from '../../../external/backend-api/index.js';
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+import { tryExecuteAndNotify } from '../resources/index.js';
 export class UmbObjectTypeRepository extends UmbControllerBase {
     #host;
     constructor(host) {

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

@@ -0,0 +1,4 @@
+export * from './search/index.js';
+export * from './picker.context.js';
+export * from './picker.context.token.js';
+export * from './types.js';

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

@@ -0,0 +1,4 @@
+export * from './search/index.js';
+export * from './picker.context.js';
+export * from './picker.context.token.js';
+export * from './types.js';

package/dist-cms/packages/core/picker/manifests.d.ts

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

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

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

package/dist-cms/packages/core/picker/picker.context.d.ts

@@ -0,0 +1,9 @@
+import { UmbPickerSearchManager } from './search/manager/picker-search.manager.js';
+import { UmbContextBase } from '../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+import { UmbSelectionManager } from '../utils/index.js';
+export declare class UmbPickerContext extends UmbContextBase<UmbPickerContext> {
+    readonly selection: UmbSelectionManager<string | null>;
+    readonly search: UmbPickerSearchManager<import("../../search/index.js").UmbSearchResultItemModel, import("../../search/index.js").UmbSearchRequestArgs>;
+    constructor(host: UmbControllerHost);
+}

package/dist-cms/packages/core/picker/picker.context.js

@@ -0,0 +1,11 @@
+import { UMB_PICKER_CONTEXT } from './picker.context.token.js';
+import { UmbPickerSearchManager } from './search/manager/picker-search.manager.js';
+import { UmbContextBase } from '../../../libs/class-api/index.js';
+import { UmbSelectionManager } from '../utils/index.js';
+export class UmbPickerContext extends UmbContextBase {
+    constructor(host) {
+        super(host, UMB_PICKER_CONTEXT);
+        this.selection = new UmbSelectionManager(this);
+        this.search = new UmbPickerSearchManager(this);
+    }
+}

package/dist-cms/packages/core/picker/picker.context.token.d.ts

@@ -0,0 +1,3 @@
+import type { UmbPickerContext } from './picker.context.js';
+import { UmbContextToken } from '../../../libs/context-api/index.js';
+export declare const UMB_PICKER_CONTEXT: UmbContextToken<UmbPickerContext, UmbPickerContext>;

package/dist-cms/packages/core/picker/picker.context.token.js

@@ -0,0 +1,2 @@
+import { UmbContextToken } from '../../../libs/context-api/index.js';
+export const UMB_PICKER_CONTEXT = new UmbContextToken('UmbPickerContext');

package/dist-cms/packages/core/picker/search/index.d.ts

@@ -0,0 +1,3 @@
+export * from './manager/index.js';
+export * from './picker-search-result.element.js';
+export * from './picker-search-field.element.js';

package/dist-cms/packages/core/picker/search/index.js

@@ -0,0 +1,3 @@
+export * from './manager/index.js';
+export * from './picker-search-result.element.js';
+export * from './picker-search-field.element.js';

package/dist-cms/packages/core/picker/search/manager/index.d.ts

@@ -0,0 +1,2 @@
+export * from './picker-search.manager.js';
+export * from './types.js';

package/dist-cms/packages/core/picker/search/manager/index.js

@@ -0,0 +1,2 @@
+export * from './picker-search.manager.js';
+export * from './types.js';

package/dist-cms/packages/core/picker/search/manager/picker-search.manager.d.ts

@@ -0,0 +1,84 @@
+import type { UmbPickerSearchManagerConfig } from './types.js';
+import { UmbControllerBase } from '../../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+import type { UmbSearchRequestArgs, UmbSearchResultItemModel } from '../../../../search/index.js';
+/**
+ * A manager for searching items in a picker.
+ * @exports
+ * @class UmbPickerSearchManager
+ * @augments {UmbControllerBase}
+ * @template ResultItemType
+ * @template QueryType
+ */
+export declare class UmbPickerSearchManager<ResultItemType extends UmbSearchResultItemModel = UmbSearchResultItemModel, QueryType extends UmbSearchRequestArgs = UmbSearchRequestArgs> extends UmbControllerBase {
+    #private;
+    readonly searchable: import("rxjs/internal/Observable").Observable<boolean>;
+    readonly query: import("rxjs/internal/Observable").Observable<QueryType | undefined>;
+    readonly searching: import("rxjs/internal/Observable").Observable<boolean>;
+    readonly resultItems: import("rxjs/internal/Observable").Observable<ResultItemType[]>;
+    readonly resultTotalItems: import("rxjs/internal/Observable").Observable<number>;
+    /**
+     * Creates an instance of UmbPickerSearchManager.
+     * @param {UmbControllerHost} host The controller host for the search manager.
+     * @memberof UmbPickerSearchManager
+     */
+    constructor(host: UmbControllerHost);
+    /**
+     * Set the configuration for the search manager.
+     * @param {UmbPickerSearchManagerConfig} config The configuration for the search manager.
+     * @memberof UmbPickerSearchManager
+     */
+    setConfig(config: UmbPickerSearchManagerConfig): void;
+    /**
+     * Get the current configuration for the search manager.
+     * @returns {UmbPickerSearchManagerConfig | undefined} The current configuration for the search manager.
+     * @memberof UmbPickerSearchManager
+     */
+    getConfig(): UmbPickerSearchManagerConfig | undefined;
+    /**
+     * Update the current configuration for the search manager.
+     * @param {Partial<UmbPickerSearchManagerConfig>} partialConfig
+     * @memberof UmbPickerSearchManager
+     */
+    updateConfig(partialConfig: Partial<UmbPickerSearchManagerConfig>): void;
+    /**
+     * Returns whether items can be searched.
+     * @returns {boolean} Whether items can be searched.
+     * @memberof UmbPickerSearchManager
+     */
+    getSearchable(): boolean;
+    /**
+     * Sets whether items can be searched.
+     * @param {boolean} value Whether items can be searched.
+     * @memberof UmbPickerSearchManager
+     */
+    setSearchable(value: boolean): void;
+    /**
+     * Search for items based on the current query.
+     * @memberof UmbPickerSearchManager
+     */
+    search(): void;
+    /**
+     * Clear the current search query and result items.
+     * @memberof UmbPickerSearchManager
+     */
+    clear(): void;
+    /**
+     * Set the search query.
+     * @param {QueryType} query The search query.
+     * @memberof UmbPickerSearchManager
+     */
+    setQuery(query: QueryType): void;
+    /**
+     * Get the current search query.
+     * @memberof UmbPickerSearchManager
+     * @returns {QueryType | undefined} The current search query.
+     */
+    getQuery(): QueryType | undefined;
+    /**
+     * Update the current search query.
+     * @param {Partial<QueryType>} query
+     * @memberof UmbPickerSearchManager
+     */
+    updateQuery(query: Partial<QueryType>): void;
+}

package/dist-cms/packages/core/picker/search/manager/picker-search.manager.js

@@ -0,0 +1,170 @@
+import { UmbControllerBase } from '../../../../../libs/class-api/index.js';
+import { createExtensionApiByAlias } from '../../../extension-registry/index.js';
+import { UmbArrayState, UmbBooleanState, UmbNumberState, UmbObjectState } from '../../../../../libs/observable-api/index.js';
+import { debounce } from '../../../utils/index.js';
+/**
+ * A manager for searching items in a picker.
+ * @exports
+ * @class UmbPickerSearchManager
+ * @augments {UmbControllerBase}
+ * @template ResultItemType
+ * @template QueryType
+ */
+export class UmbPickerSearchManager extends UmbControllerBase {
+    #searchable;
+    #query;
+    #searching;
+    #resultItems;
+    #resultTotalItems;
+    #config;
+    #searchProvider;
+    /**
+     * Creates an instance of UmbPickerSearchManager.
+     * @param {UmbControllerHost} host The controller host for the search manager.
+     * @memberof UmbPickerSearchManager
+     */
+    constructor(host) {
+        super(host);
+        this.#searchable = new UmbBooleanState(false);
+        this.searchable = this.#searchable.asObservable();
+        this.#query = new UmbObjectState(undefined);
+        this.query = this.#query.asObservable();
+        this.#searching = new UmbBooleanState(false);
+        this.searching = this.#searching.asObservable();
+        this.#resultItems = new UmbArrayState([], (x) => x.unique);
+        this.resultItems = this.#resultItems.asObservable();
+        this.#resultTotalItems = new UmbNumberState(0);
+        this.resultTotalItems = this.#resultTotalItems.asObservable();
+        this.#debouncedSearch = debounce(this.#search, 300);
+    }
+    /**
+     * Set the configuration for the search manager.
+     * @param {UmbPickerSearchManagerConfig} config The configuration for the search manager.
+     * @memberof UmbPickerSearchManager
+     */
+    setConfig(config) {
+        this.#config = config;
+        this.#initSearch();
+    }
+    /**
+     * Get the current configuration for the search manager.
+     * @returns {UmbPickerSearchManagerConfig | undefined} The current configuration for the search manager.
+     * @memberof UmbPickerSearchManager
+     */
+    getConfig() {
+        return this.#config;
+    }
+    /**
+     * Update the current configuration for the search manager.
+     * @param {Partial<UmbPickerSearchManagerConfig>} partialConfig
+     * @memberof UmbPickerSearchManager
+     */
+    updateConfig(partialConfig) {
+        const mergedConfig = { ...this.#config, ...partialConfig };
+        this.setConfig(mergedConfig);
+    }
+    /**
+     * Returns whether items can be searched.
+     * @returns {boolean} Whether items can be searched.
+     * @memberof UmbPickerSearchManager
+     */
+    getSearchable() {
+        return this.#searchable.getValue();
+    }
+    /**
+     * Sets whether items can be searched.
+     * @param {boolean} value Whether items can be searched.
+     * @memberof UmbPickerSearchManager
+     */
+    setSearchable(value) {
+        this.#searchable.setValue(value);
+    }
+    /**
+     * Search for items based on the current query.
+     * @memberof UmbPickerSearchManager
+     */
+    search() {
+        if (this.getSearchable() === false)
+            throw new Error('Search is not enabled');
+        const query = this.#query.getValue();
+        if (!query?.query) {
+            this.clear();
+            return;
+        }
+        this.#searching.setValue(true);
+        this.#debouncedSearch();
+    }
+    /**
+     * Clear the current search query and result items.
+     * @memberof UmbPickerSearchManager
+     */
+    clear() {
+        this.#query.setValue(undefined);
+        this.#resultItems.setValue([]);
+        this.#searching.setValue(false);
+        this.#resultTotalItems.setValue(0);
+    }
+    /**
+     * Set the search query.
+     * @param {QueryType} query The search query.
+     * @memberof UmbPickerSearchManager
+     */
+    setQuery(query) {
+        if (this.getSearchable() === false)
+            throw new Error('Search is not enabled');
+        if (!this.query) {
+            this.clear();
+            return;
+        }
+        this.#query.setValue(query);
+    }
+    /**
+     * Get the current search query.
+     * @memberof UmbPickerSearchManager
+     * @returns {QueryType | undefined} The current search query.
+     */
+    getQuery() {
+        return this.#query.getValue();
+    }
+    /**
+     * Update the current search query.
+     * @param {Partial<QueryType>} query
+     * @memberof UmbPickerSearchManager
+     */
+    updateQuery(query) {
+        const mergedQuery = { ...this.getQuery(), ...query };
+        this.#query.setValue(mergedQuery);
+    }
+    async #initSearch() {
+        const providerAlias = this.#config?.providerAlias;
+        if (!providerAlias) {
+            this.setSearchable(false);
+            throw new Error('No search provider alias provided');
+        }
+        this.#searchProvider = await createExtensionApiByAlias(this, providerAlias);
+        if (!this.#searchProvider) {
+            this.setSearchable(false);
+            throw new Error(`Search Provider with alias ${providerAlias} is not available`);
+        }
+        this.setSearchable(true);
+    }
+    #debouncedSearch;
+    async #search() {
+        if (this.getSearchable() === false)
+            throw new Error('Search is not enabled');
+        if (!this.#searchProvider)
+            throw new Error('Search provider is not available');
+        const query = this.#query.getValue();
+        if (!query)
+            throw new Error('No query provided');
+        if (!query.query) {
+            this.clear();
+            return;
+        }
+        const { data } = await this.#searchProvider.search(query);
+        const items = data?.items ?? [];
+        this.#resultItems.setValue(items);
+        this.#resultTotalItems.setValue(data?.total ?? 0);
+        this.#searching.setValue(false);
+    }
+}

package/dist-cms/packages/core/picker/search/manager/types.d.ts

@@ -0,0 +1,3 @@
+export interface UmbPickerSearchManagerConfig {
+    providerAlias: string;
+}

package/dist-cms/packages/core/picker/search/manager/types.js

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

package/dist-cms/packages/core/picker/search/manifests.d.ts

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

package/dist-cms/packages/core/picker/search/manifests.js

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

package/dist-cms/packages/core/picker/search/picker-search-field.element.d.ts

@@ -0,0 +1,18 @@
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+declare const elementName = "umb-picker-search-field";
+export declare class UmbPickerSearchFieldElement extends UmbLitElement {
+    #private;
+    _query: string;
+    _searching: boolean;
+    _isSearchable: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    static readonly styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbPickerSearchFieldElement;
+    }
+}
+export {};

package/dist-cms/packages/core/picker/search/picker-search-field.element.js

@@ -0,0 +1,87 @@
+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 { UMB_PICKER_CONTEXT } from '../picker.context.token.js';
+import { html, customElement, state, nothing, css } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbTextStyles } from '../../style/index.js';
+const elementName = 'umb-picker-search-field';
+let UmbPickerSearchFieldElement = class UmbPickerSearchFieldElement extends UmbLitElement {
+    #pickerContext;
+    constructor() {
+        super();
+        this._query = '';
+        this._searching = false;
+        this._isSearchable = false;
+        this.consumeContext(UMB_PICKER_CONTEXT, (context) => {
+            this.#pickerContext = context;
+            this.observe(this.#pickerContext.search.searchable, (isSearchable) => (this._isSearchable = isSearchable));
+            this.observe(this.#pickerContext.search.searching, (searching) => (this._searching = searching));
+            this.observe(this.#pickerContext.search.query, (query) => (this._query = query?.query || ''));
+        });
+    }
+    #onInput(event) {
+        const value = event.target.value;
+        this.#pickerContext?.search.updateQuery({ query: value });
+        this.#pickerContext?.search.search();
+    }
+    render() {
+        if (!this._isSearchable)
+            return nothing;
+        return html `
+			<uui-input .value=${this._query} placeholder="Search..." @input=${this.#onInput}>
+				<div slot="prepend">
+					${this._searching
+            ? html `<uui-loader-circle id="searching-indicator"></uui-loader-circle>`
+            : html `<uui-icon name="search"></uui-icon>`}
+				</div>
+
+				${this._query
+            ? html `
+							<uui-button slot="append" type="button" @click=${() => this.#pickerContext?.search.clear()} compact>
+								<uui-icon name="icon-delete"></uui-icon>
+							</uui-button>
+						`
+            : nothing}
+			</uui-input>
+			<div id="divider"></div>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			uui-input {
+				width: 100%;
+			}
+
+			#divider {
+				width: 100%;
+				height: 1px;
+				background-color: var(--uui-color-divider);
+				margin-top: var(--uui-size-space-5);
+				margin-bottom: var(--uui-size-space-3);
+			}
+
+			#searching-indicator {
+				margin-left: 7px;
+				margin-top: 4px;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbPickerSearchFieldElement.prototype, "_query", void 0);
+__decorate([
+    state()
+], UmbPickerSearchFieldElement.prototype, "_searching", void 0);
+__decorate([
+    state()
+], UmbPickerSearchFieldElement.prototype, "_isSearchable", void 0);
+UmbPickerSearchFieldElement = __decorate([
+    customElement(elementName)
+], UmbPickerSearchFieldElement);
+export { UmbPickerSearchFieldElement };

package/dist-cms/packages/core/picker/search/picker-search-result.element.d.ts

@@ -0,0 +1,20 @@
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import type { UmbSearchRequestArgs } from '../../../search/index.js';
+import type { UmbEntityModel } from '../../entity/index.js';
+declare const elementName = "umb-picker-search-result";
+export declare class UmbPickerSearchResultElement extends UmbLitElement {
+    #private;
+    _query?: UmbSearchRequestArgs;
+    _searching: boolean;
+    _items: UmbEntityModel[];
+    _isSearchable: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbPickerSearchResultElement;
+    }
+}
+export {};

package/dist-cms/packages/core/picker/search/picker-search-result.element.js

@@ -0,0 +1,63 @@
+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 { UMB_PICKER_CONTEXT } from '../picker.context.token.js';
+import { customElement, html, nothing, repeat, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+const elementName = 'umb-picker-search-result';
+let UmbPickerSearchResultElement = class UmbPickerSearchResultElement extends UmbLitElement {
+    #pickerContext;
+    constructor() {
+        super();
+        this._searching = false;
+        this._items = [];
+        this._isSearchable = false;
+        this.consumeContext(UMB_PICKER_CONTEXT, (context) => {
+            this.#pickerContext = context;
+            this.observe(this.#pickerContext.search.searchable, (isSearchable) => (this._isSearchable = isSearchable));
+            this.observe(this.#pickerContext.search.query, (query) => (this._query = query));
+            this.observe(this.#pickerContext.search.searching, (query) => (this._searching = query));
+            this.observe(this.#pickerContext.search.resultItems, (items) => (this._items = items));
+        });
+    }
+    render() {
+        if (!this._isSearchable)
+            return nothing;
+        if (this._query?.query && this._searching === false && this._items.length === 0) {
+            return this.#renderEmptyResult();
+        }
+        return html `
+			${repeat(this._items, (item) => item.unique, (item) => this.#renderResultItem(item))}
+		`;
+    }
+    #renderEmptyResult() {
+        return html `<small>No result for <strong>"${this._query?.query}"</strong>.</small>`;
+    }
+    #renderResultItem(item) {
+        return html `
+			<umb-extension-with-api-slot
+				type="pickerSearchResultItem"
+				.filter=${(manifest) => manifest.forEntityTypes.includes(item.entityType)}
+				.elementProps=${{ item }}></umb-extension-with-api-slot>
+		`;
+    }
+};
+__decorate([
+    state()
+], UmbPickerSearchResultElement.prototype, "_query", void 0);
+__decorate([
+    state()
+], UmbPickerSearchResultElement.prototype, "_searching", void 0);
+__decorate([
+    state()
+], UmbPickerSearchResultElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbPickerSearchResultElement.prototype, "_isSearchable", void 0);
+UmbPickerSearchResultElement = __decorate([
+    customElement(elementName)
+], UmbPickerSearchResultElement);
+export { UmbPickerSearchResultElement };

package/dist-cms/packages/core/picker/search/result-item/default/default-picker-search-result-item.context.d.ts

@@ -0,0 +1,6 @@
+import { UmbContextBase } from '../../../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../../../libs/controller-api/index.js';
+export declare class UmbDefaultPickerSearchResultItemContext extends UmbContextBase<UmbDefaultPickerSearchResultItemContext> {
+    constructor(host: UmbControllerHost);
+}
+export { UmbDefaultPickerSearchResultItemContext as api };

package/dist-cms/packages/core/picker/search/result-item/default/default-picker-search-result-item.context.js

@@ -0,0 +1,8 @@
+import { UMB_PICKER_SEARCH_RESULT_ITEM_CONTEXT } from './default-picker-search-result-item.context.token.js';
+import { UmbContextBase } from '../../../../../../libs/class-api/index.js';
+export class UmbDefaultPickerSearchResultItemContext extends UmbContextBase {
+    constructor(host) {
+        super(host, UMB_PICKER_SEARCH_RESULT_ITEM_CONTEXT);
+    }
+}
+export { UmbDefaultPickerSearchResultItemContext as api };

package/dist-cms/packages/core/picker/search/result-item/default/default-picker-search-result-item.context.token.d.ts

@@ -0,0 +1,3 @@
+import type { UmbDefaultPickerSearchResultItemContext } from './default-picker-search-result-item.context.js';
+import { UmbContextToken } from '../../../../../../libs/context-api/index.js';
+export declare const UMB_PICKER_SEARCH_RESULT_ITEM_CONTEXT: UmbContextToken<UmbDefaultPickerSearchResultItemContext, UmbDefaultPickerSearchResultItemContext>;