Data Entry Components

/**
 * Button component with various types and configurations
 * Selector: button[nz-button], a[nz-button]
 * Export As: nzButton
 */
interface NzButtonComponent {
  /** Button type styling */
  nzType: 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
  /** Button shape */
  nzShape: 'circle' | 'round' | null;
  /** Button size */
  nzSize: 'large' | 'default' | 'small';
  /** Loading state with spinner */
  nzLoading: boolean;
  /** Ghost button style */
  nzGhost: boolean;
  /** Full width button */
  nzBlock: boolean;
  /** Danger button styling */
  nzDanger: boolean;
  /** Search button styling */
  nzSearch: boolean;
  /** Tab index for keyboard navigation */
  tabIndex: number | string | null;
  /** Button disabled state */
  disabled: boolean;
}

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

// Types
type NzButtonType = 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
type NzButtonShape = 'circle' | 'round' | null;
type NzButtonSize = NzSizeLDSType;

import { NzButtonModule } from 'ng-zorro-antd/button';

@Component({
  template: `
    <!-- Primary button -->
    <button nz-button nzType="primary">Primary</button>
    
    <!-- Loading button -->
    <button nz-button [nzLoading]="loading" (click)="loadData()">
      Load Data
    </button>
    
    <!-- Icon button -->
    <button nz-button nzShape="circle" nz-icon nzType="search"></button>
    
    <!-- Block button -->
    <button nz-button nzBlock nzType="primary">Full Width</button>
  `
})
export class ButtonExampleComponent {}

/**
 * Input directive for text inputs and textareas
 * Selector: input[nz-input], textarea[nz-input]
 */
interface NzInputDirective {
  /** Input size */
  nzSize: 'large' | 'default' | 'small';
  /** Validation status styling */
  nzStatus: '' | 'error' | 'warning';
  /** Input variant styling */
  nzVariant: 'outlined' | 'borderless' | 'filled' | 'underlined';
  /** @deprecated Use nzVariant instead */
  nzBorderless: boolean;
  /** Disable stepper for number inputs */
  nzStepperless: boolean;
  /** Disabled state */
  disabled: boolean;
}

/**
 * Input group component for combining inputs with addons
 * Selector: nz-input-group
 */
interface NzInputGroupComponent {
  /** Group size */
  nzSize: 'large' | 'default' | 'small';
  /** Compact styling */
  nzCompact: boolean;
  /** Search input styling */
  nzSearch: boolean;
  /** Prefix addon */
  nzAddOnBefore: string | TemplateRef<void>;
  /** Suffix addon */
  nzAddOnAfter: string | TemplateRef<void>;
  /** Prefix icon */
  nzPrefixIcon: string | TemplateRef<void>;
  /** Suffix icon */
  nzSuffixIcon: string | TemplateRef<void>;
}

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

import { NzInputModule } from 'ng-zorro-antd/input';

@Component({
  template: `
    <!-- Basic input -->
    <input nz-input placeholder="Enter text" [(ngModel)]="inputValue" />
    
    <!-- Input with status -->
    <input nz-input nzStatus="error" placeholder="Error state" />
    
    <!-- Input group with addons -->
    <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com">
      <input type="text" nz-input placeholder="mysite" />
    </nz-input-group>
    
    <!-- Input with prefix icon -->
    <nz-input-group [nzPrefixIcon]="userIcon">
      <input nz-input placeholder="Username" />
    </nz-input-group>
  `
})
export class InputExampleComponent {}

/**
 * Select component for dropdown selections
 * Selector: nz-select
 */
interface NzSelectComponent {
  /** Selection mode */
  nzMode: 'default' | 'multiple' | 'tags';
  /** Selected value(s) */
  ngModel: any;
  /** Size of select */
  nzSize: 'large' | 'default' | 'small';
  /** Placeholder text */
  nzPlaceHolder: string;
  /** Disabled state */
  nzDisabled: boolean;
  /** Allow clear selection */
  nzAllowClear: boolean;
  /** Show search input */
  nzShowSearch: boolean;
  /** Loading state */
  nzLoading: boolean;
  /** Dropdown class name */
  nzDropdownClassName: string;
  /** Maximum selected tags to show */
  nzMaxTagCount: number;
  /** Custom filter function */
  nzFilterOption: (input: string, option: NzOptionComponent) => boolean;
  /** Server search function */
  nzServerSearch: boolean;
  /** Selection change event */
  ngModelChange: EventEmitter<any>;
  /** Open/close change event */
  nzOpenChange: EventEmitter<boolean>;
}

/**
 * Option component for select choices
 * Selector: nz-option
 */
interface NzOptionComponent {
  /** Option value */
  nzValue: any;
  /** Option label */
  nzLabel: string;
  /** Disabled option */
  nzDisabled: boolean;
  /** Hide option */
  nzHide: boolean;
  /** Custom option data */
  nzCustomContent: boolean;
}

/**
 * Option group component
 * Selector: nz-option-group
 */
interface NzOptionGroupComponent {
  /** Group label */
  nzLabel: string | TemplateRef<void>;
}

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

import { NzSelectModule } from 'ng-zorro-antd/select';

@Component({
  template: `
    <!-- Basic select -->
    <nz-select nzPlaceHolder="Choose option" [(ngModel)]="selectedValue">
      <nz-option nzValue="option1" nzLabel="Option 1"></nz-option>
      <nz-option nzValue="option2" nzLabel="Option 2"></nz-option>
    </nz-select>
    
    <!-- Multiple select -->
    <nz-select nzMode="multiple" nzPlaceHolder="Select multiple" [(ngModel)]="multipleValues">
      <nz-option nzValue="a" nzLabel="Option A"></nz-option>
      <nz-option nzValue="b" nzLabel="Option B"></nz-option>
    </nz-select>
    
    <!-- Select with search -->
    <nz-select nzShowSearch nzPlaceHolder="Search and select">
      <nz-option *ngFor="let option of options" [nzValue]="option.value" [nzLabel]="option.label">
      </nz-option>
    </nz-select>
  `
})
export class SelectExampleComponent {}

/**
 * Checkbox component
 * Selector: [nz-checkbox]
 */
interface NzCheckboxComponent {
  /** Checked state */
  ngModel: boolean;
  /** Indeterminate state */
  nzIndeterminate: boolean;
  /** Disabled state */
  nzDisabled: boolean;
  /** Auto focus */
  nzAutoFocus: boolean;
  /** Checkbox value for groups */
  nzValue: any;
  /** Change event */
  ngModelChange: EventEmitter<boolean>;
}

/**
 * Checkbox group component
 * Selector: nz-checkbox-group
 */
interface NzCheckboxGroupComponent {
  /** Group options */
  nzOptions: NzCheckboxOptionInterface[];
  /** Disabled state */
  nzDisabled: boolean;
  /** Group value */
  ngModel: any[];
  /** Change event */
  ngModelChange: EventEmitter<any[]>;
}

/**
 * Checkbox wrapper component
 * Selector: nz-checkbox-wrapper
 */
interface NzCheckboxWrapperComponent {
  /** Change event */
  nzOnChange: EventEmitter<any[]>;
}

// Types
interface NzCheckboxOptionInterface {
  label: string;
  value: any;
  checked?: boolean;
  disabled?: boolean;
}

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

/**
 * Radio component
 * Selector: [nz-radio]
 */
interface NzRadioComponent {
  /** Checked state */
  ngModel: boolean;
  /** Radio value */
  nzValue: any;
  /** Disabled state */
  nzDisabled: boolean;
  /** Auto focus */
  nzAutoFocus: boolean;
  /** Change event */
  ngModelChange: EventEmitter<boolean>;
}

/**
 * Radio group component
 * Selector: nz-radio-group
 */
interface NzRadioGroupComponent {
  /** Group value */
  ngModel: any;
  /** Disabled state */
  nzDisabled: boolean;
  /** Button style */
  nzButtonStyle: 'outline' | 'solid';
  /** Group name */
  nzName: string;
  /** Group size */
  nzSize: 'large' | 'default' | 'small';
  /** Change event */
  ngModelChange: EventEmitter<any>;
}

/**
 * Radio button component
 * Selector: [nz-radio-button]
 */
interface NzRadioButtonComponent {
  /** Radio value */
  nzValue: any;
  /** Disabled state */
  nzDisabled: boolean;
}

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

/**
 * Date picker component
 * Selector: nz-date-picker
 */
interface NzDatePickerComponent {
  /** Selected date */
  ngModel: Date | null;
  /** Date format */
  nzFormat: string;
  /** Placeholder text */
  nzPlaceHolder: string;
  /** Size */
  nzSize: 'large' | 'default' | 'small';
  /** Disabled state */
  nzDisabled: boolean;
  /** Allow clear */
  nzAllowClear: boolean;
  /** Auto focus */
  nzAutoFocus: boolean;
  /** Show time picker */
  nzShowTime: boolean | object;
  /** Show today button */
  nzShowToday: boolean;
  /** Disabled date function */
  nzDisabledDate: (current: Date) => boolean;
  /** Change event */
  ngModelChange: EventEmitter<Date>;
  /** Open/close change event */
  nzOnOpenChange: EventEmitter<boolean>;
}

/**
 * Range picker component
 * Selector: nz-range-picker
 */
interface NzRangePickerComponent {
  /** Selected date range */
  ngModel: [Date, Date] | null;
  /** Date format */
  nzFormat: string;
  /** Placeholder text array */
  nzPlaceHolder: string[];
  /** Size */
  nzSize: 'large' | 'default' | 'small';
  /** Separator */
  nzSeparator: string;
  /** Show time picker */
  nzShowTime: boolean | object;
  /** Change event */
  ngModelChange: EventEmitter<[Date, Date]>;
}

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

/**
 * Form directive
 * Selector: [nz-form]
 */
interface NzFormDirective {
  /** Form layout */
  nzLayout: 'horizontal' | 'vertical' | 'inline';
  /** Auto tips for validation */
  nzAutoTips: Record<string, Record<string, string>>;
  /** Disable auto tips */
  nzDisableAutoTips: boolean;
}

/**
 * Form item component
 * Selector: nz-form-item
 */
interface NzFormItemComponent {
  /** Flex layout */
  nzFlex: boolean;
}

/**
 * Form label component
 * Selector: nz-form-label
 */
interface NzFormLabelComponent {
  /** Required marker */
  nzRequired: boolean;
  /** Label text */
  nzFor: string;
  /** Flex span */
  nzSpan: number;
  /** Flex offset */
  nzOffset: number;
  /** Tooltip info */
  nzTooltipTitle: string | TemplateRef<void>;
  /** Tooltip icon */
  nzTooltipIcon: string | TemplateRef<void>;
}

/**
 * Form control component
 * Selector: nz-form-control
 */
interface NzFormControlComponent {
  /** Validation status */
  nzValidateStatus: 'success' | 'warning' | 'error' | 'validating' | '';
  /** Error tip */
  nzErrorTip: string | TemplateRef<void>;
  /** Warning tip */
  nzWarningTip: string | TemplateRef<void>;
  /** Success tip */
  nzSuccessTip: string | TemplateRef<void>;
  /** Validating tip */
  nzValidatingTip: string | TemplateRef<void>;
  /** Extra information */
  nzExtra: string | TemplateRef<void>;
  /** Has feedback icon */
  nzHasFeedback: boolean;
  /** Auto tips */
  nzAutoTips: Record<string, Record<string, string>>;
  /** Disable auto tips */
  nzDisableAutoTips: boolean;
  /** Flex span */
  nzSpan: number;
  /** Flex offset */
  nzOffset: number;
}

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

import { NzFormModule } from 'ng-zorro-antd/form';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  template: `
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="email">Email</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="Please input your email!">
          <input id="email" formControlName="email" nz-input />
        </nz-form-control>
      </nz-form-item>
      
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="password">Password</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="Please input your password!">
          <input id="password" formControlName="password" type="password" nz-input />
        </nz-form-control>
      </nz-form-item>
      
      <nz-form-item>
        <nz-form-control [nzSpan]="14" [nzOffset]="6">
          <button nz-button nzType="primary">Submit</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  `
})
export class FormExampleComponent {
  validateForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.validateForm = this.fb.group({
      email: ['', [Validators.email, Validators.required]],
      password: ['', [Validators.required]]
    });
  }
}

/**
 * Switch component
 * Selector: nz-switch
 */
interface NzSwitchComponent {
  /** Switch state */
  ngModel: boolean;
  /** Disabled state */
  nzDisabled: boolean;
  /** Loading state */
  nzLoading: boolean;
  /** Size */
  nzSize: 'default' | 'small';
  /** Checked text */
  nzCheckedChildren: string | TemplateRef<void>;
  /** Unchecked text */
  nzUnCheckedChildren: string | TemplateRef<void>;
  /** Control switch by click */
  nzControl: boolean;
  /** Change event */
  ngModelChange: EventEmitter<boolean>;
}

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

/**
 * Upload component
 * Selector: nz-upload
 */
interface NzUploadComponent {
  /** Upload type */
  nzType: 'select' | 'drag';
  /** Accept file types */
  nzAccept: string;
  /** Upload action URL */
  nzAction: string | ((file: NzUploadFile) => string | Observable<string>);
  /** Upload directory */
  nzDirectory: boolean;
  /** Before upload hook */
  nzBeforeUpload: (file: NzUploadFile, fileList: NzUploadFile[]) => boolean | Observable<boolean>;
  /** Custom request */
  nzCustomRequest: (item: NzUploadXHRArgs) => Subscription;
  /** Upload data */
  nzData: {} | ((file: NzUploadFile) => {} | Observable<{}>);
  /** Disabled state */
  nzDisabled: boolean;
  /** File list */
  nzFileList: NzUploadFile[];
  /** Limit file count */
  nzLimit: number;
  /** Multiple selection */
  nzMultiple: boolean;
  /** File name */
  nzName: string;
  /** Show upload list */
  nzShowUploadList: boolean | NzShowUploadList;
  /** File list type */
  nzListType: 'text' | 'picture' | 'picture-card';
  /** Filters */
  nzFilter: NzUploadFilter[];
  /** File size limit */
  nzSize: number;
  /** Support file types */
  nzFileType: string;
  /** Upload headers */
  nzHeaders: {} | ((file: NzUploadFile) => {} | Observable<{}>);
  /** With credentials */
  nzWithCredentials: boolean;
  /** Change event */
  nzChange: EventEmitter<NzUploadChangeParam>;
  /** File list change */
  nzFileListChange: EventEmitter<NzUploadFile[]>;
}

// Types
interface NzUploadFile {
  uid: string;
  name: string;
  status?: 'uploading' | 'done' | 'error' | 'removed';
  response?: any;
  linkProps?: any;
  type?: string;
  size?: number;
  url?: string;
  preview?: string;
  thumbUrl?: string;
  percent?: number;
  originFileObj?: File;
}

interface NzUploadChangeParam {
  file: NzUploadFile;
  fileList: NzUploadFile[];
  event?: { percent: number };
  type?: string;
}

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