@umbraco-cms/backoffice 16.0.0 → 16.1.0-rc

package/dist-cms/packages/core/components/dropdown/dropdown.element.js

@@ -7,45 +7,56 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, property, query, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbClosedEvent, UmbOpenedEvent } from '@umbraco-cms/backoffice/event';
 // TODO: maybe move this to UI Library.
 let UmbDropdownElement = class UmbDropdownElement extends UmbLitElement {
     constructor() {
         super(...arguments);
-        this.open = false;
+        this.#open = false;
         this.look = 'default';
         this.color = 'default';
         this.placement = 'bottom-start';
         this.compact = false;
         this.hideExpand = false;
     }
-    updated(_changedProperties) {
-        super.updated(_changedProperties);
-        if (_changedProperties.has('open') && this.popoverContainerElement) {
-            if (this.open) {
-                this.openDropdown();
-            }
-            else {
-                this.closeDropdown();
-            }
-        }
+    #open;
+    get open() {
+        return this.#open;
     }
-    #onToggle(event) {
-        // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.open = event.newState === 'open';
+    set open(value) {
+        this.#open = value;
+        if (value === true && this.popoverContainerElement) {
+            this.openDropdown();
+        }
+        else {
+            this.closeDropdown();
+        }
     }
     openDropdown() {
         // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.popoverContainerElement?.showPopover();
+        this.#open = true;
     }
     closeDropdown() {
         // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.popoverContainerElement?.hidePopover();
+        this.#open = false;
+    }
+    #onToggle(event) {
+        // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.open = event.newState === 'open';
+        if (this.open) {
+            this.dispatchEvent(new UmbOpenedEvent());
+        }
+        else {
+            this.dispatchEvent(new UmbClosedEvent());
+        }
     }
     render() {
         return html `
@@ -58,7 +69,7 @@ let UmbDropdownElement = class UmbDropdownElement extends UmbLitElement {
 				.label=${this.label ?? ''}
 				.compact=${this.compact}>
 				<slot name="label"></slot>
-				${when(!this.hideExpand, () => html `<uui-symbol-expand id="symbol-expand" .open=${this.open}></uui-symbol-expand>`)}
+				${when(!this.hideExpand, () => html `<uui-symbol-expand id="symbol-expand" .open=${this.#open}></uui-symbol-expand>`)}
 			</uui-button>
 			<uui-popover-container id="dropdown-popover" .placement=${this.placement} @toggle=${this.#onToggle}>
 				<umb-popover-layout>
@@ -72,6 +83,7 @@ let UmbDropdownElement = class UmbDropdownElement extends UmbLitElement {
         css `
 			#dropdown-button {
 				min-width: max-content;
+				height: 100%;
 			}
 			:host(:not([hide-expand]):not([compact])) #dropdown-button {
 				--uui-button-padding-right-factor: 2;
@@ -85,7 +97,7 @@ let UmbDropdownElement = class UmbDropdownElement extends UmbLitElement {
 };
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmbDropdownElement.prototype, "open", void 0);
+], UmbDropdownElement.prototype, "open", null);
 __decorate([
     property()
 ], UmbDropdownElement.prototype, "label", void 0);

package/dist-cms/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.d.ts

@@ -10,7 +10,7 @@ export declare class UmbEntityActionsBundleElement extends UmbLitElement {
     private _firstActionManifest?;
     private _firstActionApi?;
     private _firstActionHref?;
-    private _dropdownElement?;
+    constructor();
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.js

@@ -5,19 +5,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbEntityContext } from '../../entity/entity.context.js';
-import { html, nothing, customElement, property, state, ifDefined, css, query, } from '@umbraco-cms/backoffice/external/lit';
+import { html, nothing, customElement, property, state, ifDefined, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbExtensionsManifestInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
 let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends UmbLitElement {
+    // TODO: provide the entity context on a higher level, like the root element of this entity, tree-item/workspace/... [NL]
+    #entityContext;
+    #inViewport;
+    #observingEntityActions;
     constructor() {
-        super(...arguments);
+        super();
         this._numberOfActions = 0;
         // TODO: provide the entity context on a higher level, like the root element of this entity, tree-item/workspace/... [NL]
         this.#entityContext = new UmbEntityContext(this);
+        this.#inViewport = false;
+        this.#observingEntityActions = false;
+        // Only observe entity actions when the element is in the viewport
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.#inViewport = true;
+                    this.#observeEntityActions();
+                }
+            });
+        }, {
+            root: null, // Use the viewport as the root
+            threshold: 0.1, // Trigger when at least 10% of the element is visible
+        });
+        observer.observe(this);
     }
-    // TODO: provide the entity context on a higher level, like the root element of this entity, tree-item/workspace/... [NL]
-    #entityContext;
     updated(_changedProperties) {
         if (_changedProperties.has('entityType') && _changedProperties.has('unique')) {
             this.#entityContext.setEntityType(this.entityType);
@@ -26,12 +43,21 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
         }
     }
     #observeEntityActions() {
+        if (!this.entityType)
+            return;
+        if (this.unique === undefined)
+            return;
+        if (!this.#inViewport)
+            return; // Only observe if the element is in the viewport
+        if (this.#observingEntityActions)
+            return;
         new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'entityAction', (ext) => ext.forEntityTypes.includes(this.entityType), async (actions) => {
             this._numberOfActions = actions.length;
             this._firstActionManifest =
                 this._numberOfActions > 0 ? actions[0].manifest : undefined;
             this.#createFirstActionApi();
         }, 'umbEntityActionsObserver');
+        this.#observingEntityActions = true;
     }
     async #createFirstActionApi() {
         if (!this._firstActionManifest)
@@ -52,12 +78,6 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
         event.stopPropagation();
         await this._firstActionApi?.execute().catch(() => { });
     }
-    #onActionExecuted() {
-        this._dropdownElement?.closeDropdown();
-    }
-    #onDropdownClick(event) {
-        event.stopPropagation();
-    }
     render() {
         if (this._numberOfActions === 0)
             return nothing;
@@ -67,16 +87,9 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
         if (this._numberOfActions === 1)
             return nothing;
         return html `
-			<umb-dropdown id="action-modal" @click=${this.#onDropdownClick} .label=${this.label} compact hide-expand>
-				<uui-symbol-more slot="label" .label=${this.label}></uui-symbol-more>
-				<uui-scroll-container>
-					<umb-entity-action-list
-						@action-executed=${this.#onActionExecuted}
-						.entityType=${this.entityType}
-						.unique=${this.unique}
-						.label=${this.label}></umb-entity-action-list>
-				</uui-scroll-container>
-			</umb-dropdown>
+			<umb-entity-actions-dropdown .label=${this.label} compact>
+				<uui-symbol-more slot="label"></uui-symbol-more>
+			</umb-entity-actions-dropdown>
 		`;
     }
     #renderFirstAction() {
@@ -119,9 +132,6 @@ __decorate([
 __decorate([
     state()
 ], UmbEntityActionsBundleElement.prototype, "_firstActionHref", void 0);
-__decorate([
-    query('#action-modal')
-], UmbEntityActionsBundleElement.prototype, "_dropdownElement", void 0);
 UmbEntityActionsBundleElement = __decorate([
     customElement('umb-entity-actions-bundle')
 ], UmbEntityActionsBundleElement);

package/dist-cms/packages/core/components/input-toggle/input-toggle.element.d.ts

@@ -23,7 +23,6 @@ export declare class UmbInputToggleElement extends UmbInputToggleElement_base {
     _currentLabel?: string;
     protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult[];
 }
 export default UmbInputToggleElement;
 declare global {

package/dist-cms/packages/core/components/input-toggle/input-toggle.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
@@ -49,13 +49,6 @@ let UmbInputToggleElement = class UmbInputToggleElement extends UmbFormControlMi
 			><span>${label}</span>
 		</uui-toggle>`;
     }
-    static { this.styles = [
-        css `
-			uui-toggle {
-				width: 100%;
-			}
-		`,
-    ]; }
 };
 __decorate([
     property({ type: Boolean })

package/dist-cms/packages/core/components/table/table.element.js

@@ -180,10 +180,10 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
         this.dispatchEvent(new UmbTableDeselectedEvent());
     }
     render() {
+        const style = !(this.config.allowSelection === false && this.config.hideIcon === true) ? 'width: 60px' : undefined;
         return html `
 			<uui-table class="uui-text">
-				<uui-table-column
-					.style=${when(!(this.config.allowSelection === false && this.config.hideIcon === true), () => 'width: 60px')}></uui-table-column>
+				<uui-table-column style=${ifDefined(style)}></uui-table-column>
 				<uui-table-head>
 					${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
 				</uui-table-head>
@@ -216,20 +216,23 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
             return;
         return html `
 			<uui-table-head-cell style="--uui-table-cell-padding: 0; text-align: center;">
-				${when(this.config.allowSelection, () => html ` <uui-checkbox
-							label="Select All"
+				${when(this.config.allowSelection, () => html `
+						<uui-checkbox
+							aria-label=${this.localize.term('general_selectAll')}
 							style="padding: var(--uui-size-4) var(--uui-size-5);"
 							@change="${this._handleAllRowsCheckboxChange}"
-							?checked="${this.selection.length === this.items.length}">
-						</uui-checkbox>`)}
+							?checked=${this.selection.length === this.items.length}></uui-checkbox>
+					`)}
 			</uui-table-head-cell>
 		`;
     }
     _renderRowCheckboxCell(item) {
         if (this.sortable === true) {
-            return html `<uui-table-cell style="text-align: center;">
-				<uui-icon name="icon-grip"></uui-icon>
-			</uui-table-cell>`;
+            return html `
+				<uui-table-cell style="text-align: center;">
+					<uui-icon name="icon-grip"></uui-icon>
+				</uui-table-cell>
+			`;
         }
         if (this.config.hideIcon && !this.config.allowSelection)
             return;
@@ -238,11 +241,10 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
 				${when(!this.config.hideIcon, () => html `<umb-icon name="${ifDefined(item.icon ?? undefined)}"></umb-icon>`)}
 				${when(this.config.allowSelection, () => html `
 						<uui-checkbox
-							label="Select Row"
+							aria-label=${this.localize.term('buttons_select')}
 							@click=${(e) => e.stopPropagation()}
 							@change=${(event) => this._handleRowCheckboxChange(event, item)}
-							?checked="${this._isSelected(item.id)}">
-						</uui-checkbox>
+							?checked=${this._isSelected(item.id)}></uui-checkbox>
 					`)}
 			</uui-table-cell>
 		`;

package/dist-cms/packages/core/entity/constants.d.ts

@@ -1,2 +1,4 @@
 export * from './contexts/ancestors/constants.js';
 export * from './contexts/parent/constants.js';
+export * from './entity-type/constants.js';
+export * from './entity-unique/constants.js';

package/dist-cms/packages/core/entity/constants.js

@@ -1,2 +1,4 @@
 export * from './contexts/ancestors/constants.js';
 export * from './contexts/parent/constants.js';
+export * from './entity-type/constants.js';
+export * from './entity-unique/constants.js';

package/dist-cms/packages/core/entity/entity-type/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_ENTITY_TYPE_CONDITION_ALIAS = "Umb.Condition.Entity.Type";

package/dist-cms/packages/core/entity/entity-type/constants.js

@@ -0,0 +1 @@
+export const UMB_ENTITY_TYPE_CONDITION_ALIAS = 'Umb.Condition.Entity.Type';

package/dist-cms/packages/core/entity/entity-type/entity-type.condition.d.ts

@@ -0,0 +1,9 @@
+import type { UmbEntityTypeConditionConfig } from './types.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+export declare class UmbEntityTypeCondition extends UmbConditionBase<UmbEntityTypeConditionConfig> implements UmbExtensionCondition {
+    #private;
+    constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<UmbEntityTypeConditionConfig>);
+}
+export { UmbEntityTypeCondition as api };

package/dist-cms/packages/core/entity/entity-type/entity-type.condition.js

@@ -0,0 +1,23 @@
+import { UMB_ENTITY_CONTEXT } from '../entity.context-token.js';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+export class UmbEntityTypeCondition extends UmbConditionBase {
+    constructor(host, args) {
+        super(host, args);
+        this.consumeContext(UMB_ENTITY_CONTEXT, (context) => {
+            this.observe(context?.entityType, (entityType) => this.#check(entityType), 'umbEntityTypeObserver');
+        });
+    }
+    #check(value) {
+        if (!value) {
+            this.permitted = false;
+            return;
+        }
+        // if the config has a match, we only check that
+        if (this.config.match) {
+            this.permitted = value === this.config.match;
+            return;
+        }
+        this.permitted = this.config.oneOf?.some((configValue) => configValue === value) ?? false;
+    }
+}
+export { UmbEntityTypeCondition as api };

package/dist-cms/packages/core/entity/entity-type/manifests.js

@@ -0,0 +1,9 @@
+import { UMB_ENTITY_TYPE_CONDITION_ALIAS } from './constants.js';
+export const manifests = [
+    {
+        type: 'condition',
+        name: 'Umbraco Entity Type Condition',
+        alias: UMB_ENTITY_TYPE_CONDITION_ALIAS,
+        api: () => import('./entity-type.condition.js'),
+    },
+];

package/dist-cms/packages/core/entity/entity-type/types.d.ts

@@ -0,0 +1,11 @@
+import type { UMB_ENTITY_TYPE_CONDITION_ALIAS } from './constants.js';
+import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
+export type UmbEntityTypeConditionConfig = UmbConditionConfigBase<typeof UMB_ENTITY_TYPE_CONDITION_ALIAS> & {
+    match: string;
+    oneOf?: Array<string>;
+};
+declare global {
+    interface UmbExtensionConditionConfigMap {
+        UmbEntityTypeConditionConfig: UmbEntityTypeConditionConfig;
+    }
+}

package/dist-cms/packages/core/entity/entity-type/types.js

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

package/dist-cms/packages/core/entity/entity-unique/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_ENTITY_UNIQUE_CONDITION_ALIAS = "Umb.Condition.Entity.Unique";

package/dist-cms/packages/core/entity/entity-unique/constants.js

@@ -0,0 +1 @@
+export const UMB_ENTITY_UNIQUE_CONDITION_ALIAS = 'Umb.Condition.Entity.Unique';

package/dist-cms/packages/core/entity/entity-unique/entity-unique.condition.d.ts

@@ -0,0 +1,9 @@
+import type { UmbEntityUniqueConditionConfig } from './types.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+export declare class UmbEntityUniqueCondition extends UmbConditionBase<UmbEntityUniqueConditionConfig> implements UmbExtensionCondition {
+    #private;
+    constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<UmbEntityUniqueConditionConfig>);
+}
+export { UmbEntityUniqueCondition as api };

package/dist-cms/packages/core/entity/entity-unique/entity-unique.condition.js

@@ -0,0 +1,23 @@
+import { UMB_ENTITY_CONTEXT } from '../entity.context-token.js';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+export class UmbEntityUniqueCondition extends UmbConditionBase {
+    constructor(host, args) {
+        super(host, args);
+        this.consumeContext(UMB_ENTITY_CONTEXT, (context) => {
+            this.observe(context?.unique, (unique) => this.#check(unique), 'umbEntityUniqueObserver');
+        });
+    }
+    #check(value) {
+        if (value === undefined) {
+            this.permitted = false;
+            return;
+        }
+        // if the config has a match, we only check that
+        if (this.config.match !== undefined) {
+            this.permitted = value === this.config.match;
+            return;
+        }
+        this.permitted = this.config.oneOf?.some((configValue) => configValue === value) ?? false;
+    }
+}
+export { UmbEntityUniqueCondition as api };

package/dist-cms/packages/core/entity/entity-unique/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/core/entity/entity-unique/manifests.js

@@ -0,0 +1,9 @@
+import { UMB_ENTITY_UNIQUE_CONDITION_ALIAS } from './constants.js';
+export const manifests = [
+    {
+        type: 'condition',
+        name: 'Umbraco Entity Unique Condition',
+        alias: UMB_ENTITY_UNIQUE_CONDITION_ALIAS,
+        api: () => import('./entity-unique.condition.js'),
+    },
+];

package/dist-cms/packages/core/entity/entity-unique/types.d.ts

@@ -0,0 +1,12 @@
+import type { UMB_ENTITY_UNIQUE_CONDITION_ALIAS } from './constants.js';
+import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
+export type UmbEntityUnique = string | null;
+export type UmbEntityUniqueConditionConfig = UmbConditionConfigBase<typeof UMB_ENTITY_UNIQUE_CONDITION_ALIAS> & {
+    match?: UmbEntityUnique;
+    oneOf?: Array<UmbEntityUnique>;
+};
+declare global {
+    interface UmbExtensionConditionConfigMap {
+        UmbEntityUniqueConditionConfig: UmbEntityUniqueConditionConfig;
+    }
+}

package/dist-cms/packages/core/entity/entity-unique/types.js

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

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

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

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

@@ -0,0 +1,3 @@
+import { manifests as entityTypeManifests } from './entity-type/manifests.js';
+import { manifests as entityUniqueManifests } from './entity-unique/manifests.js';
+export const manifests = [...entityTypeManifests, ...entityUniqueManifests];

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

@@ -1,4 +1,4 @@
-export type UmbEntityUnique = string | null;
+import type { UmbEntityUnique } from './entity-unique/types.js';
 export interface UmbEntityModel {
     unique: UmbEntityUnique;
     entityType: string;
@@ -6,3 +6,5 @@ export interface UmbEntityModel {
 export interface UmbNamedEntityModel extends UmbEntityModel {
     name: string;
 }
+export type * from './entity-type/types.js';
+export type * from './entity-unique/types.js';

package/dist-cms/packages/core/entity-action/global-components/entity-actions-dropdown/entity-actions-dropdown.element.d.ts

@@ -0,0 +1,15 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+export declare class UmbEntityActionsDropdownElement extends UmbLitElement {
+    #private;
+    compact: boolean;
+    label?: string;
+    private _dropdownElement?;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-entity-actions-dropdown': UmbEntityActionsDropdownElement;
+    }
+}

package/dist-cms/packages/core/entity-action/global-components/entity-actions-dropdown/entity-actions-dropdown.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 { UmbEntityActionListElement } from '../../entity-action-list.element.js';
+import { html, customElement, property, css, query } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UUIScrollContainerElement } from '@umbraco-cms/backoffice/external/uui';
+import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
+import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
+let UmbEntityActionsDropdownElement = class UmbEntityActionsDropdownElement extends UmbLitElement {
+    #scrollContainerElement;
+    #entityActionListElement;
+    #entityType;
+    #unique;
+    constructor() {
+        super();
+        this.compact = false;
+        this.consumeContext(UMB_ENTITY_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(observeMultiple([context.entityType, context.unique]), ([entityType, unique]) => {
+                this.#entityType = entityType;
+                this.#unique = unique;
+                if (this.#entityActionListElement) {
+                    this.#entityActionListElement.entityType = entityType;
+                    this.#entityActionListElement.unique = unique;
+                }
+            });
+        });
+    }
+    #onActionExecuted() {
+        this._dropdownElement?.closeDropdown();
+    }
+    #onDropdownClick(event) {
+        event.stopPropagation();
+    }
+    #onDropdownOpened() {
+        if (this.#scrollContainerElement) {
+            return; // Already created
+        }
+        // First create dropdown content when the dropdown is opened.
+        // Programmatically create the elements so they are cached if the dropdown is opened again
+        this.#scrollContainerElement = new UUIScrollContainerElement();
+        this.#entityActionListElement = new UmbEntityActionListElement();
+        this.#entityActionListElement.addEventListener('action-executed', this.#onActionExecuted);
+        this.#entityActionListElement.entityType = this.#entityType;
+        this.#entityActionListElement.unique = this.#unique;
+        this.#entityActionListElement.setAttribute('label', this.label ?? '');
+        this.#scrollContainerElement.appendChild(this.#entityActionListElement);
+        this._dropdownElement?.appendChild(this.#scrollContainerElement);
+    }
+    render() {
+        return html `<umb-dropdown
+			id="action-modal"
+			@click=${this.#onDropdownClick}
+			@opened=${this.#onDropdownOpened}
+			.label=${this.label}
+			?compact=${this.compact}
+			hide-expand>
+			<slot name="label" slot="label"></slot>
+			<slot></slot>
+		</umb-dropdown>`;
+    }
+    static { this.styles = [
+        css `
+			uui-scroll-container {
+				max-height: 700px;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean })
+], UmbEntityActionsDropdownElement.prototype, "compact", void 0);
+__decorate([
+    property({ type: String })
+], UmbEntityActionsDropdownElement.prototype, "label", void 0);
+__decorate([
+    query('#action-modal')
+], UmbEntityActionsDropdownElement.prototype, "_dropdownElement", void 0);
+UmbEntityActionsDropdownElement = __decorate([
+    customElement('umb-entity-actions-dropdown')
+], UmbEntityActionsDropdownElement);
+export { UmbEntityActionsDropdownElement };

package/dist-cms/packages/core/entity-action/global-components/index.d.ts

@@ -1 +1,2 @@
+import './entity-actions-dropdown/entity-actions-dropdown.element.js';
 import './entity-actions-table-column-view/entity-actions-table-column-view.element.js';

package/dist-cms/packages/core/entity-action/global-components/index.js

@@ -1 +1,2 @@
+import './entity-actions-dropdown/entity-actions-dropdown.element.js';
 import './entity-actions-table-column-view/entity-actions-table-column-view.element.js';

package/dist-cms/packages/core/entity-item/item-data-api-get-request-controller/item-data-api-get-request.controller.d.ts

@@ -7,6 +7,6 @@ export declare class UmbItemDataApiGetRequestController<ResponseModelType extend
     constructor(host: UmbControllerHost, args: UmbItemDataApiGetRequestControllerArgs<ResponseModelType>);
     request(): Promise<{
         data: ResponseModelType["data"];
-        error: Error | UmbError | UmbApiError | UmbCancelError | undefined;
+        error: Error | UmbApiError | UmbCancelError | UmbError | undefined;
     }>;
 }

package/dist-cms/packages/core/event/closed.event.d.ts

@@ -0,0 +1,4 @@
+export declare class UmbClosedEvent extends Event {
+    static readonly TYPE = "closed";
+    constructor();
+}

package/dist-cms/packages/core/event/closed.event.js

@@ -0,0 +1,7 @@
+export class UmbClosedEvent extends Event {
+    static { this.TYPE = 'closed'; }
+    constructor() {
+        // mimics the native toggle event
+        super(UmbClosedEvent.TYPE, { bubbles: false, composed: false, cancelable: false });
+    }
+}

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

@@ -1,8 +1,10 @@
 export * from './action-executed.event.js';
 export * from './change.event.js';
+export * from './closed.event.js';
 export * from './delete.event.js';
 export * from './deselected.event.js';
 export * from './input.event.js';
+export * from './opened.event.js';
 export * from './progress.event.js';
 export * from './selected.event.js';
 export * from './selection-change.event.js';

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

@@ -1,8 +1,10 @@
 export * from './action-executed.event.js';
 export * from './change.event.js';
+export * from './closed.event.js';
 export * from './delete.event.js';
 export * from './deselected.event.js';
 export * from './input.event.js';
+export * from './opened.event.js';
 export * from './progress.event.js';
 export * from './selected.event.js';
 export * from './selection-change.event.js';