import * as i0 from '@angular/core';
import { inject, PLATFORM_ID, input, model, contentChild, output, linkedSignal, computed, effect, signal, Component } from '@angular/core';
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
import { Avatar } from '@masterteam/components/avatar';
import { Card } from '@masterteam/components/card';
import { ClientPageMenu } from '@masterteam/components/client-page-menu';
import { Icon } from '@masterteam/icons';

class ClientPage {
    platformId = inject(PLATFORM_ID);
    mediaQueryList = null;
    /** Icon for the left sidebar header */
    menuIcon = input(...(ngDevMode ? [undefined, { debugName: "menuIcon" }] : []));
    /** Title for the left sidebar header */
    menuTitle = input(...(ngDevMode ? [undefined, { debugName: "menuTitle" }] : []));
    /** List of menu items for the left sidebar */
    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
    /** Whether menu items are loading */
    menuItemsLoading = input(false, ...(ngDevMode ? [{ debugName: "menuItemsLoading" }] : []));
    /** Key of the active menu item (defaults to first item) */
    activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : []));
    /** Whether the sidebar menu is collapsed (two-way bindable) */
    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
    /** Template projected into the left sidebar header end */
    headerEnd = contentChild('headerClientPageEnd', ...(ngDevMode ? [{ debugName: "headerEnd" }] : []));
    /** Emitted when a menu item is clicked */
    menuItemClick = output();
    /** Tracks activeItem input, overridable by user clicks */
    selectedKey = linkedSignal(() => this.activeItem(), ...(ngDevMode ? [{ debugName: "selectedKey" }] : []));
    /** Currently selected menu item */
    selectedItem = computed(() => {
        const key = this.selectedKey();
        const items = this.menuItems();
        if (key) {
            return items.find((item) => item.key === key) ?? items[0] ?? null;
        }
        return items[0] ?? null;
    }, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
    /** Whether the initial default selection has been emitted */
    initialEmitted = false;
    constructor() {
        effect(() => {
            const item = this.selectedItem();
            if (item && !this.initialEmitted) {
                this.initialEmitted = true;
                this.menuItemClick.emit(item);
            }
        });
        this.setupResponsiveBehavior();
    }
    /** Whether the divider/toggle area is being hovered */
    dividerHovered = signal(false, ...(ngDevMode ? [{ debugName: "dividerHovered" }] : []));
    /** Whether the viewport is at or below the responsive breakpoint */
    isResponsive = signal(false, ...(ngDevMode ? [{ debugName: "isResponsive" }] : []));
    /** Whether the responsive top navigation is expanded */
    responsiveMenuExpanded = signal(false, ...(ngDevMode ? [{ debugName: "responsiveMenuExpanded" }] : []));
    /** Whether the menu section is currently visible */
    showSidebarMenu = computed(() => this.isResponsive() ? this.responsiveMenuExpanded() : !this.collapsed(), ...(ngDevMode ? [{ debugName: "showSidebarMenu" }] : []));
    /** Sidebar width reacts to collapsed + hover */
    sidebarWidth = computed(() => {
        if (this.isResponsive()) {
            return '100%';
        }
        if (this.collapsed()) {
            return this.dividerHovered() ? '12px' : '9px';
        }
        return this.dividerHovered() ? '15.8%' : '16%';
    }, ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
    /** Icon for the collapse toggle button */
    toggleIcon = computed(() => this.isResponsive()
        ? this.responsiveMenuExpanded()
            ? 'arrow.chevron-up'
            : 'arrow.chevron-down'
        : this.collapsed()
            ? 'arrow.chevron-right'
            : 'arrow.chevron-left', ...(ngDevMode ? [{ debugName: "toggleIcon" }] : []));
    /** Accessible label for the toggle button */
    toggleAriaLabel = computed(() => this.isResponsive()
        ? this.responsiveMenuExpanded()
            ? 'Collapse menu'
            : 'Expand menu'
        : this.collapsed()
            ? 'Expand sidebar'
            : 'Collapse sidebar', ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : []));
    toggleCollapsed() {
        if (this.isResponsive()) {
            this.responsiveMenuExpanded.update((expanded) => !expanded);
            return;
        }
        this.collapsed.update((v) => !v);
    }
    selectItem(item) {
        this.selectedKey.set(item.key);
        if (this.isResponsive()) {
            this.responsiveMenuExpanded.set(false);
        }
        this.menuItemClick.emit(item);
    }
    ngOnDestroy() {
        if (!this.mediaQueryList) {
            return;
        }
        if (typeof this.mediaQueryList.removeEventListener === 'function') {
            this.mediaQueryList.removeEventListener('change', this.handleResponsiveBreakpointChange);
            return;
        }
        this.mediaQueryList.removeListener(this.handleResponsiveBreakpointChange);
    }
    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)`,
        };
    }
    handleResponsiveBreakpointChange = (event) => {
        this.syncResponsiveState(event.matches);
    };
    setupResponsiveBehavior() {
        if (!isPlatformBrowser(this.platformId) ||
            typeof window.matchMedia !== 'function') {
            return;
        }
        this.mediaQueryList = window.matchMedia('(max-width: 1024px)');
        this.syncResponsiveState(this.mediaQueryList.matches);
        if (typeof this.mediaQueryList.addEventListener === 'function') {
            this.mediaQueryList.addEventListener('change', this.handleResponsiveBreakpointChange);
            return;
        }
        this.mediaQueryList.addListener(this.handleResponsiveBreakpointChange);
    }
    syncResponsiveState(isResponsive) {
        const wasResponsive = this.isResponsive();
        this.isResponsive.set(isResponsive);
        this.dividerHovered.set(false);
        if (wasResponsive !== isResponsive) {
            this.responsiveMenuExpanded.set(false);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientPage, isStandalone: true, selector: "mt-client-page", inputs: { menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, menuTitle: { classPropertyName: "menuTitle", publicName: "menuTitle", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, menuItemsLoading: { classPropertyName: "menuItemsLoading", publicName: "menuItemsLoading", isSignal: true, isRequired: false, transformFunction: null }, activeItem: { classPropertyName: "activeItem", publicName: "activeItem", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", menuItemClick: "menuItemClick" }, host: { classAttribute: "block h-full" }, queries: [{ propertyName: "headerEnd", first: true, predicate: ["headerClientPageEnd"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-card class=\"bg-gray-200 w-full h-full\">\r\n  <ng-template #headless>\r\n    <div class=\"flex h-full min-h-0\" [class.flex-col]=\"isResponsive()\">\r\n      <!-- Left Sidebar -->\r\n      <div\r\n        class=\"flex min-h-0 flex-col overflow-hidden transition-all duration-300 ease-in-out\"\r\n        [style.width]=\"sidebarWidth()\"\r\n      >\r\n        <!-- Sidebar Header -->\r\n        <div\r\n          class=\"flex shrink-0 items-center justify-between overflow-hidden border-b border-gray-300 px-5 py-4\"\r\n          [class.whitespace-nowrap]=\"!isResponsive()\"\r\n        >\r\n          <div class=\"flex min-w-0 items-center gap-2\">\r\n            @if (menuIcon()) {\r\n              <div class=\"text-lg shrink-0\">\r\n                <mt-icon [icon]=\"menuIcon()!\" />\r\n              </div>\r\n            }\r\n            @if (menuTitle()) {\r\n              <div class=\"min-w-0 truncate font-semibold\">\r\n                {{ menuTitle() }}\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          @if (isResponsive()) {\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"toggleCollapsed()\"\r\n              class=\"ml-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-primary-600 active:scale-95 active:bg-gray-100\"\r\n              [attr.aria-label]=\"toggleAriaLabel()\"\r\n            >\r\n              <mt-icon [icon]=\"toggleIcon()\" class=\"text-sm\" />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (showSidebarMenu()) {\r\n          <!-- Menu Items -->\r\n          <div\r\n            class=\"min-h-0 overflow-hidden\"\r\n            [class.flex-1]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"isResponsive() ? '22rem' : null\"\r\n          >\r\n            <mt-client-page-menu\r\n              class=\"h-full\"\r\n              [menuItems]=\"menuItems()\"\r\n              [selectedItem]=\"selectedItem()\"\r\n              [loading]=\"menuItemsLoading()\"\r\n              (menuItemClick)=\"selectItem($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Vertical Divider with Toggle Button -->\r\n      @if (!isResponsive()) {\r\n        <div\r\n          class=\"relative w-px flex-shrink-0\"\r\n          (mouseenter)=\"dividerHovered.set(true)\"\r\n          (mouseleave)=\"dividerHovered.set(false)\"\r\n        >\r\n          <!-- Toggle Button at bottom of divider -->\r\n          <button\r\n            type=\"button\"\r\n            (click)=\"toggleCollapsed()\"\r\n            class=\"absolute bottom-6 left-1/2 z-10 flex h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 group\"\r\n            [attr.aria-label]=\"toggleAriaLabel()\"\r\n          >\r\n            <mt-icon\r\n              [icon]=\"toggleIcon()\"\r\n              class=\"text-xs text-gray-500 transition-all duration-200 group-hover:animate-pulse group-hover:text-primary-600\"\r\n            />\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- Right Content Panel -->\r\n      <div class=\"flex min-h-0 min-w-0 flex-1 flex-col\">\r\n        <mt-card class=\"h-full min-h-0\">\r\n          <ng-template #headless>\r\n            <!-- Content Header -->\r\n            <div\r\n              class=\"flex shrink-0 items-center justify-between border-b border-surface px-5 py-4\"\r\n              [class.flex-col]=\"isResponsive()\"\r\n              [class.items-start]=\"isResponsive()\"\r\n              [class.gap-3]=\"isResponsive()\"\r\n            >\r\n              <div class=\"flex min-w-0 items-center gap-3\">\r\n                @if (selectedItem(); as selected) {\r\n                  <mt-avatar\r\n                    [style]=\"getAvatarStyle(selected.color)\"\r\n                    [icon]=\"selected.icon\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                  />\r\n                  <div class=\"min-w-0\">\r\n                    <div class=\"text-md truncate font-semibold\">\r\n                      {{ selected.title }}\r\n                    </div>\r\n                    @if (selected.subtitle) {\r\n                      <div class=\"truncate text-sm font-semibold text-gray-500\">\r\n                        {{ selected.subtitle }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n              @if (headerEnd(); as template) {\r\n                <div\r\n                  class=\"flex gap-2\"\r\n                  [class.w-full]=\"isResponsive()\"\r\n                  [class.flex-wrap]=\"isResponsive()\"\r\n                  [class.justify-end]=\"isResponsive()\"\r\n                >\r\n                  <ng-container [ngTemplateOutlet]=\"template\" />\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Content Body -->\r\n            <div\r\n              class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n            >\r\n              <ng-content />\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</mt-card>\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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: ClientPageMenu, selector: "mt-client-page-menu", inputs: ["menuItems", "loading", "selectedItem"], outputs: ["menuItemClick"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPage, decorators: [{
            type: Component,
            args: [{ selector: 'mt-client-page', standalone: true, imports: [Avatar, Card, ClientPageMenu, Icon, NgTemplateOutlet], host: {
                        class: 'block h-full',
                    }, template: "<mt-card class=\"bg-gray-200 w-full h-full\">\r\n  <ng-template #headless>\r\n    <div class=\"flex h-full min-h-0\" [class.flex-col]=\"isResponsive()\">\r\n      <!-- Left Sidebar -->\r\n      <div\r\n        class=\"flex min-h-0 flex-col overflow-hidden transition-all duration-300 ease-in-out\"\r\n        [style.width]=\"sidebarWidth()\"\r\n      >\r\n        <!-- Sidebar Header -->\r\n        <div\r\n          class=\"flex shrink-0 items-center justify-between overflow-hidden border-b border-gray-300 px-5 py-4\"\r\n          [class.whitespace-nowrap]=\"!isResponsive()\"\r\n        >\r\n          <div class=\"flex min-w-0 items-center gap-2\">\r\n            @if (menuIcon()) {\r\n              <div class=\"text-lg shrink-0\">\r\n                <mt-icon [icon]=\"menuIcon()!\" />\r\n              </div>\r\n            }\r\n            @if (menuTitle()) {\r\n              <div class=\"min-w-0 truncate font-semibold\">\r\n                {{ menuTitle() }}\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          @if (isResponsive()) {\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"toggleCollapsed()\"\r\n              class=\"ml-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-primary-600 active:scale-95 active:bg-gray-100\"\r\n              [attr.aria-label]=\"toggleAriaLabel()\"\r\n            >\r\n              <mt-icon [icon]=\"toggleIcon()\" class=\"text-sm\" />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (showSidebarMenu()) {\r\n          <!-- Menu Items -->\r\n          <div\r\n            class=\"min-h-0 overflow-hidden\"\r\n            [class.flex-1]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"isResponsive() ? '22rem' : null\"\r\n          >\r\n            <mt-client-page-menu\r\n              class=\"h-full\"\r\n              [menuItems]=\"menuItems()\"\r\n              [selectedItem]=\"selectedItem()\"\r\n              [loading]=\"menuItemsLoading()\"\r\n              (menuItemClick)=\"selectItem($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Vertical Divider with Toggle Button -->\r\n      @if (!isResponsive()) {\r\n        <div\r\n          class=\"relative w-px flex-shrink-0\"\r\n          (mouseenter)=\"dividerHovered.set(true)\"\r\n          (mouseleave)=\"dividerHovered.set(false)\"\r\n        >\r\n          <!-- Toggle Button at bottom of divider -->\r\n          <button\r\n            type=\"button\"\r\n            (click)=\"toggleCollapsed()\"\r\n            class=\"absolute bottom-6 left-1/2 z-10 flex h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 group\"\r\n            [attr.aria-label]=\"toggleAriaLabel()\"\r\n          >\r\n            <mt-icon\r\n              [icon]=\"toggleIcon()\"\r\n              class=\"text-xs text-gray-500 transition-all duration-200 group-hover:animate-pulse group-hover:text-primary-600\"\r\n            />\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- Right Content Panel -->\r\n      <div class=\"flex min-h-0 min-w-0 flex-1 flex-col\">\r\n        <mt-card class=\"h-full min-h-0\">\r\n          <ng-template #headless>\r\n            <!-- Content Header -->\r\n            <div\r\n              class=\"flex shrink-0 items-center justify-between border-b border-surface px-5 py-4\"\r\n              [class.flex-col]=\"isResponsive()\"\r\n              [class.items-start]=\"isResponsive()\"\r\n              [class.gap-3]=\"isResponsive()\"\r\n            >\r\n              <div class=\"flex min-w-0 items-center gap-3\">\r\n                @if (selectedItem(); as selected) {\r\n                  <mt-avatar\r\n                    [style]=\"getAvatarStyle(selected.color)\"\r\n                    [icon]=\"selected.icon\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                  />\r\n                  <div class=\"min-w-0\">\r\n                    <div class=\"text-md truncate font-semibold\">\r\n                      {{ selected.title }}\r\n                    </div>\r\n                    @if (selected.subtitle) {\r\n                      <div class=\"truncate text-sm font-semibold text-gray-500\">\r\n                        {{ selected.subtitle }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n              @if (headerEnd(); as template) {\r\n                <div\r\n                  class=\"flex gap-2\"\r\n                  [class.w-full]=\"isResponsive()\"\r\n                  [class.flex-wrap]=\"isResponsive()\"\r\n                  [class.justify-end]=\"isResponsive()\"\r\n                >\r\n                  <ng-container [ngTemplateOutlet]=\"template\" />\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Content Body -->\r\n            <div\r\n              class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n            >\r\n              <ng-content />\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</mt-card>\r\n" }]
        }], ctorParameters: () => [], propDecorators: { menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], menuTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTitle", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], menuItemsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItemsLoading", required: false }] }], activeItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItem", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], headerEnd: [{ type: i0.ContentChild, args: ['headerClientPageEnd', { isSignal: true }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }] } });

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

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