import * as i0 from '@angular/core';
import { inject, PLATFORM_ID, NgZone, computed, input, model, booleanAttribute, contentChild, output, viewChild, linkedSignal, signal, effect, Component } from '@angular/core';
import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
import { Directionality } from '@angular/cdk/bidi';
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';
import { Tooltip } from '@masterteam/components/tooltip';
import { TranslocoService } from '@jsverse/transloco';

const DEFAULT_SIDEBAR_WIDTH = 280;
const DEFAULT_MIN_SIDEBAR_WIDTH = 220;
const DEFAULT_MAX_SIDEBAR_WIDTH = 420;
class ClientPage {
    platformId = inject(PLATFORM_ID);
    document = inject(DOCUMENT);
    dir = inject(Directionality, { optional: true });
    zone = inject(NgZone);
    transloco = inject(TranslocoService);
    mediaQueryList = null;
    resizeMoveListener = null;
    resizeUpListener = null;
    /** Whether the current direction is RTL */
    isRtl = computed(() => this.dir?.value === 'rtl', ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
    /** Icon for the left sidebar header */
    menuIcon = input(...(ngDevMode ? [undefined, { debugName: "menuIcon" }] : /* istanbul ignore next */ []));
    /** Title for the left sidebar header */
    menuTitle = input(...(ngDevMode ? [undefined, { debugName: "menuTitle" }] : /* istanbul ignore next */ []));
    /** List of menu items for the left sidebar */
    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
    /** Whether menu items are loading */
    menuItemsLoading = input(false, ...(ngDevMode ? [{ debugName: "menuItemsLoading" }] : /* istanbul ignore next */ []));
    /** Key of the active menu item (defaults to first item) */
    activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : /* istanbul ignore next */ []));
    /** Whether the sidebar menu is collapsed (two-way bindable) */
    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
    /** Enables desktop sidebar resizing from the divider */
    resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /** Unique storage seed used to persist the sidebar width */
    storageKey = input(null, ...(ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []));
    /** Storage location used for persisted sidebar width */
    storageMode = input('local', ...(ngDevMode ? [{ debugName: "storageMode" }] : /* istanbul ignore next */ []));
    /** Minimum desktop sidebar width in pixels */
    minSidebarWidth = input(DEFAULT_MIN_SIDEBAR_WIDTH, ...(ngDevMode ? [{ debugName: "minSidebarWidth" }] : /* istanbul ignore next */ []));
    /** Maximum desktop sidebar width in pixels */
    maxSidebarWidth = input(DEFAULT_MAX_SIDEBAR_WIDTH, ...(ngDevMode ? [{ debugName: "maxSidebarWidth" }] : /* istanbul ignore next */ []));
    /** Optional default desktop sidebar width in pixels */
    defaultSidebarWidth = input(null, ...(ngDevMode ? [{ debugName: "defaultSidebarWidth" }] : /* istanbul ignore next */ []));
    /** Template projected into the left sidebar header end */
    headerEnd = contentChild('headerClientPageEnd', ...(ngDevMode ? [{ debugName: "headerEnd" }] : /* istanbul ignore next */ []));
    /** Emitted when a menu item is clicked */
    menuItemClick = output();
    layoutRoot = viewChild('layoutRoot', ...(ngDevMode ? [{ debugName: "layoutRoot" }] : /* istanbul ignore next */ []));
    /** Tracks activeItem input, overridable by user clicks */
    selectedKey = linkedSignal(() => this.activeItem(), ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
    /** 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" }] : /* istanbul ignore next */ []));
    /** Whether the initial default selection has been emitted */
    initialEmitted = false;
    /** Whether the sidebar area is being hovered */
    sidebarHovered = signal(false, ...(ngDevMode ? [{ debugName: "sidebarHovered" }] : /* istanbul ignore next */ []));
    /** Whether the resize divider area is being hovered */
    dividerHovered = signal(false, ...(ngDevMode ? [{ debugName: "dividerHovered" }] : /* istanbul ignore next */ []));
    /** Whether the desktop divider is currently resizing */
    isResizing = signal(false, ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
    /** Whether the viewport is at or below the responsive breakpoint */
    isResponsive = signal(false, ...(ngDevMode ? [{ debugName: "isResponsive" }] : /* istanbul ignore next */ []));
    /** Whether the responsive top navigation is expanded */
    responsiveMenuExpanded = signal(false, ...(ngDevMode ? [{ debugName: "responsiveMenuExpanded" }] : /* istanbul ignore next */ []));
    /** Current desktop sidebar width in pixels */
    desktopSidebarWidth = signal(DEFAULT_SIDEBAR_WIDTH, ...(ngDevMode ? [{ debugName: "desktopSidebarWidth" }] : /* istanbul ignore next */ []));
    /** Whether the menu section is currently visible */
    showSidebarMenu = computed(() => this.isResponsive() ? this.responsiveMenuExpanded() : !this.collapsed(), ...(ngDevMode ? [{ debugName: "showSidebarMenu" }] : /* istanbul ignore next */ []));
    /** Sidebar width reacts to collapsed + hover */
    sidebarWidth = computed(() => {
        if (this.isResponsive()) {
            return '100%';
        }
        if (this.collapsed()) {
            return this.sidebarHovered() ? '12px' : '9px';
        }
        return `${this.desktopSidebarWidth()}px`;
    }, ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : /* istanbul ignore next */ []));
    /** Whether the current state allows divider dragging */
    canResize = computed(() => this.resizable() && !this.isResponsive() && !this.collapsed(), ...(ngDevMode ? [{ debugName: "canResize" }] : /* istanbul ignore next */ []));
    /** Icon for the collapse toggle button */
    toggleIcon = computed(() => {
        if (this.isResponsive()) {
            return this.responsiveMenuExpanded()
                ? 'arrow.chevron-up'
                : 'arrow.chevron-down';
        }
        const rtl = this.isRtl();
        if (this.collapsed()) {
            return rtl ? 'arrow.chevron-left' : 'arrow.chevron-right';
        }
        return rtl ? 'arrow.chevron-right' : 'arrow.chevron-left';
    }, ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
    /** Accessible label for the toggle button */
    toggleAriaLabel = computed(() => this.isResponsive()
        ? this.responsiveMenuExpanded()
            ? this.transloco.translate('components.clientPage.collapseMenu')
            : this.transloco.translate('components.clientPage.expandMenu')
        : this.collapsed()
            ? this.transloco.translate('components.clientPage.expandSidebar')
            : this.transloco.translate('components.clientPage.collapseSidebar'), ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
    constructor() {
        effect(() => {
            const item = this.selectedItem();
            if (item && !this.initialEmitted) {
                this.initialEmitted = true;
                this.menuItemClick.emit(item);
            }
        });
        effect(() => {
            const minWidth = this.getNormalizedMinSidebarWidth();
            const maxWidth = this.getNormalizedMaxSidebarWidth(minWidth);
            const storage = this.getStorage();
            const storageKey = this.getNormalizedStorageKey();
            const persistedState = storage && storageKey
                ? this.readPersistedState(storage, storageKey)
                : null;
            this.desktopSidebarWidth.set(this.normalizeSidebarWidth(persistedState?.sidebarWidth, this.getDefaultDesktopSidebarWidth(minWidth, maxWidth), minWidth, maxWidth));
        });
        this.setupResponsiveBehavior();
    }
    toggleCollapsed() {
        if (this.isResponsive()) {
            this.responsiveMenuExpanded.update((expanded) => !expanded);
            return;
        }
        this.collapsed.update((value) => !value);
    }
    selectItem(item) {
        this.selectedKey.set(item.key);
        if (this.isResponsive()) {
            this.responsiveMenuExpanded.set(false);
        }
        this.menuItemClick.emit(item);
    }
    startResize(event) {
        if (!this.canResize()) {
            return;
        }
        const layoutRoot = this.layoutRoot()?.nativeElement;
        if (!layoutRoot) {
            return;
        }
        event.preventDefault();
        event.stopPropagation();
        const layoutRect = layoutRoot.getBoundingClientRect();
        const minWidth = this.getNormalizedMinSidebarWidth();
        const maxWidth = this.getNormalizedMaxSidebarWidth(minWidth);
        this.isResizing.set(true);
        this.sidebarHovered.set(true);
        this.dividerHovered.set(true);
        this.desktopSidebarWidth.set(this.getWidthFromPointer(event.clientX, layoutRect, minWidth, maxWidth));
        this.zone.runOutsideAngular(() => {
            this.resizeMoveListener = (moveEvent) => {
                const nextWidth = this.getWidthFromPointer(moveEvent.clientX, layoutRect, minWidth, maxWidth);
                if (nextWidth === this.desktopSidebarWidth()) {
                    return;
                }
                this.zone.run(() => this.desktopSidebarWidth.set(nextWidth));
            };
            this.resizeUpListener = (_event) => {
                this.zone.run(() => {
                    this.isResizing.set(false);
                    this.dividerHovered.set(false);
                    this.persistSidebarWidth();
                });
                this.cleanupResizeListeners();
            };
            this.document.addEventListener('mousemove', this.resizeMoveListener);
            this.document.addEventListener('mouseup', this.resizeUpListener, {
                once: true,
            });
        });
    }
    ngOnDestroy() {
        this.cleanupResizeListeners();
        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);
    }
    cleanupResizeListeners() {
        if (this.resizeMoveListener) {
            this.document.removeEventListener('mousemove', this.resizeMoveListener);
            this.resizeMoveListener = null;
        }
        if (this.resizeUpListener) {
            this.document.removeEventListener('mouseup', this.resizeUpListener);
            this.resizeUpListener = null;
        }
    }
    syncResponsiveState(isResponsive) {
        const wasResponsive = this.isResponsive();
        this.isResponsive.set(isResponsive);
        this.sidebarHovered.set(false);
        this.dividerHovered.set(false);
        if (wasResponsive !== isResponsive) {
            this.responsiveMenuExpanded.set(false);
        }
    }
    getWidthFromPointer(clientX, layoutRect, minWidth, maxWidth) {
        const rawWidth = this.isRtl()
            ? layoutRect.right - clientX
            : clientX - layoutRect.left;
        return this.normalizeSidebarWidth(rawWidth, minWidth, minWidth, maxWidth);
    }
    persistSidebarWidth() {
        const storage = this.getStorage();
        const storageKey = this.getNormalizedStorageKey();
        if (!storage || !storageKey) {
            return;
        }
        this.writePersistedState(storage, storageKey, {
            sidebarWidth: this.desktopSidebarWidth(),
        });
    }
    getNormalizedStorageKey() {
        const storageKey = this.storageKey()?.trim();
        return storageKey ? `mt-client-page:${storageKey}` : null;
    }
    getStorage() {
        if (typeof window === 'undefined') {
            return null;
        }
        return this.storageMode() === 'session'
            ? window.sessionStorage
            : window.localStorage;
    }
    getDefaultDesktopSidebarWidth(minWidth, maxWidth) {
        const configuredWidth = this.defaultSidebarWidth();
        if (configuredWidth !== null && configuredWidth !== undefined) {
            return this.normalizeSidebarWidth(configuredWidth, DEFAULT_SIDEBAR_WIDTH, minWidth, maxWidth);
        }
        if (typeof window !== 'undefined') {
            return this.normalizeSidebarWidth(Math.round(window.innerWidth * 0.16), DEFAULT_SIDEBAR_WIDTH, minWidth, maxWidth);
        }
        return this.normalizeSidebarWidth(DEFAULT_SIDEBAR_WIDTH, DEFAULT_SIDEBAR_WIDTH, minWidth, maxWidth);
    }
    getNormalizedMinSidebarWidth() {
        const minWidth = Number(this.minSidebarWidth());
        return Number.isFinite(minWidth) && minWidth > 0
            ? Math.trunc(minWidth)
            : DEFAULT_MIN_SIDEBAR_WIDTH;
    }
    getNormalizedMaxSidebarWidth(minWidth) {
        const maxWidth = Number(this.maxSidebarWidth());
        if (!Number.isFinite(maxWidth) || maxWidth < minWidth) {
            return Math.max(DEFAULT_MAX_SIDEBAR_WIDTH, minWidth);
        }
        return Math.trunc(maxWidth);
    }
    normalizeSidebarWidth(value, fallback, minWidth, maxWidth) {
        const normalized = Number(value);
        if (!Number.isFinite(normalized)) {
            return this.clampSidebarWidth(fallback, minWidth, maxWidth);
        }
        return this.clampSidebarWidth(normalized, minWidth, maxWidth);
    }
    clampSidebarWidth(value, minWidth, maxWidth) {
        return Math.min(maxWidth, Math.max(minWidth, Math.round(value)));
    }
    readPersistedState(storage, storageKey) {
        try {
            const raw = storage.getItem(storageKey);
            if (!raw) {
                return null;
            }
            const parsed = JSON.parse(raw);
            return parsed && typeof parsed === 'object' ? parsed : null;
        }
        catch {
            return null;
        }
    }
    writePersistedState(storage, storageKey, state) {
        try {
            storage.setItem(storageKey, JSON.stringify(state));
        }
        catch {
            // Ignore storage write failures.
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, storageMode: { classPropertyName: "storageMode", publicName: "storageMode", isSignal: true, isRequired: false, transformFunction: null }, minSidebarWidth: { classPropertyName: "minSidebarWidth", publicName: "minSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, maxSidebarWidth: { classPropertyName: "maxSidebarWidth", publicName: "maxSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, defaultSidebarWidth: { classPropertyName: "defaultSidebarWidth", publicName: "defaultSidebarWidth", 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 }], viewQueries: [{ propertyName: "layoutRoot", first: true, predicate: ["layoutRoot"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-card class=\"h-full w-full rounded-b-none rounded-e-none\">\r\n  <ng-template #headless>\r\n    <div\r\n      #layoutRoot\r\n      class=\"flex h-full min-h-0 [border-end-end-radius:0] [border-end-start-radius:0] [border-start-end-radius:0] [border-start-start-radius:0.5rem]\"\r\n      [style.background-color]=\"'var(--mt-cp-sidebar-bg, #EBEBF0)'\"\r\n      [class.flex-col]=\"isResponsive()\"\r\n    >\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 [border-end-end-radius:0] [border-end-start-radius:0] [border-start-end-radius:0] [border-start-start-radius:0.5rem]\"\r\n        [class.transition-none]=\"isResizing()\"\r\n        [style.width]=\"sidebarWidth()\"\r\n        (mouseenter)=\"sidebarHovered.set(true)\"\r\n        (mouseleave)=\"sidebarHovered.set(false)\"\r\n      >\r\n        <!-- Sidebar Header -->\r\n        <div\r\n          class=\"flex shrink-0 items-center justify-between overflow-hidden border-b border-surface-300 px-5 py-[18px]\"\r\n          [class.whitespace-nowrap]=\"!isResponsive()\"\r\n        >\r\n          <div class=\"flex min-w-0 items-center gap-[9px]\">\r\n            @if (menuIcon()) {\r\n              <div class=\"shrink-0 text-xl flex items-center\">\r\n                <mt-icon [icon]=\"menuIcon()!\" />\r\n              </div>\r\n            }\r\n            @if (menuTitle()) {\r\n              <div\r\n                class=\"min-w-0 truncate text-sm font-medium leading-5\"\r\n                [style.color]=\"'var(--mt-cp-sidebar-text)'\"\r\n              >\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              [mtTooltip]=\"toggleAriaLabel()\"\r\n              tooltipPosition=\"bottom\"\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 flex w-0 shrink-0 items-stretch\"\r\n          (mouseenter)=\"dividerHovered.set(true)\"\r\n          (mouseleave)=\"dividerHovered.set(false)\"\r\n        >\r\n          <div\r\n            class=\"pointer-events-none absolute inset-y-0 left-1/2 w-[2px] -translate-x-1/2 rounded-full transition-[opacity,background-color,box-shadow] duration-200 ease-in-out\"\r\n            [class.opacity-0]=\"!dividerHovered() && !isResizing()\"\r\n            [class.opacity-100]=\"dividerHovered() || isResizing()\"\r\n            [style.backgroundColor]=\"\r\n              isResizing()\r\n                ? 'var(--p-primary-500)'\r\n                : dividerHovered()\r\n                  ? 'var(--p-primary-300)'\r\n                  : 'var(--p-surface-300)'\r\n            \"\r\n            [style.boxShadow]=\"\r\n              isResizing() ? '0 0 0 2px var(--p-primary-100)' : 'none'\r\n            \"\r\n          ></div>\r\n\r\n          @if (resizable()) {\r\n            <div\r\n              class=\"absolute inset-y-0 left-1/2 z-0 w-5 -translate-x-1/2\"\r\n              [class.cursor-col-resize]=\"canResize()\"\r\n              [class.cursor-default]=\"!canResize()\"\r\n              (mousedown)=\"startResize($event)\"\r\n            ></div>\r\n          }\r\n\r\n          <!-- Toggle Button at bottom of divider (visible on sidebar hover or when collapsed) -->\r\n          <button\r\n            type=\"button\"\r\n            (click)=\"toggleCollapsed()\"\r\n            class=\"absolute bottom-6 left-1/2 z-10 grid h-7 w-7 -translate-x-1/2 cursor-pointer place-items-center rounded-full border border-gray-300 bg-white p-0 transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 active:scale-95 active:bg-gray-100 group\"\r\n            [class.opacity-0]=\"\r\n              !sidebarHovered() &&\r\n              !dividerHovered() &&\r\n              !collapsed() &&\r\n              !isResizing()\r\n            \"\r\n            [class.pointer-events-none]=\"\r\n              !sidebarHovered() &&\r\n              !dividerHovered() &&\r\n              !collapsed() &&\r\n              !isResizing()\r\n            \"\r\n            [class.opacity-100]=\"\r\n              sidebarHovered() ||\r\n              dividerHovered() ||\r\n              collapsed() ||\r\n              isResizing()\r\n            \"\r\n            [attr.aria-label]=\"toggleAriaLabel()\"\r\n            [mtTooltip]=\"toggleAriaLabel()\"\r\n            tooltipPosition=\"right\"\r\n          >\r\n            <mt-icon\r\n              [icon]=\"toggleIcon()\"\r\n              class=\"block text-gray-500 transition-all duration-200 group-hover:animate-pulse group-hover:text-primary-600\"\r\n              [style.--mt-icon-prev-width]=\"'0.875rem'\"\r\n              [style.--mt-icon-prev-height]=\"'0.875rem'\"\r\n            />\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- Right Content Panel -->\r\n      <div\r\n        class=\"relative flex min-h-0 min-w-0 flex-1 flex-col\"\r\n        [class.ltr:[box-shadow:inset_8px_0_10px_-8px_rgba(0,0,0,0.12)]]=\"\r\n          !isResponsive() && !collapsed()\r\n        \"\r\n        [class.rtl:[box-shadow:inset_-8px_0_10px_-8px_rgba(0,0,0,0.12)]]=\"\r\n          !isResponsive() && !collapsed()\r\n        \"\r\n      >\r\n        <mt-card class=\"h-full min-h-0 rounded-b-none rounded-e-none shadow-lg\">\r\n          <ng-template #headless>\r\n            <!-- Content Header -->\r\n            <div\r\n              class=\"flex shrink-0 items-center rounded-s-lg justify-between border-b border-surface px-7 py-4 [box-shadow:0_2px_3px_-1px_rgba(0,0,0,0.07)]\"\r\n              [class.flex-col]=\"isResponsive()\"\r\n              [class.items-start]=\"isResponsive()\"\r\n              [class.gap-3]=\"isResponsive()\"\r\n              [style.background-color]=\"'var(--mt-cp-header-bg)'\"\r\n              [style.color]=\"'var(--mt-cp-header-text)'\"\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\r\n                      class=\"truncate text-sm font-medium leading-5\"\r\n                      [style.color]=\"'var(--mt-cp-header-text)'\"\r\n                    >\r\n                      {{ selected.title }}\r\n                    </div>\r\n                    @if (selected.subtitle) {\r\n                      <div\r\n                        class=\"truncate text-xs font-light text-gray-500\"\r\n                        [style.color]=\"'var(--mt-cp-header-text)'\"\r\n                      >\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 py-5 px-7\"\r\n              [style.background-color]=\"'var(--mt-cp-content-bg)'\"\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"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientPage, decorators: [{
            type: Component,
            args: [{ selector: 'mt-client-page', standalone: true, imports: [Avatar, Card, ClientPageMenu, Icon, NgTemplateOutlet, Tooltip], host: {
                        class: 'block h-full',
                    }, template: "<mt-card class=\"h-full w-full rounded-b-none rounded-e-none\">\r\n  <ng-template #headless>\r\n    <div\r\n      #layoutRoot\r\n      class=\"flex h-full min-h-0 [border-end-end-radius:0] [border-end-start-radius:0] [border-start-end-radius:0] [border-start-start-radius:0.5rem]\"\r\n      [style.background-color]=\"'var(--mt-cp-sidebar-bg, #EBEBF0)'\"\r\n      [class.flex-col]=\"isResponsive()\"\r\n    >\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 [border-end-end-radius:0] [border-end-start-radius:0] [border-start-end-radius:0] [border-start-start-radius:0.5rem]\"\r\n        [class.transition-none]=\"isResizing()\"\r\n        [style.width]=\"sidebarWidth()\"\r\n        (mouseenter)=\"sidebarHovered.set(true)\"\r\n        (mouseleave)=\"sidebarHovered.set(false)\"\r\n      >\r\n        <!-- Sidebar Header -->\r\n        <div\r\n          class=\"flex shrink-0 items-center justify-between overflow-hidden border-b border-surface-300 px-5 py-[18px]\"\r\n          [class.whitespace-nowrap]=\"!isResponsive()\"\r\n        >\r\n          <div class=\"flex min-w-0 items-center gap-[9px]\">\r\n            @if (menuIcon()) {\r\n              <div class=\"shrink-0 text-xl flex items-center\">\r\n                <mt-icon [icon]=\"menuIcon()!\" />\r\n              </div>\r\n            }\r\n            @if (menuTitle()) {\r\n              <div\r\n                class=\"min-w-0 truncate text-sm font-medium leading-5\"\r\n                [style.color]=\"'var(--mt-cp-sidebar-text)'\"\r\n              >\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              [mtTooltip]=\"toggleAriaLabel()\"\r\n              tooltipPosition=\"bottom\"\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 flex w-0 shrink-0 items-stretch\"\r\n          (mouseenter)=\"dividerHovered.set(true)\"\r\n          (mouseleave)=\"dividerHovered.set(false)\"\r\n        >\r\n          <div\r\n            class=\"pointer-events-none absolute inset-y-0 left-1/2 w-[2px] -translate-x-1/2 rounded-full transition-[opacity,background-color,box-shadow] duration-200 ease-in-out\"\r\n            [class.opacity-0]=\"!dividerHovered() && !isResizing()\"\r\n            [class.opacity-100]=\"dividerHovered() || isResizing()\"\r\n            [style.backgroundColor]=\"\r\n              isResizing()\r\n                ? 'var(--p-primary-500)'\r\n                : dividerHovered()\r\n                  ? 'var(--p-primary-300)'\r\n                  : 'var(--p-surface-300)'\r\n            \"\r\n            [style.boxShadow]=\"\r\n              isResizing() ? '0 0 0 2px var(--p-primary-100)' : 'none'\r\n            \"\r\n          ></div>\r\n\r\n          @if (resizable()) {\r\n            <div\r\n              class=\"absolute inset-y-0 left-1/2 z-0 w-5 -translate-x-1/2\"\r\n              [class.cursor-col-resize]=\"canResize()\"\r\n              [class.cursor-default]=\"!canResize()\"\r\n              (mousedown)=\"startResize($event)\"\r\n            ></div>\r\n          }\r\n\r\n          <!-- Toggle Button at bottom of divider (visible on sidebar hover or when collapsed) -->\r\n          <button\r\n            type=\"button\"\r\n            (click)=\"toggleCollapsed()\"\r\n            class=\"absolute bottom-6 left-1/2 z-10 grid h-7 w-7 -translate-x-1/2 cursor-pointer place-items-center rounded-full border border-gray-300 bg-white p-0 transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 active:scale-95 active:bg-gray-100 group\"\r\n            [class.opacity-0]=\"\r\n              !sidebarHovered() &&\r\n              !dividerHovered() &&\r\n              !collapsed() &&\r\n              !isResizing()\r\n            \"\r\n            [class.pointer-events-none]=\"\r\n              !sidebarHovered() &&\r\n              !dividerHovered() &&\r\n              !collapsed() &&\r\n              !isResizing()\r\n            \"\r\n            [class.opacity-100]=\"\r\n              sidebarHovered() ||\r\n              dividerHovered() ||\r\n              collapsed() ||\r\n              isResizing()\r\n            \"\r\n            [attr.aria-label]=\"toggleAriaLabel()\"\r\n            [mtTooltip]=\"toggleAriaLabel()\"\r\n            tooltipPosition=\"right\"\r\n          >\r\n            <mt-icon\r\n              [icon]=\"toggleIcon()\"\r\n              class=\"block text-gray-500 transition-all duration-200 group-hover:animate-pulse group-hover:text-primary-600\"\r\n              [style.--mt-icon-prev-width]=\"'0.875rem'\"\r\n              [style.--mt-icon-prev-height]=\"'0.875rem'\"\r\n            />\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- Right Content Panel -->\r\n      <div\r\n        class=\"relative flex min-h-0 min-w-0 flex-1 flex-col\"\r\n        [class.ltr:[box-shadow:inset_8px_0_10px_-8px_rgba(0,0,0,0.12)]]=\"\r\n          !isResponsive() && !collapsed()\r\n        \"\r\n        [class.rtl:[box-shadow:inset_-8px_0_10px_-8px_rgba(0,0,0,0.12)]]=\"\r\n          !isResponsive() && !collapsed()\r\n        \"\r\n      >\r\n        <mt-card class=\"h-full min-h-0 rounded-b-none rounded-e-none shadow-lg\">\r\n          <ng-template #headless>\r\n            <!-- Content Header -->\r\n            <div\r\n              class=\"flex shrink-0 items-center rounded-s-lg justify-between border-b border-surface px-7 py-4 [box-shadow:0_2px_3px_-1px_rgba(0,0,0,0.07)]\"\r\n              [class.flex-col]=\"isResponsive()\"\r\n              [class.items-start]=\"isResponsive()\"\r\n              [class.gap-3]=\"isResponsive()\"\r\n              [style.background-color]=\"'var(--mt-cp-header-bg)'\"\r\n              [style.color]=\"'var(--mt-cp-header-text)'\"\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\r\n                      class=\"truncate text-sm font-medium leading-5\"\r\n                      [style.color]=\"'var(--mt-cp-header-text)'\"\r\n                    >\r\n                      {{ selected.title }}\r\n                    </div>\r\n                    @if (selected.subtitle) {\r\n                      <div\r\n                        class=\"truncate text-xs font-light text-gray-500\"\r\n                        [style.color]=\"'var(--mt-cp-header-text)'\"\r\n                      >\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 py-5 px-7\"\r\n              [style.background-color]=\"'var(--mt-cp-content-bg)'\"\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"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], storageMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageMode", required: false }] }], minSidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSidebarWidth", required: false }] }], maxSidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSidebarWidth", required: false }] }], defaultSidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSidebarWidth", required: false }] }], headerEnd: [{ type: i0.ContentChild, args: ['headerClientPageEnd', { isSignal: true }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], layoutRoot: [{ type: i0.ViewChild, args: ['layoutRoot', { isSignal: true }] }] } });

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

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