import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
/**
 * val-docs-breadcrumb
 *
 * A breadcrumb navigation component for documentation.
 *
 * @example
 * ```html
 * <val-docs-breadcrumb
 *   [props]="{
 *     showHome: true,
 *     items: [
 *       { label: 'Components', route: ['/docs', 'components'] },
 *       { label: 'Button' }
 *     ]
 *   }"
 * ></val-docs-breadcrumb>
 * ```
 */
export class DocsBreadcrumbComponent {
    constructor(router) {
        this.router = router;
        this.props = { items: [] };
        this.navigate = new EventEmitter();
    }
    onNavigate(route) {
        this.navigate.emit(route);
        this.router.navigate(route);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsBreadcrumbComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DocsBreadcrumbComponent, isStandalone: true, selector: "val-docs-breadcrumb", inputs: { props: "props" }, outputs: { navigate: "navigate" }, ngImport: i0, template: `
    <nav
      class="docs-breadcrumb"
      [class]="props.cssClass"
      aria-label="Breadcrumb"
    >
      <ol class="docs-breadcrumb__list">
        @if (props.showHome) {
          <li class="docs-breadcrumb__item">
            <button
              type="button"
              class="docs-breadcrumb__link"
              (click)="onNavigate(props.homeRoute || ['/'])"
            >
              {{ props.homeLabel || 'Home' }}
            </button>
            <span class="docs-breadcrumb__separator" aria-hidden="true">
              {{ props.separator || '>' }}
            </span>
          </li>
        }

        @for (item of props.items; track item.label; let last = $last) {
          <li class="docs-breadcrumb__item">
            @if (item.route && !last) {
              <button
                type="button"
                class="docs-breadcrumb__link"
                (click)="onNavigate(item.route)"
              >
                {{ item.label }}
              </button>
            } @else {
              <span
                class="docs-breadcrumb__current"
                aria-current="page"
              >
                {{ item.label }}
              </span>
            }

            @if (!last) {
              <span class="docs-breadcrumb__separator" aria-hidden="true">
                {{ props.separator || '>' }}
              </span>
            }
          </li>
        }
      </ol>
    </nav>
  `, isInline: true, styles: [":host{display:block;font-family:var(--ion-font-family, system-ui, sans-serif)}:host .docs-breadcrumb__list{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none!important;list-style-type:none!important;margin:0!important;padding:0!important}:host .docs-breadcrumb__item{display:flex!important;flex-direction:row!important;align-items:center;gap:.5rem;margin:0!important;padding:0!important}:host .docs-breadcrumb__link{display:inline;padding:0;border:none;background:transparent;font-size:.875rem;color:var(--ion-color-medium, #666);text-decoration:none;cursor:pointer;transition:color .15s ease}:host .docs-breadcrumb__link:hover{color:var(--ion-text-color, #1a1a1a)}:host .docs-breadcrumb__link:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}:host .docs-breadcrumb__separator{color:var(--ion-color-medium, #666);font-size:.875rem}:host .docs-breadcrumb__current{font-size:.875rem;font-weight:600;color:var(--ion-text-color, #1a1a1a)}:host-context(.dark) .docs-breadcrumb__link:hover,:host-context([color-scheme=\"dark\"]) .docs-breadcrumb__link:hover{color:#f4f5f8}:host-context(.dark) .docs-breadcrumb__current,:host-context([color-scheme=\"dark\"]) .docs-breadcrumb__current{color:#f4f5f8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsBreadcrumbComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-docs-breadcrumb', standalone: true, imports: [CommonModule], template: `
    <nav
      class="docs-breadcrumb"
      [class]="props.cssClass"
      aria-label="Breadcrumb"
    >
      <ol class="docs-breadcrumb__list">
        @if (props.showHome) {
          <li class="docs-breadcrumb__item">
            <button
              type="button"
              class="docs-breadcrumb__link"
              (click)="onNavigate(props.homeRoute || ['/'])"
            >
              {{ props.homeLabel || 'Home' }}
            </button>
            <span class="docs-breadcrumb__separator" aria-hidden="true">
              {{ props.separator || '>' }}
            </span>
          </li>
        }

        @for (item of props.items; track item.label; let last = $last) {
          <li class="docs-breadcrumb__item">
            @if (item.route && !last) {
              <button
                type="button"
                class="docs-breadcrumb__link"
                (click)="onNavigate(item.route)"
              >
                {{ item.label }}
              </button>
            } @else {
              <span
                class="docs-breadcrumb__current"
                aria-current="page"
              >
                {{ item.label }}
              </span>
            }

            @if (!last) {
              <span class="docs-breadcrumb__separator" aria-hidden="true">
                {{ props.separator || '>' }}
              </span>
            }
          </li>
        }
      </ol>
    </nav>
  `, styles: [":host{display:block;font-family:var(--ion-font-family, system-ui, sans-serif)}:host .docs-breadcrumb__list{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none!important;list-style-type:none!important;margin:0!important;padding:0!important}:host .docs-breadcrumb__item{display:flex!important;flex-direction:row!important;align-items:center;gap:.5rem;margin:0!important;padding:0!important}:host .docs-breadcrumb__link{display:inline;padding:0;border:none;background:transparent;font-size:.875rem;color:var(--ion-color-medium, #666);text-decoration:none;cursor:pointer;transition:color .15s ease}:host .docs-breadcrumb__link:hover{color:var(--ion-text-color, #1a1a1a)}:host .docs-breadcrumb__link:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}:host .docs-breadcrumb__separator{color:var(--ion-color-medium, #666);font-size:.875rem}:host .docs-breadcrumb__current{font-size:.875rem;font-weight:600;color:var(--ion-text-color, #1a1a1a)}:host-context(.dark) .docs-breadcrumb__link:hover,:host-context([color-scheme=\"dark\"]) .docs-breadcrumb__link:hover{color:#f4f5f8}:host-context(.dark) .docs-breadcrumb__current,:host-context([color-scheme=\"dark\"]) .docs-breadcrumb__current{color:#f4f5f8}\n"] }]
        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { props: [{
                type: Input
            }], navigate: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 