import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter, HostListener, signal, computed, } from '@angular/core';
import { IonIcon, IonButton } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { menuOutline, closeOutline } from 'ionicons/icons';
import * as i0 from "@angular/core";
addIcons({ menuOutline, closeOutline });
/**
 * val-docs-layout
 *
 * A responsive 3-column layout template for documentation sites.
 * Provides slots for sidebar navigation, main content, and table of contents.
 *
 * @example Basic usage
 * ```html
 * <val-docs-layout [props]="{ showToc: true }">
 *   <ng-container sidebar>
 *     <val-docs-sidebar [props]="sidebarConfig"></val-docs-sidebar>
 *   </ng-container>
 *
 *   <ng-container content>
 *     <val-article [props]="articleConfig"></val-article>
 *   </ng-container>
 *
 *   <ng-container toc>
 *     <val-docs-toc [props]="tocConfig"></val-docs-toc>
 *   </ng-container>
 * </val-docs-layout>
 * ```
 */
export class DocsLayoutComponent {
    constructor() {
        this.props = {};
        this.sidebarToggle = new EventEmitter();
        // Responsive breakpoints
        this.MOBILE_BREAKPOINT = 768;
        this.TABLET_BREAKPOINT = 1024;
        // Signals for reactive state
        this.windowWidth = signal(typeof window !== 'undefined' ? window.innerWidth : 1200);
        this.sidebarOpen = signal(false);
        this.isMobile = computed(() => this.windowWidth() < this.MOBILE_BREAKPOINT);
        this.isTablet = computed(() => this.windowWidth() >= this.MOBILE_BREAKPOINT && this.windowWidth() < this.TABLET_BREAKPOINT);
    }
    onResize() {
        this.windowWidth.set(window.innerWidth);
        // Auto-close sidebar when resizing to desktop
        if (!this.isMobile() && !this.isTablet()) {
            this.sidebarOpen.set(false);
        }
    }
    onEscapeKey() {
        if (this.sidebarOpen()) {
            this.closeSidebar();
        }
    }
    toggleSidebar() {
        this.sidebarOpen.update(open => !open);
        this.sidebarToggle.emit(this.sidebarOpen());
    }
    closeSidebar() {
        this.sidebarOpen.set(false);
        this.sidebarToggle.emit(false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DocsLayoutComponent, isStandalone: true, selector: "val-docs-layout", inputs: { props: "props" }, outputs: { sidebarToggle: "sidebarToggle" }, host: { listeners: { "window:resize": "onResize()", "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: `
    <div
      class="docs-layout"
      [class]="props.cssClass"
      [class.docs-layout--sidebar-open]="sidebarOpen()"
      [class.docs-layout--mobile]="isMobile()"
      [class.docs-layout--tablet]="isTablet()"
      [style.--sidebar-width]="props.sidebarWidth || '260px'"
      [style.--toc-width]="props.tocWidth || '220px'"
      [style.--content-max-width]="props.contentMaxWidth || '900px'"
    >
      <!-- Mobile header with menu toggle -->
      @if (isMobile() || isTablet()) {
        <header class="docs-layout__mobile-header">
          <ion-button
            fill="clear"
            class="docs-layout__menu-toggle"
            (click)="toggleSidebar()"
            [attr.aria-label]="sidebarOpen() ? 'Close menu' : 'Open menu'"
            [attr.aria-expanded]="sidebarOpen()"
            aria-controls="docs-sidebar"
          >
            <ion-icon
              slot="icon-only"
              [name]="sidebarOpen() ? 'close-outline' : 'menu-outline'"
            ></ion-icon>
          </ion-button>
          <ng-content select="[mobile-header]"></ng-content>
        </header>
      }

      <!-- Backdrop for mobile sidebar -->
      @if ((isMobile() || isTablet()) && sidebarOpen()) {
        <div
          class="docs-layout__backdrop"
          role="presentation"
          aria-hidden="true"
          (click)="closeSidebar()"
        ></div>
      }

      <!-- Sidebar -->
      @if (props.showSidebar !== false) {
        <aside
          id="docs-sidebar"
          class="docs-layout__sidebar"
          [class.docs-layout__sidebar--open]="sidebarOpen() || (!isMobile() && !isTablet())"
        >
          <div class="docs-layout__sidebar-content">
            <ng-content select="[sidebar]"></ng-content>
          </div>
        </aside>
      }

      <!-- Main content area -->
      <main class="docs-layout__main">
        <div class="docs-layout__content">
          <ng-content select="[content]"></ng-content>
        </div>
      </main>

      <!-- Table of contents -->
      @if (props.showToc !== false && !isMobile()) {
        <aside class="docs-layout__toc">
          <div class="docs-layout__toc-content">
            <ng-content select="[toc]"></ng-content>
          </div>
        </aside>
      }
    </div>
  `, isInline: true, styles: [".docs-layout{--sidebar-width: 260px;--toc-width: 220px;--content-max-width: 900px;--header-height: 56px;--spacing-md: 1.5rem;--spacing-lg: 2rem;display:grid;grid-template-columns:var(--sidebar-width) 1fr var(--toc-width);min-height:100vh;background:var(--ion-background-color, #fff)}.docs-layout__mobile-header{display:none;position:sticky;top:0;z-index:100;height:var(--header-height);padding:0 var(--spacing-md);background:var(--ion-background-color, #fff);border-bottom:1px solid var(--ion-border-color, #e0e0e0);align-items:center;gap:.5rem}.docs-layout__menu-toggle{--padding-start: 0;--padding-end: 0}.docs-layout__backdrop{position:fixed;inset:0;background:#00000080;z-index:199;opacity:0;animation:fadeIn .2s ease forwards}@keyframes fadeIn{to{opacity:1}}.docs-layout__sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--ion-border-color, #e0e0e0);background:var(--ion-background-color, #fff);z-index:200}.docs-layout__sidebar::-webkit-scrollbar{width:6px}.docs-layout__sidebar::-webkit-scrollbar-track{background:transparent}.docs-layout__sidebar::-webkit-scrollbar-thumb{background:var(--ion-color-medium, #92949c);border-radius:3px}.docs-layout__sidebar-content{padding:var(--spacing-md)}.docs-layout__main{min-width:0;padding:var(--spacing-lg)}.docs-layout__content{max-width:var(--content-max-width);margin:0 auto}.docs-layout__toc{position:sticky;top:0;height:100vh;overflow-y:auto;padding:var(--spacing-lg) var(--spacing-md);border-left:1px solid var(--ion-border-color, #e0e0e0);background:var(--ion-background-color, #fff)}.docs-layout__toc::-webkit-scrollbar{width:4px}.docs-layout__toc::-webkit-scrollbar-track{background:transparent}.docs-layout__toc::-webkit-scrollbar-thumb{background:var(--ion-color-medium, #92949c);border-radius:2px}.docs-layout__toc-content{position:sticky;top:var(--spacing-lg)}.docs-layout--tablet{grid-template-columns:1fr}.docs-layout--tablet .docs-layout__mobile-header{display:flex}.docs-layout--tablet .docs-layout__sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);transform:translate(-100%);transition:transform .3s ease;box-shadow:none}.docs-layout--tablet .docs-layout__sidebar--open{transform:translate(0);box-shadow:4px 0 20px #00000026}.docs-layout--tablet .docs-layout__main{padding-top:calc(var(--header-height) + var(--spacing-md))}.docs-layout--tablet .docs-layout__toc{display:none}.docs-layout--mobile{grid-template-columns:1fr}.docs-layout--mobile .docs-layout__mobile-header{display:flex}.docs-layout--mobile .docs-layout__sidebar{position:fixed;top:0;left:0;width:min(var(--sidebar-width),85vw);transform:translate(-100%);transition:transform .3s ease;box-shadow:none}.docs-layout--mobile .docs-layout__sidebar--open{transform:translate(0);box-shadow:4px 0 20px #00000026}.docs-layout--mobile .docs-layout__main{padding:var(--spacing-md);padding-top:calc(var(--header-height) + var(--spacing-md))}.docs-layout--mobile .docs-layout__toc{display:none}:host-context(.dark) .docs-layout__backdrop,:host-context([color-scheme=dark]) .docs-layout__backdrop{background:#000000b3}:host-context(.dark) .docs-layout__sidebar,:host-context(.dark) .docs-layout__toc,:host-context([color-scheme=dark]) .docs-layout__sidebar,:host-context([color-scheme=dark]) .docs-layout__toc{border-color:var(--ion-border-color, #3a3a3a)}:host-context(.dark) .docs-layout__mobile-header,:host-context([color-scheme=dark]) .docs-layout__mobile-header{border-color:var(--ion-border-color, #3a3a3a)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-docs-layout', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
    <div
      class="docs-layout"
      [class]="props.cssClass"
      [class.docs-layout--sidebar-open]="sidebarOpen()"
      [class.docs-layout--mobile]="isMobile()"
      [class.docs-layout--tablet]="isTablet()"
      [style.--sidebar-width]="props.sidebarWidth || '260px'"
      [style.--toc-width]="props.tocWidth || '220px'"
      [style.--content-max-width]="props.contentMaxWidth || '900px'"
    >
      <!-- Mobile header with menu toggle -->
      @if (isMobile() || isTablet()) {
        <header class="docs-layout__mobile-header">
          <ion-button
            fill="clear"
            class="docs-layout__menu-toggle"
            (click)="toggleSidebar()"
            [attr.aria-label]="sidebarOpen() ? 'Close menu' : 'Open menu'"
            [attr.aria-expanded]="sidebarOpen()"
            aria-controls="docs-sidebar"
          >
            <ion-icon
              slot="icon-only"
              [name]="sidebarOpen() ? 'close-outline' : 'menu-outline'"
            ></ion-icon>
          </ion-button>
          <ng-content select="[mobile-header]"></ng-content>
        </header>
      }

      <!-- Backdrop for mobile sidebar -->
      @if ((isMobile() || isTablet()) && sidebarOpen()) {
        <div
          class="docs-layout__backdrop"
          role="presentation"
          aria-hidden="true"
          (click)="closeSidebar()"
        ></div>
      }

      <!-- Sidebar -->
      @if (props.showSidebar !== false) {
        <aside
          id="docs-sidebar"
          class="docs-layout__sidebar"
          [class.docs-layout__sidebar--open]="sidebarOpen() || (!isMobile() && !isTablet())"
        >
          <div class="docs-layout__sidebar-content">
            <ng-content select="[sidebar]"></ng-content>
          </div>
        </aside>
      }

      <!-- Main content area -->
      <main class="docs-layout__main">
        <div class="docs-layout__content">
          <ng-content select="[content]"></ng-content>
        </div>
      </main>

      <!-- Table of contents -->
      @if (props.showToc !== false && !isMobile()) {
        <aside class="docs-layout__toc">
          <div class="docs-layout__toc-content">
            <ng-content select="[toc]"></ng-content>
          </div>
        </aside>
      }
    </div>
  `, styles: [".docs-layout{--sidebar-width: 260px;--toc-width: 220px;--content-max-width: 900px;--header-height: 56px;--spacing-md: 1.5rem;--spacing-lg: 2rem;display:grid;grid-template-columns:var(--sidebar-width) 1fr var(--toc-width);min-height:100vh;background:var(--ion-background-color, #fff)}.docs-layout__mobile-header{display:none;position:sticky;top:0;z-index:100;height:var(--header-height);padding:0 var(--spacing-md);background:var(--ion-background-color, #fff);border-bottom:1px solid var(--ion-border-color, #e0e0e0);align-items:center;gap:.5rem}.docs-layout__menu-toggle{--padding-start: 0;--padding-end: 0}.docs-layout__backdrop{position:fixed;inset:0;background:#00000080;z-index:199;opacity:0;animation:fadeIn .2s ease forwards}@keyframes fadeIn{to{opacity:1}}.docs-layout__sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--ion-border-color, #e0e0e0);background:var(--ion-background-color, #fff);z-index:200}.docs-layout__sidebar::-webkit-scrollbar{width:6px}.docs-layout__sidebar::-webkit-scrollbar-track{background:transparent}.docs-layout__sidebar::-webkit-scrollbar-thumb{background:var(--ion-color-medium, #92949c);border-radius:3px}.docs-layout__sidebar-content{padding:var(--spacing-md)}.docs-layout__main{min-width:0;padding:var(--spacing-lg)}.docs-layout__content{max-width:var(--content-max-width);margin:0 auto}.docs-layout__toc{position:sticky;top:0;height:100vh;overflow-y:auto;padding:var(--spacing-lg) var(--spacing-md);border-left:1px solid var(--ion-border-color, #e0e0e0);background:var(--ion-background-color, #fff)}.docs-layout__toc::-webkit-scrollbar{width:4px}.docs-layout__toc::-webkit-scrollbar-track{background:transparent}.docs-layout__toc::-webkit-scrollbar-thumb{background:var(--ion-color-medium, #92949c);border-radius:2px}.docs-layout__toc-content{position:sticky;top:var(--spacing-lg)}.docs-layout--tablet{grid-template-columns:1fr}.docs-layout--tablet .docs-layout__mobile-header{display:flex}.docs-layout--tablet .docs-layout__sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);transform:translate(-100%);transition:transform .3s ease;box-shadow:none}.docs-layout--tablet .docs-layout__sidebar--open{transform:translate(0);box-shadow:4px 0 20px #00000026}.docs-layout--tablet .docs-layout__main{padding-top:calc(var(--header-height) + var(--spacing-md))}.docs-layout--tablet .docs-layout__toc{display:none}.docs-layout--mobile{grid-template-columns:1fr}.docs-layout--mobile .docs-layout__mobile-header{display:flex}.docs-layout--mobile .docs-layout__sidebar{position:fixed;top:0;left:0;width:min(var(--sidebar-width),85vw);transform:translate(-100%);transition:transform .3s ease;box-shadow:none}.docs-layout--mobile .docs-layout__sidebar--open{transform:translate(0);box-shadow:4px 0 20px #00000026}.docs-layout--mobile .docs-layout__main{padding:var(--spacing-md);padding-top:calc(var(--header-height) + var(--spacing-md))}.docs-layout--mobile .docs-layout__toc{display:none}:host-context(.dark) .docs-layout__backdrop,:host-context([color-scheme=dark]) .docs-layout__backdrop{background:#000000b3}:host-context(.dark) .docs-layout__sidebar,:host-context(.dark) .docs-layout__toc,:host-context([color-scheme=dark]) .docs-layout__sidebar,:host-context([color-scheme=dark]) .docs-layout__toc{border-color:var(--ion-border-color, #3a3a3a)}:host-context(.dark) .docs-layout__mobile-header,:host-context([color-scheme=dark]) .docs-layout__mobile-header{border-color:var(--ion-border-color, #3a3a3a)}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], sidebarToggle: [{
                type: Output
            }], onResize: [{
                type: HostListener,
                args: ['window:resize']
            }], onEscapeKey: [{
                type: HostListener,
                args: ['document:keydown.escape']
            }] } });
//# sourceMappingURL=data:application/json;base64, 