import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NavigationEnd } from '@angular/router';
import { IonIcon } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { chevronDownOutline, chevronForwardOutline } from 'ionicons/icons';
import { filter } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
addIcons({ chevronDownOutline, chevronForwardOutline });
/**
 * val-docs-sidebar
 *
 * A hierarchical navigation sidebar for documentation sites.
 * Supports collapsible sections, active route highlighting, and badges.
 *
 * @example Basic usage
 * ```html
 * <val-docs-sidebar
 *   [props]="{
 *     logo: { src: '/assets/logo.svg', alt: 'Docs', title: 'DOCS' },
 *     sections: [
 *       { title: 'Getting Started', route: ['/docs', 'getting-started'] },
 *       {
 *         title: 'Components',
 *         expanded: true,
 *         children: [
 *           { label: 'Button', route: ['/docs', 'components', 'button'] },
 *           { label: 'Card', route: ['/docs', 'components', 'card'], badge: 'New' }
 *         ]
 *       }
 *     ]
 *   }"
 *   (navigate)="onNavigate($event)"
 * ></val-docs-sidebar>
 * ```
 */
export class DocsSidebarComponent {
    constructor(router) {
        this.router = router;
        this.props = { sections: [] };
        this.navigate = new EventEmitter();
        this.expandedSections = {};
        this.currentRoute = [];
    }
    ngOnInit() {
        this.initializeExpandedSections();
        this.updateCurrentRoute();
        // Listen for route changes
        this.router.events
            .pipe(filter(event => event instanceof NavigationEnd))
            .subscribe(() => {
            this.updateCurrentRoute();
            this.autoExpandActiveSection();
        });
    }
    ngOnChanges(changes) {
        if (changes['props']) {
            this.initializeExpandedSections();
        }
    }
    initializeExpandedSections() {
        this.props.sections.forEach(section => {
            if (this.expandedSections[section.title] === undefined) {
                this.expandedSections[section.title] = section.expanded ?? false;
            }
        });
    }
    updateCurrentRoute() {
        this.currentRoute = this.router.url.split('/').filter(Boolean);
        // Use activeRoute from props if provided
        if (this.props.activeRoute) {
            this.currentRoute = this.props.activeRoute;
        }
    }
    autoExpandActiveSection() {
        this.props.sections.forEach(section => {
            if (section.children?.some(link => this.isLinkActive(link))) {
                this.expandedSections[section.title] = true;
            }
        });
    }
    onSectionClick(section) {
        if (section.route) {
            this.onNavigate(section.route);
        }
        else if (section.children?.length) {
            this.expandedSections[section.title] = !this.expandedSections[section.title];
        }
    }
    onNavigate(route) {
        this.navigate.emit(route);
        this.router.navigate(route);
    }
    isSectionActive(section) {
        if (section.route) {
            return this.routesMatch(section.route, this.currentRoute);
        }
        return section.children?.some(link => this.isLinkActive(link)) ?? false;
    }
    isLinkActive(link) {
        return this.routesMatch(link.route, this.currentRoute);
    }
    routesMatch(route, current) {
        const routePath = route.join('/').replace(/^\//, '');
        const currentPath = current.join('/');
        return currentPath === routePath || currentPath.startsWith(routePath + '/');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsSidebarComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DocsSidebarComponent, isStandalone: true, selector: "val-docs-sidebar", inputs: { props: "props" }, outputs: { navigate: "navigate" }, usesOnChanges: true, ngImport: i0, template: `
    <nav
      class="docs-sidebar"
      [class]="props.cssClass"
      [style.background]="props.backgroundColor"
      role="navigation"
      aria-label="Documentation navigation"
    >
      <!-- Logo -->
      @if (props.logo) {
        <div
          class="docs-sidebar__logo"
          [class.docs-sidebar__logo--clickable]="props.logo.route"
          (click)="props.logo.route ? onNavigate(props.logo.route) : null"
        >
          <img
            [src]="props.logo.src"
            [alt]="props.logo.alt"
            [style.height]="props.logo.height || '32px'"
          />
          @if (props.logo.title) {
            <span class="docs-sidebar__logo-title">{{ props.logo.title }}</span>
          }
        </div>
      }

      <!-- Navigation sections -->
      <div class="docs-sidebar__nav">
        @for (section of props.sections; track section.title) {
          <div class="docs-sidebar__section">
            <!-- Section header -->
            <button
              type="button"
              class="docs-sidebar__section-header"
              [class.docs-sidebar__section-header--active]="isSectionActive(section)"
              [class.docs-sidebar__section-header--expanded]="expandedSections[section.title]"
              [class.docs-sidebar__section-header--clickable]="section.route || section.children?.length"
              [attr.aria-expanded]="section.children?.length ? expandedSections[section.title] : null"
              [attr.aria-current]="section.route && isSectionActive(section) ? 'page' : null"
              (click)="onSectionClick(section)"
            >
              @if (section.icon) {
                <ion-icon [name]="section.icon" class="docs-sidebar__section-icon"></ion-icon>
              }
              <span class="docs-sidebar__section-title">{{ section.title }}</span>
              @if (section.badge) {
                <span class="docs-sidebar__badge docs-sidebar__badge--section">{{ section.badge }}</span>
              }
              @if (section.children?.length) {
                <ion-icon
                  class="docs-sidebar__chevron"
                  [name]="expandedSections[section.title] ? 'chevron-down-outline' : 'chevron-forward-outline'"
                ></ion-icon>
              }
            </button>

            <!-- Section children -->
            @if (section.children?.length && expandedSections[section.title]) {
              <div class="docs-sidebar__children">
                @for (link of section.children; track link.label) {
                  <button
                    type="button"
                    class="docs-sidebar__link"
                    [class.docs-sidebar__link--active]="isLinkActive(link)"
                    [attr.aria-current]="isLinkActive(link) ? 'page' : null"
                    (click)="onNavigate(link.route)"
                  >
                    <span class="docs-sidebar__link-label">{{ link.label }}</span>
                    @if (link.badge) {
                      <span
                        class="docs-sidebar__badge"
                        [class.docs-sidebar__badge--primary]="link.badgeColor === 'primary'"
                        [class.docs-sidebar__badge--success]="link.badgeColor === 'success'"
                        [class.docs-sidebar__badge--warning]="link.badgeColor === 'warning'"
                        [class.docs-sidebar__badge--danger]="link.badgeColor === 'danger'"
                      >{{ link.badge }}</span>
                    }
                  </button>
                }
              </div>
            }
          </div>
        }
      </div>
    </nav>
  `, isInline: true, styles: [".docs-sidebar{--sidebar-text-color: var(--ion-text-color, #1a1a1a);--sidebar-text-secondary: var(--ion-color-medium, #666);--sidebar-active-color: #1a1a1a;--sidebar-active-bg: rgba(0, 0, 0, .05);--sidebar-hover-bg: rgba(0, 0, 0, .03);--sidebar-border-color: var(--ion-border-color, #e0e0e0);font-family:var(--ion-font-family, system-ui, sans-serif)}.docs-sidebar__logo{display:flex;align-items:center;gap:.75rem;padding:1rem 0;margin-bottom:1rem;border-bottom:1px solid var(--sidebar-border-color)}.docs-sidebar__logo--clickable{cursor:pointer;transition:opacity .2s ease}.docs-sidebar__logo--clickable:hover{opacity:.8}.docs-sidebar__logo img{height:32px;width:auto}.docs-sidebar__logo-title{font-size:1.25rem;font-weight:600;color:var(--sidebar-text-color);letter-spacing:.5px}.docs-sidebar__nav{display:flex;flex-direction:column;gap:.25rem}.docs-sidebar__section{margin-bottom:.25rem}.docs-sidebar__section-header{appearance:none;background:transparent;border:none;width:100%;text-align:left;display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;border-radius:6px;font-size:.875rem;font-weight:600;color:var(--sidebar-text-color);transition:all .15s ease}.docs-sidebar__section-header:focus-visible{outline:2px solid var(--sidebar-active-color);outline-offset:2px}.docs-sidebar__section-header--clickable{cursor:pointer}.docs-sidebar__section-header--clickable:hover{background:var(--sidebar-hover-bg)}.docs-sidebar__section-header--active{color:var(--sidebar-active-color)}.docs-sidebar__section-header--expanded .docs-sidebar__chevron{transform:rotate(0)}.docs-sidebar__section-icon{font-size:1.125rem;color:var(--sidebar-text-secondary)}.docs-sidebar__section-title{flex:1}.docs-sidebar__chevron{font-size:.875rem;color:var(--sidebar-text-secondary);transition:transform .2s ease}.docs-sidebar__children{padding-left:1rem;margin-top:.25rem;border-left:1px solid var(--sidebar-border-color);margin-left:.75rem}.docs-sidebar__link{appearance:none;background:transparent;border:none;width:100%;text-align:left;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:6px;font-size:.8125rem;color:var(--sidebar-text-secondary);cursor:pointer;transition:all .15s ease}.docs-sidebar__link:focus-visible{outline:2px solid var(--sidebar-active-color);outline-offset:2px}.docs-sidebar__link:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-text-color)}.docs-sidebar__link--active{background:var(--sidebar-active-bg);color:var(--sidebar-active-color);font-weight:500}.docs-sidebar__link--active:hover{background:var(--sidebar-active-bg);color:var(--sidebar-active-color)}.docs-sidebar__link-label{flex:1}.docs-sidebar__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:10px;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:#0000000f;color:#555}.docs-sidebar__badge--section{margin-left:auto}.docs-sidebar__badge--primary,.docs-sidebar__badge--success,.docs-sidebar__badge--warning,.docs-sidebar__badge--danger{background:#0000000f;color:#555}:host-context(.dark) .docs-sidebar,:host-context([color-scheme=dark]) .docs-sidebar{--sidebar-text-color: #f4f5f8;--sidebar-text-secondary: #a0a0a0;--sidebar-hover-bg: rgba(255, 255, 255, .05);--sidebar-border-color: #3a3a3a}:host-context(.dark) .docs-sidebar__badge,:host-context([color-scheme=dark]) .docs-sidebar__badge{background:#ffffff14;color:#999}:host-context(.dark) .docs-sidebar__badge--primary,:host-context(.dark) .docs-sidebar__badge--success,:host-context(.dark) .docs-sidebar__badge--warning,:host-context(.dark) .docs-sidebar__badge--danger,:host-context([color-scheme=dark]) .docs-sidebar__badge--primary,:host-context([color-scheme=dark]) .docs-sidebar__badge--success,:host-context([color-scheme=dark]) .docs-sidebar__badge--warning,:host-context([color-scheme=dark]) .docs-sidebar__badge--danger{background:#ffffff14;color:#999}\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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsSidebarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-docs-sidebar', standalone: true, imports: [CommonModule, IonIcon], template: `
    <nav
      class="docs-sidebar"
      [class]="props.cssClass"
      [style.background]="props.backgroundColor"
      role="navigation"
      aria-label="Documentation navigation"
    >
      <!-- Logo -->
      @if (props.logo) {
        <div
          class="docs-sidebar__logo"
          [class.docs-sidebar__logo--clickable]="props.logo.route"
          (click)="props.logo.route ? onNavigate(props.logo.route) : null"
        >
          <img
            [src]="props.logo.src"
            [alt]="props.logo.alt"
            [style.height]="props.logo.height || '32px'"
          />
          @if (props.logo.title) {
            <span class="docs-sidebar__logo-title">{{ props.logo.title }}</span>
          }
        </div>
      }

      <!-- Navigation sections -->
      <div class="docs-sidebar__nav">
        @for (section of props.sections; track section.title) {
          <div class="docs-sidebar__section">
            <!-- Section header -->
            <button
              type="button"
              class="docs-sidebar__section-header"
              [class.docs-sidebar__section-header--active]="isSectionActive(section)"
              [class.docs-sidebar__section-header--expanded]="expandedSections[section.title]"
              [class.docs-sidebar__section-header--clickable]="section.route || section.children?.length"
              [attr.aria-expanded]="section.children?.length ? expandedSections[section.title] : null"
              [attr.aria-current]="section.route && isSectionActive(section) ? 'page' : null"
              (click)="onSectionClick(section)"
            >
              @if (section.icon) {
                <ion-icon [name]="section.icon" class="docs-sidebar__section-icon"></ion-icon>
              }
              <span class="docs-sidebar__section-title">{{ section.title }}</span>
              @if (section.badge) {
                <span class="docs-sidebar__badge docs-sidebar__badge--section">{{ section.badge }}</span>
              }
              @if (section.children?.length) {
                <ion-icon
                  class="docs-sidebar__chevron"
                  [name]="expandedSections[section.title] ? 'chevron-down-outline' : 'chevron-forward-outline'"
                ></ion-icon>
              }
            </button>

            <!-- Section children -->
            @if (section.children?.length && expandedSections[section.title]) {
              <div class="docs-sidebar__children">
                @for (link of section.children; track link.label) {
                  <button
                    type="button"
                    class="docs-sidebar__link"
                    [class.docs-sidebar__link--active]="isLinkActive(link)"
                    [attr.aria-current]="isLinkActive(link) ? 'page' : null"
                    (click)="onNavigate(link.route)"
                  >
                    <span class="docs-sidebar__link-label">{{ link.label }}</span>
                    @if (link.badge) {
                      <span
                        class="docs-sidebar__badge"
                        [class.docs-sidebar__badge--primary]="link.badgeColor === 'primary'"
                        [class.docs-sidebar__badge--success]="link.badgeColor === 'success'"
                        [class.docs-sidebar__badge--warning]="link.badgeColor === 'warning'"
                        [class.docs-sidebar__badge--danger]="link.badgeColor === 'danger'"
                      >{{ link.badge }}</span>
                    }
                  </button>
                }
              </div>
            }
          </div>
        }
      </div>
    </nav>
  `, styles: [".docs-sidebar{--sidebar-text-color: var(--ion-text-color, #1a1a1a);--sidebar-text-secondary: var(--ion-color-medium, #666);--sidebar-active-color: #1a1a1a;--sidebar-active-bg: rgba(0, 0, 0, .05);--sidebar-hover-bg: rgba(0, 0, 0, .03);--sidebar-border-color: var(--ion-border-color, #e0e0e0);font-family:var(--ion-font-family, system-ui, sans-serif)}.docs-sidebar__logo{display:flex;align-items:center;gap:.75rem;padding:1rem 0;margin-bottom:1rem;border-bottom:1px solid var(--sidebar-border-color)}.docs-sidebar__logo--clickable{cursor:pointer;transition:opacity .2s ease}.docs-sidebar__logo--clickable:hover{opacity:.8}.docs-sidebar__logo img{height:32px;width:auto}.docs-sidebar__logo-title{font-size:1.25rem;font-weight:600;color:var(--sidebar-text-color);letter-spacing:.5px}.docs-sidebar__nav{display:flex;flex-direction:column;gap:.25rem}.docs-sidebar__section{margin-bottom:.25rem}.docs-sidebar__section-header{appearance:none;background:transparent;border:none;width:100%;text-align:left;display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;border-radius:6px;font-size:.875rem;font-weight:600;color:var(--sidebar-text-color);transition:all .15s ease}.docs-sidebar__section-header:focus-visible{outline:2px solid var(--sidebar-active-color);outline-offset:2px}.docs-sidebar__section-header--clickable{cursor:pointer}.docs-sidebar__section-header--clickable:hover{background:var(--sidebar-hover-bg)}.docs-sidebar__section-header--active{color:var(--sidebar-active-color)}.docs-sidebar__section-header--expanded .docs-sidebar__chevron{transform:rotate(0)}.docs-sidebar__section-icon{font-size:1.125rem;color:var(--sidebar-text-secondary)}.docs-sidebar__section-title{flex:1}.docs-sidebar__chevron{font-size:.875rem;color:var(--sidebar-text-secondary);transition:transform .2s ease}.docs-sidebar__children{padding-left:1rem;margin-top:.25rem;border-left:1px solid var(--sidebar-border-color);margin-left:.75rem}.docs-sidebar__link{appearance:none;background:transparent;border:none;width:100%;text-align:left;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:6px;font-size:.8125rem;color:var(--sidebar-text-secondary);cursor:pointer;transition:all .15s ease}.docs-sidebar__link:focus-visible{outline:2px solid var(--sidebar-active-color);outline-offset:2px}.docs-sidebar__link:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-text-color)}.docs-sidebar__link--active{background:var(--sidebar-active-bg);color:var(--sidebar-active-color);font-weight:500}.docs-sidebar__link--active:hover{background:var(--sidebar-active-bg);color:var(--sidebar-active-color)}.docs-sidebar__link-label{flex:1}.docs-sidebar__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:10px;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:#0000000f;color:#555}.docs-sidebar__badge--section{margin-left:auto}.docs-sidebar__badge--primary,.docs-sidebar__badge--success,.docs-sidebar__badge--warning,.docs-sidebar__badge--danger{background:#0000000f;color:#555}:host-context(.dark) .docs-sidebar,:host-context([color-scheme=dark]) .docs-sidebar{--sidebar-text-color: #f4f5f8;--sidebar-text-secondary: #a0a0a0;--sidebar-hover-bg: rgba(255, 255, 255, .05);--sidebar-border-color: #3a3a3a}:host-context(.dark) .docs-sidebar__badge,:host-context([color-scheme=dark]) .docs-sidebar__badge{background:#ffffff14;color:#999}:host-context(.dark) .docs-sidebar__badge--primary,:host-context(.dark) .docs-sidebar__badge--success,:host-context(.dark) .docs-sidebar__badge--warning,:host-context(.dark) .docs-sidebar__badge--danger,:host-context([color-scheme=dark]) .docs-sidebar__badge--primary,:host-context([color-scheme=dark]) .docs-sidebar__badge--success,:host-context([color-scheme=dark]) .docs-sidebar__badge--warning,:host-context([color-scheme=dark]) .docs-sidebar__badge--danger{background:#ffffff14;color:#999}\n"] }]
        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { props: [{
                type: Input
            }], navigate: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 