import type { TemplateResult } from '../../../../../external/lit/index.js'; import { nothing } from '../../../../../external/lit/index.js'; import { type UmbExtensionElementInitializer } from '../../../../../libs/extension-api/index.js'; import { UmbLitElement } from '../../../lit-element/index.js'; /** * A custom element that dynamically renders extensions registered in the extension registry. * * This element observes the extension registry and renders all permitted extensions matching the specified type(s). * Extensions are automatically filtered by their conditions and can be further filtered using the `filter` property. * The element handles extension lifecycle, property passing, and event binding. * @element umb-extension-slot * @slot default - Fallback content shown when no extensions are permitted (unless `fallbackRenderMethod` is provided). * @example Basic usage - Render all extensions of a type * ```html * * ``` * @example Multiple types - Render extensions from multiple types * ```html * * ``` * @example Single extension - Only render the first matching extension * ```html * * ``` * @example With filter - Filter extensions by manifest properties * ```html * manifest.alias === 'My.Menu.Alias'}> * * ``` * @example With props - Pass data to extension elements * ```html * * * ``` * @example With default element - Specify fallback element for extensions without one * ```html * * * ``` * @example Combined usage - Filter, props, default element, and single * ```html * manifest.forEntityTypes.includes(item.entityType)} * .props=${{ item }} * default-element="umb-search-result-item"> * * ``` * @example Custom render method - Control how extensions are rendered * ```html * html`
${ext.component}
`} * .props=${this._blockViewProps}> *
* ``` * @example Fallback content - Shows the slotted content when no extensions match * ```html * *

No extensions available

*
* ``` * @example Fallback render method - Shows the result of the fallbackRenderMethod when no extensions match * ```html * * .fallbackRenderMethod=${() => html`

No extensions available

`} *
* ``` */ export declare class UmbExtensionSlotElement extends UmbLitElement { #private; private _permitted?; /** * When true, only renders the highest weighted permitted extension. * Useful for extension types where only one instance should be displayed (e.g., menus). * @example * ```html * * ``` */ single?: boolean; /** * The type or types of extensions to render. Required for the slot to display anything. * Can be a single type string or an array of type strings to render extensions from multiple types. * @example Single type * ```html * * ``` * @example Multiple types * ```html * * ``` */ set type(value: string | string[] | undefined); get type(): string | string[] | undefined; /** * Filter function for extension manifests. * This is an initial filter taking effect before conditions or overwrites are applied. * Extensions will still be filtered by their manifest-defined conditions after this filter. * The filter function receives the extension manifest and should return true to include it. * @example Filter by manifest alias * ```html * manifest.alias === 'My.Menu.Alias'}> * * ``` * @example Filter by meta properties * ```html * manifest.forEntityTypes.includes(entityType)}> * * ``` */ set filter(value: (manifest: any) => boolean); get filter(): (manifest: any) => boolean; /** * Properties to pass to all rendered extension elements. * These properties are spread onto each extension element instance. * Note: The extension's manifest is always passed automatically regardless of this setting. * @example Pass data to extension elements * ```html * * * ``` */ set props(newVal: Record | undefined); get props(): Record | undefined; /** * Event listeners to attach to all rendered extension elements. * The key is the event name, and the value is the event handler function. * Listeners are automatically added when extensions are rendered and removed on disconnect. * @example Listen for custom events from extensions * ```html * this.#handleItemSelected(e), * 'action-clicked': (e) => this.#handleAction(e) * }}> * * ``` */ set events(newVal: Record void> | undefined); get events(): Record void> | undefined; /** * Fallback element tag name to use when an extension manifest doesn't specify its own element. * This allows extensions to rely on a default UI implementation while still being registered. * @example Provide a default menu element * ```html * * * ``` */ defaultElement?: string; /** * Custom render function for controlling how each extension is rendered. * When provided, this function is called for each permitted extension instead of the default rendering. * The function receives the extension initializer (with `component` and `manifest` properties) and the index, * and should return a TemplateResult, HTMLElement, null, or nothing. * @example Wrap extensions in custom markup * ```html * html` *
* ${ext.component} *
* `}> *
* ``` */ renderMethod?: (extension: UmbExtensionElementInitializer, index: number) => TemplateResult | TemplateResult<1> | HTMLElement | null | undefined | typeof nothing; /** * Render function called when no extensions are permitted. * When provided, this function is called instead of rendering the default slot content. * Useful for providing custom empty states or fallback UI. * The function should return a TemplateResult, HTMLElement, null, or nothing. * @example Custom empty state * ```html * html`
Default block view
`}> *
* ``` */ fallbackRenderMethod?: () => TemplateResult | TemplateResult<1> | HTMLElement | null | undefined | typeof nothing; connectedCallback(): void; disconnectedCallback(): void; render(): unknown; static styles: import("lit").CSSResult; } declare global { interface HTMLElementTagNameMap { 'umb-extension-slot': UmbExtensionSlotElement; } }