import { r as registerInstance, c as createEvent, h, H as Host } from './index-BIwHMk6j.js';

const orderByItemCss = () => `*{box-sizing:border-box}:host(limebb-lime-query-order-by-item){box-sizing:border-box;display:flex;flex-direction:row;align-items:flex-start;gap:0.5rem;width:100%}limebb-property-selector{flex-grow:1}.control-buttons{flex-shrink:0;display:flex;align-items:center;gap:0.25rem}`;

const OrderByItemComponent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.itemChange = createEvent(this, "itemChange");
        this.handlePathChange = (event) => {
            event.stopPropagation();
            const newPath = event.detail;
            if (!newPath) {
                // If path is cleared, keep the current item but with empty path
                const currentDirection = this.item[Object.keys(this.item)[0]] || 'ASC';
                this.itemChange.emit({ '': currentDirection });
                return;
            }
            // Get current direction
            const currentPath = Object.keys(this.item)[0];
            const currentDirection = this.item[currentPath] || 'ASC';
            // Create new item with new path but same direction
            const newItem = { [newPath]: currentDirection };
            this.itemChange.emit(newItem);
        };
        this.handleToggleDirection = () => {
            const propertyPath = Object.keys(this.item)[0] || '';
            const currentDirection = this.item[propertyPath] || 'ASC';
            const newDirection = currentDirection === 'ASC' ? 'DESC' : 'ASC';
            const newItem = { [propertyPath]: newDirection };
            this.itemChange.emit(newItem);
        };
        this.handleRemove = () => {
            this.itemChange.emit(null);
        };
    }
    render() {
        const propertyPath = Object.keys(this.item)[0] || '';
        const direction = this.item[propertyPath] || 'ASC';
        return (h(Host, { key: '77f58753af7831ffe97728cdbc5b03ac68a47773' }, h("limebb-property-selector", { key: '5d4c27d2f81ea7f1260298e16a52f9670d9fc641', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: propertyPath, required: true, onChange: this.handlePathChange }), h("div", { key: '7e8ad17d20935c423f4d48d49761008622030ea3', class: "control-buttons" }, h("limel-icon-button", { key: 'c9f1b7cc8e6bc28bc1b61205a9ed791a7bd19403', icon: direction === 'ASC'
                ? 'sort_ascending'
                : 'sort_descending', label: direction === 'ASC' ? 'Ascending' : 'Descending', onClick: this.handleToggleDirection }), h("limel-icon-button", { key: '42b34e92359a662bce151c4daa300fc79d2fcbbb', icon: "trash", label: "Remove", onClick: this.handleRemove }))));
    }
};
OrderByItemComponent.style = orderByItemCss();

export { OrderByItemComponent as limebb_lime_query_order_by_item };
