Layout & Utility Components

/**
 * Row directive for grid layout
 * Selector: [nz-row]
 */
interface NzRowDirective {
  /** Gutter spacing between columns */
  nzGutter: number | object | [number, number];
  /** Layout type */
  nzType: 'flex';
  /** Vertical alignment */
  nzAlign: 'top' | 'middle' | 'bottom' | 'stretch';
  /** Horizontal alignment */
  nzJustify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
  /** Wrap mode */
  nzWrap: 'nowrap' | 'wrap' | 'wrap-reverse';
}

/**
 * Column directive for grid layout
 * Selector: [nz-col]
 */
interface NzColDirective {
  /** Column span (0-24) */
  nzSpan: number;
  /** Column order */
  nzOrder: number;
  /** Column offset */
  nzOffset: number;
  /** Column push */
  nzPush: number;
  /** Column pull */
  nzPull: number;
  /** Extra small devices (<576px) */
  nzXs: number | NzBreakPoint;
  /** Small devices (≥576px) */
  nzSm: number | NzBreakPoint;
  /** Medium devices (≥768px) */
  nzMd: number | NzBreakPoint;
  /** Large devices (≥992px) */
  nzLg: number | NzBreakPoint;
  /** Extra large devices (≥1200px) */
  nzXl: number | NzBreakPoint;
  /** Extra extra large devices (≥1600px) */
  nzXXl: number | NzBreakPoint;
  /** Flex property */
  nzFlex: string | number | 'auto' | 'none' | 'initial';
}

// Types
interface NzBreakPoint {
  span?: number;
  offset?: number;
  order?: number;
  push?: number;
  pull?: number;
}

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

import { NzGridModule } from 'ng-zorro-antd/grid';

@Component({
  template: `
    <!-- Basic grid -->
    <div nz-row>
      <div nz-col nzSpan="12">Column 12</div>
      <div nz-col nzSpan="12">Column 12</div>
    </div>

    <!-- With gutter -->
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="6">Column 6</div>
      <div nz-col nzSpan="6">Column 6</div>
      <div nz-col nzSpan="6">Column 6</div>
      <div nz-col nzSpan="6">Column 6</div>
    </div>

    <!-- Responsive grid -->
    <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
      <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="8" [nzLg]="6">
        Responsive Column
      </div>
    </div>

    <!-- Flex layout -->
    <div nz-row nzType="flex" nzJustify="center" nzAlign="middle">
      <div nz-col nzSpan="4">Centered Content</div>
    </div>
  `
})
export class GridExampleComponent {}

/**
 * Layout component
 * Selector: nz-layout
 */
interface NzLayoutComponent {
  /** Has sider */
  nzHasSider: boolean;
}

/**
 * Header component
 * Selector: nz-header
 */
interface NzHeaderComponent {}

/**
 * Content component
 * Selector: nz-content
 */
interface NzContentComponent {}

/**
 * Footer component
 * Selector: nz-footer
 */
interface NzFooterComponent {}

/**
 * Sider component
 * Selector: nz-sider
 */
interface NzSiderComponent {
  /** Collapsed state */
  nzCollapsed: boolean;
  /** Collapsible */
  nzCollapsible: boolean;
  /** Collapsed width */
  nzCollapsedWidth: number;
  /** Breakpoint */
  nzBreakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
  /** Reverse arrow direction */
  nzReverseArrow: boolean;
  /** Theme */
  nzTheme: 'light' | 'dark';
  /** Trigger */
  nzTrigger: TemplateRef<void> | null;
  /** Sider width */
  nzWidth: string | number;
  /** Zero width trigger style */
  nzZeroTrigger: TemplateRef<void> | null;
  /** Collapsed change event */
  nzCollapsedChange: EventEmitter<boolean>;
}

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

import { NzLayoutModule } from 'ng-zorro-antd/layout';

@Component({
  template: `
    <!-- Basic layout -->
    <nz-layout>
      <nz-header>Header</nz-header>
      <nz-content>Content</nz-content>
      <nz-footer>Footer</nz-footer>
    </nz-layout>

    <!-- Layout with sider -->
    <nz-layout>
      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
        <div class="logo"></div>
        <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
          <li nz-menu-item>
            <i nz-icon nzType="pie-chart"></i>
            <span>Option 1</span>
          </li>
          <li nz-menu-item>
            <i nz-icon nzType="desktop"></i>
            <span>Option 2</span>
          </li>
        </ul>
      </nz-sider>
      <nz-layout>
        <nz-header style="background: #fff; padding: 0;">
          <i
            class="trigger"
            nz-icon
            [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            (click)="isCollapsed = !isCollapsed">
          </i>
        </nz-header>
        <nz-content style="margin: 24px 16px; padding: 24px; background: #fff; min-height: 280px;">
          Content
        </nz-content>
      </nz-layout>
    </nz-layout>
  `
})
export class LayoutExampleComponent {
  isCollapsed = false;
}

/**
 * Space component
 * Selector: nz-space
 */
interface NzSpaceComponent {
  /** Space direction */
  nzDirection: 'horizontal' | 'vertical';
  /** Space size */
  nzSize: 'small' | 'middle' | 'large' | number | [number, number];
  /** Wrap items */
  nzWrap: boolean;
  /** Alignment */
  nzAlign: 'start' | 'end' | 'center' | 'baseline';
  /** Split element */
  nzSplit: TemplateRef<void>;
}

/**
 * Space item directive
 * Selector: [nzSpaceItem]
 */
interface NzSpaceItemDirective {}

/**
 * Space compact item directive for compact layout
 * Selector: [nzSpaceCompactItem]
 */
interface NzSpaceCompactItemDirective {}

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

/**
 * Divider component
 * Selector: nz-divider
 */
interface NzDividerComponent {
  /** Divider text */
  nzText: string | TemplateRef<void>;
  /** Divider type */
  nzType: 'horizontal' | 'vertical';
  /** Text orientation */
  nzOrientation: 'left' | 'right' | 'center';
  /** Dashed style */
  nzDashed: boolean;
  /** Plain text style */
  nzPlain: boolean;
}

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

/**
 * Typography component
 * Selector: [nz-typography]
 */
interface NzTypographyComponent {
  /** Editable */
  nzEditable: boolean;
  /** Copyable */
  nzCopyable: boolean;
  /** Disabled */
  nzDisabled: boolean;
  /** Expandable */
  nzExpandable: boolean;
  /** Ellipsis */
  nzEllipsis: boolean;
  /** Ellipsis config */
  nzEllipsisRows: number;
  /** Copy text */
  nzCopyText: string;
  /** Copy icons */
  nzCopyIcons: [string | TemplateRef<void>, string | TemplateRef<void>];
  /** Edit config */
  nzEditIcon: string | TemplateRef<void>;
  /** Edit tooltip */
  nzEditTooltip: string | null;
  /** Expand text */
  nzExpandable: boolean;
  /** Suffix for ellipsis */
  nzSuffix: string;
  /** Edit change event */
  nzOnEdit: EventEmitter<string>;
  /** Copy event */
  nzOnCopy: EventEmitter<string>;
  /** Expand event */
  nzOnExpand: EventEmitter<void>;
  /** Ellipsis change event */
  nzOnEllipsis: EventEmitter<boolean>;
}

/**
 * Text copy component
 * Selector: nz-text-copy
 */
interface NzTextCopyComponent {
  /** Copy text */
  nzText: string;
  /** Copy tooltip */
  nzTooltips: [string, string] | null;
  /** Copy icons */
  nzIcons: [string | TemplateRef<void>, string | TemplateRef<void>];
  /** Copy event */
  nzOnCopy: EventEmitter<string>;
}

/**
 * Text edit component
 * Selector: nz-text-edit
 */
interface NzTextEditComponent {
  /** Edit text */
  nzText: string;
  /** Edit icon */
  nzIcon: string | TemplateRef<void>;
  /** Edit tooltip */
  nzTooltip: string | null;
  /** Edit change event */
  nzOnStart: EventEmitter<void>;
  /** Edit end event */
  nzOnEnd: EventEmitter<string>;
}

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

/**
 * Flex directive
 * Selector: [nzFlex]
 */
interface NzFlexDirective {
  /** Flex property value */
  nzFlex: string | number | 'auto' | 'none' | 'initial';
  /** Flex direction */
  nzDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse';
  /** Flex wrap */
  nzWrap: 'nowrap' | 'wrap' | 'wrap-reverse';
  /** Justify content */
  nzJustify: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
  /** Align items */
  nzAlign: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
  /** Gap between items */
  nzGap: number | string | [number | string, number | string];
  /** Vertical alignment */
  nzVertical: boolean;
}

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

/**
 * Empty component
 * Selector: nz-empty
 */
interface NzEmptyComponent {
  /** Empty image */
  nzNotFoundImage: string | TemplateRef<void>;
  /** Empty content */
  nzNotFoundContent: string | TemplateRef<void> | null;
  /** Empty footer */
  nzNotFoundFooter: string | TemplateRef<void>;
}

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

/**
 * Watermark component
 * Selector: nz-watermark
 */
interface NzWaterMarkComponent {
  /** Watermark width */
  nzWidth: number;
  /** Watermark height */
  nzHeight: number;
  /** Watermark content */
  nzContent: string | string[];
  /** Font configuration */
  nzFont: {
    color?: string;
    fontSize?: number | string;
    fontWeight?: 'normal' | 'light' | 'weight' | number;
    fontFamily?: string;
    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
  };
  /** Image source */
  nzImage: string;
  /** Watermark rotate */
  nzRotate: number;
  /** Z-index */
  nzZIndex: number;
  /** Gap between watermarks */
  nzGap: [number, number];
  /** Offset from container */
  nzOffset: [number, number];
}

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

/**
 * QR Code component
 * Selector: nz-qrcode
 */
interface NzQRCodeComponent {
  /** QR code value */
  nzValue: string;
  /** QR code size */
  nzSize: number;
  /** Padding around QR code */
  nzPadding: number | [number, number] | [number, number, number] | [number, number, number, number];
  /** QR code color */
  nzColor: string;
  /** Background color */
  nzBgColor: string;
  /** QR code level */
  nzLevel: 'L' | 'M' | 'Q' | 'H';
  /** Icon configuration */
  nzIcon: string;
  /** Icon size */
  nzIconSize: number;
  /** Bordered */
  nzBordered: boolean;
  /** Status */
  nzStatus: 'active' | 'expired' | 'loading' | 'scanned';
  /** On refresh */
  nzOnRefresh: EventEmitter<void>;
}

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

/**
 * Float button component
 * Selector: nz-float-button
 */
interface NzFloatButtonComponent {
  /** Button type */
  nzType: 'default' | 'primary';
  /** Button shape */
  nzShape: 'circle' | 'square';
  /** Button icon */
  nzIcon: string | TemplateRef<void>;
  /** Button description */
  nzDescription: string | TemplateRef<void>;
  /** Tooltip */
  nzTooltip: string | TemplateRef<void>;
  /** Badge */
  nzBadge: { dot: boolean } | { count: number } | { status: string };
  /** Button href */
  nzHref: string;
  /** Button target */
  nzTarget: string;
  /** Click event */
  nzOnClick: EventEmitter<MouseEvent>;
}

/**
 * Float button group component
 * Selector: nz-float-button-group
 */
interface NzFloatButtonGroupComponent {
  /** Group shape */
  nzShape: 'circle' | 'square';
  /** Group trigger */
  nzTrigger: 'click' | 'hover';
  /** Group open */
  nzOpen: boolean;
  /** Group icon */
  nzIcon: string | TemplateRef<void>;
  /** Close icon */
  nzCloseIcon: string | TemplateRef<void>;
  /** Group tooltip */
  nzTooltip: string | TemplateRef<void>;
  /** Group type */
  nzType: 'default' | 'primary';
  /** Open change event */
  nzOnOpenChange: EventEmitter<boolean>;
}

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