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 { MelodicComponent } from '@melodicdev/core';
import { sidebarItemTemplate } from './sidebar-item.template.js';
import { sidebarItemStyles } from './sidebar-item.styles.js';
/**
 * ml-sidebar-item - Navigation link for use within ml-sidebar
 *
 * @example
 * ```html
 * <ml-sidebar-item icon="house" label="Home" value="home" active></ml-sidebar-item>
 * <ml-sidebar-item icon="folder" label="Projects" value="projects" badge="5">
 *   <ml-sidebar-item label="Active" value="active" level="1"></ml-sidebar-item>
 *   <ml-sidebar-item label="Archived" value="archived" level="1"></ml-sidebar-item>
 * </ml-sidebar-item>
 * ```
 *
 * @slot leading - Custom icon/avatar override
 * @slot trailing - Custom trailing content
 * @slot default - Sub-items for expandable menu
 *
 * @fires ml:sidebar-item-click - Emitted when item is clicked (bubbles to parent sidebar)
 */
let SidebarItemComponent = class SidebarItemComponent {
    constructor() {
        /** Icon name */
        this.icon = '';
        /** Icon format (passed through to ml-icon) */
        this['icon-format'] = '';
        /** Display label */
        this.label = '';
        /** Unique value identifier */
        this.value = '';
        /** Navigation URL */
        this.href = '';
        /** Active state (managed by parent sidebar) */
        this.active = false;
        /** Disabled state */
        this.disabled = false;
        /** Badge text */
        this.badge = '';
        /** Badge color variant */
        this['badge-color'] = 'default';
        /** External link */
        this.external = false;
        /** Submenu expanded state */
        this.expanded = false;
        /** Collapsed state (set by parent sidebar in slim mode) */
        this.collapsed = false;
        /** Indentation level for nested items */
        this.level = '0';
        /** Track slotted children */
        this._hasChildren = false;
        /** Handle default slot change to detect children */
        this.handleSlotChange = (event) => {
            const slot = event.target;
            const assigned = slot.assignedElements({ flatten: true });
            this._hasChildren = assigned.some((el) => el.tagName === 'ML-SIDEBAR-ITEM');
        };
        /** Handle click on item */
        this.handleClick = (event) => {
            if (this.disabled)
                return;
            if (this.hasChildren) {
                event.preventDefault();
                this.expanded = !this.expanded;
                this.elementRef.toggleAttribute('expanded', this.expanded);
                return;
            }
            this.elementRef.dispatchEvent(new CustomEvent('ml:sidebar-item-click', {
                bubbles: true,
                composed: true,
                detail: { value: this.value, href: this.href }
            }));
        };
    }
    /** Check if default slot has children */
    get hasChildren() {
        return this._hasChildren;
    }
    onCreate() {
        // Check for slotted children
        this._hasChildren = this.elementRef.querySelector('ml-sidebar-item') !== null;
    }
    onDestroy() {
        // cleanup if needed
    }
};
SidebarItemComponent = __decorate([
    MelodicComponent({
        selector: 'ml-sidebar-item',
        template: sidebarItemTemplate,
        styles: sidebarItemStyles,
        attributes: ['icon', 'icon-format', 'label', 'value', 'href', 'active', 'disabled', 'badge', 'badge-color', 'external', 'expanded', 'collapsed', 'level']
    })
], SidebarItemComponent);
export { SidebarItemComponent };
