import * as i0 from '@angular/core';
import { input, output, viewChild, viewChildren, effect, Component } from '@angular/core';
import { Avatar } from '@masterteam/components/avatar';
import { Skeleton } from 'primeng/skeleton';

class ClientPageMenu {
    syncFrameId = null;
    /** List of menu items to display */
    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
    /** Whether menu items are loading */
    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
    /** Currently selected menu item */
    selectedItem = input(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
    /** Emitted when a menu item is clicked */
    menuItemClick = output();
    menuContainer = viewChild('menuContainer', ...(ngDevMode ? [{ debugName: "menuContainer" }] : []));
    menuItemElements = viewChildren('menuItem', ...(ngDevMode ? [{ debugName: "menuItemElements" }] : []));
    constructor() {
        effect(() => {
            const selectedKey = this.selectedItem()?.key;
            const itemCount = this.menuItems().length;
            const itemElements = this.menuItemElements();
            void selectedKey;
            void itemCount;
            void itemElements;
            this.queueSelectedItemSync();
        });
    }
    selectItem(item) {
        this.menuItemClick.emit(item);
    }
    ngOnDestroy() {
        if (this.syncFrameId !== null) {
            cancelAnimationFrame(this.syncFrameId);
        }
    }
    getAvatarStyle(color) {
        if (color.startsWith('#')) {
            return {
                '--p-avatar-background': color + '1a',
                '--p-avatar-color': color,
            };
        }
        return {
            '--p-avatar-background': `var(--p-${color}-100)`,
            '--p-avatar-color': `var(--p-${color}-700)`,
        };
    }
    queueSelectedItemSync() {
        if (this.syncFrameId !== null) {
            cancelAnimationFrame(this.syncFrameId);
        }
        this.syncFrameId = requestAnimationFrame(() => {
            this.syncFrameId = null;
            this.syncSelectedItemIntoView();
        });
    }
    syncSelectedItemIntoView() {
        const selectedItem = this.selectedItem();
        const container = this.menuContainer()?.nativeElement;
        if (!selectedItem || !container)
            return;
        const selectedElement = this.menuItemElements().find((item) => item.nativeElement.dataset['key'] === selectedItem.key)?.nativeElement;
        if (!selectedElement)
            return;
        const containerRect = container.getBoundingClientRect();
        const itemRect = selectedElement.getBoundingClientRect();
        const topLimit = containerRect.top + 12;
        const bottomLimit = containerRect.bottom - 56;
        if (itemRect.top < topLimit || itemRect.bottom > bottomLimit) {
            selectedElement.scrollIntoView({
                block: 'nearest',
                inline: 'nearest',
            });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPageMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientPageMenu, isStandalone: true, selector: "mt-client-page-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { classAttribute: "flex min-h-0 flex-1 overflow-hidden" }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true, isSignal: true }, { propertyName: "menuItemElements", predicate: ["menuItem"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu Items -->\r\n<div\r\n  #menuContainer\r\n  class=\"flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto py-1 pb-16\"\r\n>\r\n  @if (loading()) {\r\n    <!-- Skeleton Loading -->\r\n    @for (i of [1, 2, 3, 4]; track i) {\r\n      <div class=\"px-3 py-2 w-full\">\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 rounded-lg\"\r\n          style=\"--p-skeleton-background: var(--p-surface-300)\"\r\n        >\r\n          <p-skeleton shape=\"square\" size=\"2.5rem\" borderRadius=\"8px\" />\r\n          <div class=\"flex-1 flex flex-col gap-1\">\r\n            <p-skeleton width=\"70%\" height=\"0.875rem\" />\r\n            <p-skeleton width=\"40%\" height=\"0.75rem\" />\r\n          </div>\r\n          <p-skeleton shape=\"circle\" size=\"1.5rem\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else if (menuItems().length === 0) {\r\n    <!-- Empty State -->\r\n    <div\r\n      class=\"flex flex-col items-center justify-center py-10 px-4 text-center\"\r\n    >\r\n      <div class=\"text-surface-400 text-3xl mb-3\">\r\n        <i class=\"pi pi-inbox\"></i>\r\n      </div>\r\n      <p class=\"text-sm text-surface-500 font-medium\">No data found</p>\r\n    </div>\r\n  } @else {\r\n    @for (item of menuItems(); track item.key) {\r\n      <div\r\n        #menuItem\r\n        [attr.data-key]=\"item.key\"\r\n        class=\"px-3 py-2 w-full text-start transition-colors cursor-pointer\"\r\n        (click)=\"selectItem(item)\"\r\n      >\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 transition-colors rounded-lg\"\r\n          [class]=\"\r\n            selectedItem()?.key === item.key\r\n              ? 'bg-surface-300'\r\n              : 'hover:bg-surface-100'\r\n          \"\r\n        >\r\n          <mt-avatar\r\n            [style]=\"getAvatarStyle(item.color)\"\r\n            [icon]=\"item.icon\"\r\n            shape=\"square\"\r\n            size=\"normal\"\r\n          />\r\n          <span\r\n            class=\"flex-1 text-sm font-medium\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'text-primary-700'\r\n                : 'text-surface-700'\r\n            \"\r\n          >\r\n            {{ item.title }}\r\n          </span>\r\n          <span\r\n            class=\"text-xs font-medium rounded-full px-2 py-0.5\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'bg-primary-100 text-primary-700'\r\n                : 'bg-surface-200 text-surface-600'\r\n            \"\r\n          >\r\n            {{ item.count }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPageMenu, decorators: [{
            type: Component,
            args: [{ selector: 'mt-client-page-menu', standalone: true, imports: [Avatar, Skeleton], host: {
                        class: 'flex min-h-0 flex-1 overflow-hidden',
                    }, template: "<!-- Menu Items -->\r\n<div\r\n  #menuContainer\r\n  class=\"flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto py-1 pb-16\"\r\n>\r\n  @if (loading()) {\r\n    <!-- Skeleton Loading -->\r\n    @for (i of [1, 2, 3, 4]; track i) {\r\n      <div class=\"px-3 py-2 w-full\">\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 rounded-lg\"\r\n          style=\"--p-skeleton-background: var(--p-surface-300)\"\r\n        >\r\n          <p-skeleton shape=\"square\" size=\"2.5rem\" borderRadius=\"8px\" />\r\n          <div class=\"flex-1 flex flex-col gap-1\">\r\n            <p-skeleton width=\"70%\" height=\"0.875rem\" />\r\n            <p-skeleton width=\"40%\" height=\"0.75rem\" />\r\n          </div>\r\n          <p-skeleton shape=\"circle\" size=\"1.5rem\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else if (menuItems().length === 0) {\r\n    <!-- Empty State -->\r\n    <div\r\n      class=\"flex flex-col items-center justify-center py-10 px-4 text-center\"\r\n    >\r\n      <div class=\"text-surface-400 text-3xl mb-3\">\r\n        <i class=\"pi pi-inbox\"></i>\r\n      </div>\r\n      <p class=\"text-sm text-surface-500 font-medium\">No data found</p>\r\n    </div>\r\n  } @else {\r\n    @for (item of menuItems(); track item.key) {\r\n      <div\r\n        #menuItem\r\n        [attr.data-key]=\"item.key\"\r\n        class=\"px-3 py-2 w-full text-start transition-colors cursor-pointer\"\r\n        (click)=\"selectItem(item)\"\r\n      >\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 transition-colors rounded-lg\"\r\n          [class]=\"\r\n            selectedItem()?.key === item.key\r\n              ? 'bg-surface-300'\r\n              : 'hover:bg-surface-100'\r\n          \"\r\n        >\r\n          <mt-avatar\r\n            [style]=\"getAvatarStyle(item.color)\"\r\n            [icon]=\"item.icon\"\r\n            shape=\"square\"\r\n            size=\"normal\"\r\n          />\r\n          <span\r\n            class=\"flex-1 text-sm font-medium\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'text-primary-700'\r\n                : 'text-surface-700'\r\n            \"\r\n          >\r\n            {{ item.title }}\r\n          </span>\r\n          <span\r\n            class=\"text-xs font-medium rounded-full px-2 py-0.5\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'bg-primary-100 text-primary-700'\r\n                : 'bg-surface-200 text-surface-600'\r\n            \"\r\n          >\r\n            {{ item.count }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n" }]
        }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], menuContainer: [{ type: i0.ViewChild, args: ['menuContainer', { isSignal: true }] }], menuItemElements: [{ type: i0.ViewChildren, args: ['menuItem', { isSignal: true }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { ClientPageMenu };
//# sourceMappingURL=masterteam-components-client-page-menu.mjs.map
