Navigation Components

/**
 * Menu directive
 * Selector: [nz-menu]
 */
interface NzMenuDirective {
  /** Menu mode */
  nzMode: 'vertical' | 'horizontal' | 'inline';
  /** Menu theme */
  nzTheme: 'light' | 'dark';
  /** Inline collapsed state */
  nzInlineCollapsed: boolean;
  /** Indent size for inline mode */
  nzInlineIndent: number;
  /** Selectable menu items */
  nzSelectable: boolean;
  /** Menu click event */
  nzClick: EventEmitter<NzMenuItemDirective>;
}

/**
 * Menu item component
 * Selector: [nz-menu-item]
 */
interface NzMenuItemComponent {
  /** Disabled state */
  nzDisabled: boolean;
  /** Selected state */
  nzSelected: boolean;
  /** Danger style */
  nzDanger: boolean;
  /** Padding left */
  nzPaddingLeft: number | null;
  /** Menu item title */
  nzTitle: string | null;
  /** Match router */
  nzMatchRouter: boolean;
  /** Match router exact */
  nzMatchRouterExact: boolean;
}

/**
 * Submenu component
 * Selector: [nz-submenu]
 */
interface NzSubMenuComponent {
  /** Submenu title */
  nzTitle: string | TemplateRef<void>;
  /** Submenu icon */
  nzIcon: string;
  /** Open state */
  nzOpen: boolean;
  /** Disabled state */
  nzDisabled: boolean;
  /** Menu class for popup mode */
  nzMenuClassName: string;
  /** Popup class name */
  nzPopupClassName: string;
  /** Open change event */
  nzOpenChange: EventEmitter<boolean>;
}

/**
 * Menu group component
 * Selector: [nz-menu-group]
 */
interface NzMenuGroupComponent {
  /** Group title */
  nzTitle: string | TemplateRef<void>;
}

/**
 * Menu divider directive
 * Selector: [nz-menu-divider]
 */
interface NzMenuDividerDirective {}

// Module
class NzMenuModule {
  static forRoot(): ModuleWithProviders<NzMenuModule>;
}

import { NzMenuModule } from 'ng-zorro-antd/menu';

@Component({
  template: `
    <!-- Horizontal menu -->
    <ul nz-menu nzMode="horizontal" nzTheme="dark">
      <li nz-menu-item nzSelected>
        <i nz-icon nzType="mail"></i>
        Navigation One
      </li>
      <li nz-menu-item nzDisabled>
        <i nz-icon nzType="appstore"></i>
        Navigation Two
      </li>
      <li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
        <ul>
          <li nz-menu-group nzTitle="Item 1">
            <ul>
              <li nz-menu-item>Option 1</li>
              <li nz-menu-item>Option 2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    <!-- Vertical inline menu -->
    <ul nz-menu nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzOpen nzTitle="Navigation One" nzIcon="user">
        <ul>
          <li nz-menu-item>Option 1</li>
          <li nz-menu-item>Option 2</li>
        </ul>
      </li>
      <li nz-menu-item>
        <i nz-icon nzType="video-camera"></i>
        <span>Navigation Two</span>
      </li>
    </ul>
  `
})
export class MenuExampleComponent {
  isCollapsed = false;
}

/**
 * Breadcrumb component
 * Selector: nz-breadcrumb
 */
interface NzBreadCrumbComponent {
  /** Auto generate breadcrumb */
  nzAutoGenerate: boolean;
  /** Separator between breadcrumbs */
  nzSeparator: string | TemplateRef<void> | null;
  /** Route config for auto generation */
  nzRouteLabel: string;
  /** Route config key */
  nzRouteLabelFn: (label: string) => string;
}

/**
 * Breadcrumb item component
 * Selector: nz-breadcrumb-item
 */
interface NzBreadCrumbItemComponent {
  /** Overlay for dropdown */
  nzOverlay: TemplateRef<void>;
}

/**
 * Breadcrumb separator component
 * Selector: nz-breadcrumb-separator
 */
interface NzBreadCrumbSeparatorComponent {}

// Module
class NzBreadCrumbModule {
  static forRoot(): ModuleWithProviders<NzBreadCrumbModule>;
}

import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';

@Component({
  template: `
    <!-- Basic breadcrumb -->
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        <a [routerLink]="['/']">Home</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a [routerLink]="['/list']">Application List</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>

    <!-- With custom separator -->
    <nz-breadcrumb nzSeparator=">">
      <nz-breadcrumb-item>Home</nz-breadcrumb-item>
      <nz-breadcrumb-item>Application Center</nz-breadcrumb-item>
      <nz-breadcrumb-item>Application List</nz-breadcrumb-item>
      <nz-breadcrumb-item>An Application</nz-breadcrumb-item>
    </nz-breadcrumb>
  `
})
export class BreadcrumbExampleComponent {}

/**
 * Pagination component
 * Selector: nz-pagination
 */
interface NzPaginationComponent {
  /** Total number of data items */
  nzTotal: number;
  /** Current page number */
  nzPageIndex: number;
  /** Number of data items per page */
  nzPageSize: number;
  /** Page size options */
  nzPageSizeOptions: number[];
  /** Show size changer */
  nzShowSizeChanger: boolean;
  /** Show quick jumper */
  nzShowQuickJumper: boolean;
  /** Show total info */
  nzShowTotal: TemplateRef<{ $implicit: number; range: [number, number] }> | null;
  /** Simple mode */
  nzSimple: boolean;
  /** Disabled state */
  nzDisabled: boolean;
  /** Responsive mode */
  nzResponsive: boolean;
  /** Hide on single page */
  nzHideOnSinglePage: boolean;
  /** Page size changer options */
  nzPageSizeOptions: number[];
  /** Size */
  nzSize: 'default' | 'small';
  /** Item render function */
  nzItemRender: TemplateRef<PaginationItemRenderContext> | null;
  /** Page index change event */
  nzPageIndexChange: EventEmitter<number>;
  /** Page size change event */
  nzPageSizeChange: EventEmitter<number>;
}

// Types
interface PaginationItemRenderContext {
  $implicit: 'page' | 'prev' | 'next' | 'prev_5' | 'next_5';
  page: number;
}

// Module
class NzPaginationModule {
  static forRoot(): ModuleWithProviders<NzPaginationModule>;
}

/**
 * Steps component
 * Selector: nz-steps
 */
interface NzStepsComponent {
  /** Current step index */
  nzCurrent: number;
  /** Step direction */
  nzDirection: 'horizontal' | 'vertical';
  /** Label placement */
  nzLabelPlacement: 'horizontal' | 'vertical';
  /** Step type */
  nzType: 'default' | 'navigation';
  /** Step size */
  nzSize: 'default' | 'small';
  /** Starting index */
  nzStartIndex: number;
  /** Status of current step */
  nzStatus: 'wait' | 'process' | 'finish' | 'error';
  /** Progress dot mode */
  nzProgressDot: boolean | TemplateRef<{ $implicit: TemplateRef<void>; status: string; index: number }>;
}

/**
 * Step component
 * Selector: nz-step
 */
interface NzStepComponent {
  /** Step title */
  nzTitle: string | TemplateRef<void>;
  /** Step subtitle */
  nzSubtitle: string | TemplateRef<void>;
  /** Step description */
  nzDescription: string | TemplateRef<void>;
  /** Step status */
  nzStatus: 'wait' | 'process' | 'finish' | 'error';
  /** Step icon */
  nzIcon: string | TemplateRef<void>;
  /** Disabled state */
  nzDisabled: boolean;
  /** Percentage of progress */
  nzPercentage: number | null;
}

// Module
class NzStepsModule {
  static forRoot(): ModuleWithProviders<NzStepsModule>;
}

/**
 * Tab set component
 * Selector: nz-tabset
 */
interface NzTabSetComponent {
  /** Active tab index */
  nzSelectedIndex: number;
  /** Tab position */
  nzTabPosition: 'top' | 'bottom' | 'left' | 'right';
  /** Tab type */
  nzType: 'line' | 'card' | 'editable-card';
  /** Tab size */
  nzSize: 'large' | 'default' | 'small';
  /** Animated tabs */
  nzAnimated: boolean | { inkBar: boolean; tabPane: boolean };
  /** Tab bar extra content */
  nzTabBarExtraContent: TemplateRef<void>;
  /** Show add button */
  nzShowPagination: boolean;
  /** Hide all tabs */
  nzHideAll: boolean;
  /** Link router */
  nzLinkRouter: boolean;
  /** Link exact */
  nzLinkExact: boolean;
  /** Center tabs */
  nzCentered: boolean;
  /** Tab bar gutter */
  nzTabBarGutter: number;
  /** Tab bar style */
  nzTabBarStyle: NgStyleInterface;
  /** Selected index change event */
  nzSelectedIndexChange: EventEmitter<number>;
  /** Select change event */
  nzSelectChange: EventEmitter<{ nzSelectedIndex: number; tab: NzTabComponent }>;
  /** Close event */
  nzClose: EventEmitter<{ index: number }>;
  /** Add event */
  nzAdd: EventEmitter<void>;
}

/**
 * Tab component
 * Selector: nz-tab
 */
interface NzTabComponent {
  /** Tab title */
  nzTitle: string | TemplateRef<void>;
  /** Tab disabled */
  nzDisabled: boolean;
  /** Tab closable */
  nzClosable: boolean;
  /** Tab force render */
  nzForceRender: boolean;
  /** Route link */
  nzRouterIdentifier: string;
  /** Click event */
  nzClick: EventEmitter<void>;
  /** Context menu event */
  nzContextmenu: EventEmitter<MouseEvent>;
  /** Select event */
  nzSelect: EventEmitter<void>;
  /** Deselect event */
  nzDeselect: EventEmitter<void>;
}

// Module
class NzTabsModule {
  static forRoot(): ModuleWithProviders<NzTabsModule>;
}

/**
 * Dropdown directive
 * Selector: [nz-dropdown]
 */
interface NzDropdownDirective {
  /** Dropdown menu */
  nzDropdownMenu: NzDropdownMenuComponent | null;
  /** Dropdown trigger */
  nzTrigger: 'click' | 'hover';
  /** Dropdown placement */
  nzPlacement: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
  /** Dropdown disabled */
  nzDisabled: boolean;
  /** Dropdown visible */
  nzVisible: boolean;
  /** Click hide */
  nzClickHide: boolean;
  /** Backdrop */
  nzBackdrop: boolean;
  /** Overlay class name */
  nzOverlayClassName: string;
  /** Overlay style */
  nzOverlayStyle: NgStyleInterface;
  /** Visible change event */
  nzVisibleChange: EventEmitter<boolean>;
}

/**
 * Dropdown menu component
 * Selector: nz-dropdown-menu
 */
interface NzDropdownMenuComponent {
  /** Dropdown direction */
  nzSelectable: boolean;
}

/**
 * Dropdown button directive
 * Selector: nz-dropdown-button, [nz-dropdown-button]
 */
interface NzDropdownButtonDirective {
  /** Button disabled */
  nzDisabled: boolean;
  /** Button size */
  nzSize: 'large' | 'default' | 'small';
  /** Button type */
  nzType: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
  /** Button ghost */
  nzGhost: boolean;
  /** Button danger */
  nzDanger: boolean;
  /** Button loading */
  nzLoading: boolean;
  /** Button icon */
  nzIcon: string | null;
}

// Module
class NzDropDownModule {
  static forRoot(): ModuleWithProviders<NzDropDownModule>;
}

/**
 * Anchor component
 * Selector: nz-anchor
 */
interface NzAnchorComponent {
  /** Anchor container */
  nzContainer: string | HTMLElement;
  /** Scroll offset to trigger change */
  nzOffsetTop: number;
  /** Scroll offset from bottom */
  nzOffsetBottom: number;
  /** Show ink ball */
  nzShowInkInFixed: boolean;
  /** Bounds for active anchor */
  nzBounds: number;
  /** Target offset for scrolling */
  nzTargetOffset: number;
  /** Anchor click event */
  nzClick: EventEmitter<string>;
  /** Scroll event */
  nzScroll: EventEmitter<NzAnchorLinkComponent>;
}

/**
 * Anchor link component
 * Selector: nz-anchor-link
 */
interface NzAnchorLinkComponent {
  /** Link href */
  nzHref: string;
  /** Link title */
  nzTitle: string | TemplateRef<void>;
  /** Target element */
  nzTarget: string;
}

// Module
class NzAnchorModule {
  static forRoot(): ModuleWithProviders<NzAnchorModule>;
}

/**
 * Affix component
 * Selector: nz-affix
 */
interface NzAffixComponent {
  /** Offset from top */
  nzOffsetTop: number | null;
  /** Offset from bottom */
  nzOffsetBottom: number | null;
  /** Target container */
  nzTarget: string | Element | Window;
  /** Change event */
  nzChange: EventEmitter<boolean>;
}

// Module
class NzAffixModule {
  static forRoot(): ModuleWithProviders<NzAffixModule>;
}

/**
 * Back top component
 * Selector: nz-back-top
 */
interface NzBackTopComponent {
  /** Target container */
  nzTarget: string | Element | Window;
  /** Visibility height */
  nzVisibilityHeight: number;
  /** Click event */
  nzClick: EventEmitter<boolean>;
  /** Duration for scrolling animation */
  nzDuration: number;
}

// Module
class NzBackTopModule {
  static forRoot(): ModuleWithProviders<NzBackTopModule>;
}

/**
 * Page header component
 * Selector: nz-page-header
 */
interface NzPageHeaderComponent {
  /** Page title */
  nzTitle: string | TemplateRef<void>;
  /** Page subtitle */
  nzSubtitle: string | TemplateRef<void>;
  /** Show back button */
  nzBackIcon: string | TemplateRef<void> | null;
  /** Ghost mode */
  nzGhost: boolean;
  /** Back event */
  nzBack: EventEmitter<void>;
}

/**
 * Page header breadcrumb directive
 * Selector: [nz-page-header-breadcrumb]
 */
interface NzPageHeaderBreadcrumbDirective {}

/**
 * Page header avatar directive
 * Selector: [nz-page-header-avatar]
 */
interface NzPageHeaderAvatarDirective {}

/**
 * Page header title directive
 * Selector: [nz-page-header-title]
 */
interface NzPageHeaderTitleDirective {}

/**
 * Page header subtitle directive
 * Selector: [nz-page-header-subtitle]
 */
interface NzPageHeaderSubtitleDirective {}

/**
 * Page header content directive
 * Selector: [nz-page-header-content]
 */
interface NzPageHeaderContentDirective {}

/**
 * Page header extra directive
 * Selector: [nz-page-header-extra]
 */
interface NzPageHeaderExtraDirective {}

/**
 * Page header footer directive
 * Selector: [nz-page-header-footer]
 */
interface NzPageHeaderFooterDirective {}

/**
 * Page header tags directive
 * Selector: [nz-page-header-tags]
 */
interface NzPageHeaderTagDirective {}

// Module
class NzPageHeaderModule {
  static forRoot(): ModuleWithProviders<NzPageHeaderModule>;
}