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 { UmbTextStyles } from '../../style/index.js';
import { css, html, customElement, property, query, when } from '../../../../external/lit/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
import { UmbClosedEvent, UmbOpenedEvent } from '../../event/index.js';
// TODO: maybe move this to UI Library.
let UmbDropdownElement = class UmbDropdownElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.#open = false;
        this.look = 'default';
        this.color = 'default';
        this.placement = 'bottom-start';
        this.compact = false;
        this.disabled = false;
        this.hideExpand = false;
    }
    #open;
    get open() {
        return this.#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 `
			<uui-button
				id="dropdown-button"
				popovertarget="dropdown-popover"
				data-mark="open-dropdown"
				.look=${this.look}
				.color=${this.color}
				.label=${this.label ?? ''}
				.compact=${this.compact}
				?disabled=${this.disabled}>
				<slot name="label"></slot>
				${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>
					<slot></slot>
				</umb-popover-layout>
			</uui-popover-container>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#dropdown-button {
				min-width: max-content;
				height: 100%;
			}
			:host(:not([hide-expand]):not([compact])) #dropdown-button {
				--uui-button-padding-right-factor: 2;
			}

			:host(:not([compact])) #symbol-expand {
				margin-left: var(--uui-size-space-2);
			}
		`,
    ]; }
};
__decorate([
    property({ type: Boolean, reflect: true })
], UmbDropdownElement.prototype, "open", null);
__decorate([
    property()
], UmbDropdownElement.prototype, "label", void 0);
__decorate([
    property()
], UmbDropdownElement.prototype, "look", void 0);
__decorate([
    property()
], UmbDropdownElement.prototype, "color", void 0);
__decorate([
    property()
], UmbDropdownElement.prototype, "placement", void 0);
__decorate([
    property({ type: Boolean })
], UmbDropdownElement.prototype, "compact", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbDropdownElement.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, attribute: 'hide-expand' })
], UmbDropdownElement.prototype, "hideExpand", void 0);
__decorate([
    query('#dropdown-popover')
], UmbDropdownElement.prototype, "popoverContainerElement", void 0);
UmbDropdownElement = __decorate([
    customElement('umb-dropdown')
], UmbDropdownElement);
export { UmbDropdownElement };
