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 '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../lit-element/index.js';
import { UUIScrollContainerElement } from '../../../../../external/uui/index.js';
let UmbEntityActionsDropdownElement = class UmbEntityActionsDropdownElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.compact = false;
        // Event handler as arrow function to maintain consistent reference
        this.#onActionExecuted = () => {
            this._dropdownElement?.closeDropdown();
        };
    }
    #scrollContainerElement;
    #entityActionListElement;
    // Event handler as arrow function to maintain consistent reference
    #onActionExecuted;
    disconnectedCallback() {
        super.disconnectedCallback();
        if (this.#entityActionListElement) {
            this.#entityActionListElement.removeEventListener('action-executed', this.#onActionExecuted);
        }
    }
    #onDropdownClick(event) {
        event.stopPropagation();
    }
    #onDropdownOpened() {
        if (this.#entityActionListElement) {
            this.#entityActionListElement.focus();
            return;
        }
        // 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.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}
			@focusout=${(e) => {
            const relatedTarget = e.relatedTarget;
            if (!relatedTarget)
                return;
            const allowedTags = ['umb-entity-action-list', 'uui-scroll-container', 'uui-menu-item', 'umb-entity-action'];
            if (allowedTags.includes(relatedTarget.tagName.toLowerCase()))
                return;
            this.#onActionExecuted();
        }}
			.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 };
