Buttons & Indicators

/**
 * Standard button component with multiple appearance variants
 */
class MatButton extends MatButtonBase {
  @Input('matButton') appearance: MatButtonAppearance | '' | null;
  
  setAppearance(appearance: MatButtonAppearance): void;
  
  // Standard button with various appearances
}

/**
 * Anchor variant of button for links
 */
class MatAnchor extends MatButtonBase {
  @Input('matButton') appearance: MatButtonAppearance | '' | null;
  
  setAppearance(appearance: MatButtonAppearance): void;
  
  // Anchor-based button for navigation
}

/**
 * Floating action button for primary actions
 */
class MatFabButton extends MatButtonBase {
  @Input() extended: boolean;
  @Input() color: ThemePalette;
  
  readonly _isFab: boolean = true;
  
  // Circular floating action button
}

/**
 * Anchor variant of FAB for links
 */
class MatFabAnchor extends MatButtonBase {
  @Input() extended: boolean;
  @Input() color: ThemePalette;
  
  readonly _isFab: boolean = true;
  
  // Anchor-based floating action button
}

/**
 * Mini floating action button
 */
class MatMiniFabButton extends MatButtonBase {
  @Input() color: ThemePalette;
  
  readonly _isFab: boolean = true;
  
  // Smaller FAB variant
}

/**
 * Anchor variant of mini FAB for links
 */
class MatMiniFabAnchor extends MatButtonBase {
  @Input() color: ThemePalette;
  
  readonly _isFab: boolean = true;
  
  // Anchor-based mini floating action button
}

/**
 * Icon-only button without background
 */
class MatIconButton extends MatButtonBase {
  @Input() color: ThemePalette;
  
  // Icon button without background
}

/**
 * Anchor variant of icon button for links
 */
class MatIconAnchor extends MatButtonBase {
  @Input() color: ThemePalette;
  
  // Anchor-based icon button
}

/**
 * Base button implementation (not used directly)
 */
abstract class MatButtonBase {
  @Input() disabled: boolean;
  @Input() disableRipple: boolean;
  @Input() disabledInteractive: boolean;
  @Input() color: string | null;
  @Input() tabIndex: number;
  
  readonly isRoundButton: boolean;
  readonly isIconButton: boolean;
  readonly ariaDisabled: boolean | undefined;
  
  focus(origin?: FocusOrigin, options?: FocusOptions): void;
  getHostElement(): HTMLElement;
  _getAriaDisabled(): string | null;
  _getDisabledAttribute(): string | null;
  _getTabIndex(): string | null;
}

type MatButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';

/**
 * Button configuration interface
 */
interface MatButtonConfig {
  disableRipple?: boolean;
  disabledInteractive?: boolean;
  defaultAppearance?: MatButtonAppearance;
}

/**
 * FAB configuration interface
 */
interface MatFabDefaultOptions {
  color?: ThemePalette;
  disableRipple?: boolean;
  disabledInteractive?: boolean;
}

/**
 * Injection token for FAB default options
 */
const MAT_FAB_DEFAULT_OPTIONS: InjectionToken<MatFabDefaultOptions>;

/**
 * Button configuration injection token
 */
const MAT_BUTTON_CONFIG: InjectionToken<MatButtonConfig>;

/**
 * Button module
 */
class MatButtonModule {
  // NgModule for button functionality
}

/**
 * Toggle button group container
 */
class MatButtonToggleGroup implements ControlValueAccessor {
  @Input() name: string;
  @Input() vertical: boolean;
  @Input() value: any;
  @Input() multiple: boolean;
  @Input() disabled: boolean;
  @Input() disabledInteractive: boolean;
  @Input() appearance: MatButtonToggleAppearance;
  @Input() hideSingleSelectionIndicator: boolean;
  @Input() hideMultipleSelectionIndicator: boolean;
  
  @Output() readonly change: EventEmitter<MatButtonToggleChange>;
  @Output() readonly valueChange: EventEmitter<any>;
  
  readonly buttonToggles: QueryList<MatButtonToggle>;
  readonly selected: MatButtonToggle | MatButtonToggle[];
  readonly _buttonToggles: QueryList<MatButtonToggle>;
  readonly dir: Direction;
  
  // ControlValueAccessor implementation
  writeValue(value: any): void;
  registerOnChange(fn: (value: any) => void): void;
  registerOnTouched(fn: any): void;
  setDisabledState(isDisabled: boolean): void;
}

/**
 * Individual toggle button
 */
class MatButtonToggle {
  @Input() ariaLabel: string;
  @Input() ariaLabelledby: string;
  @Input() id: string;
  @Input() name: string;
  @Input() value: any;
  @Input() tabIndex: number | null;
  @Input() appearance: MatButtonToggleAppearance;
  @Input() checked: boolean;
  @Input() disabled: boolean;
  @Input() disabledInteractive: boolean;
  @Input() disableRipple: boolean;
  
  @Output() readonly change: EventEmitter<MatButtonToggleChange>;
  
  readonly buttonId: string;
  readonly buttonToggleGroup: MatButtonToggleGroup;
  
  focus(options?: FocusOptions): void;
  toggle(): void;
  _markForCheck(): void;
  _getButtonName(): string | null;
  isSingleSelector(): boolean;
}

/**
 * Button toggle change event
 */
class MatButtonToggleChange {
  constructor(
    public source: MatButtonToggle,
    public value: any
  ) {}
}

type MatButtonToggleAppearance = 'legacy' | 'standard';

/**
 * Button toggle configuration interface
 */
interface MatButtonToggleDefaultOptions {
  appearance?: MatButtonToggleAppearance;
  hideSingleSelectionIndicator?: boolean;
  hideMultipleSelectionIndicator?: boolean;
  disabledInteractive?: boolean;
}

/**
 * Injection tokens for button toggle configuration
 */
const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatButtonToggleDefaultOptions>;
const MAT_BUTTON_TOGGLE_GROUP: InjectionToken<MatButtonToggleGroup>;

/**
 * Button toggle module
 */
class MatButtonToggleModule {
  // NgModule for button toggle functionality
}

/**
 * Badge directive for adding notifications to elements
 */
class MatBadge {
  @Input('matBadge') content: string | number | undefined | null;
  @Input('matBadgePosition') position: MatBadgePosition;
  @Input('matBadgeSize') size: MatBadgeSize;
  @Input('matBadgeColor') color: ThemePalette;
  @Input('matBadgeOverlap') overlap: boolean;
  @Input('matBadgeDisabled') disabled: boolean;
  @Input('matBadgeHidden') hidden: boolean;
  @Input('matBadgeDescription') description: string;
  
  readonly _id: number;
  
  getBadgeElement(): HTMLElement | undefined;
  isAbove(): boolean;
  isAfter(): boolean;
}

type MatBadgePosition = 
  | 'above after' | 'above before' | 'below after' | 'below before'
  | 'before' | 'after' | 'above' | 'below';
  
type MatBadgeSize = 'small' | 'medium' | 'large';

/**
 * Badge module
 */
class MatBadgeModule {
  // NgModule for badge functionality
}

/**
 * Basic chip component
 */
class MatChip {
  @Input() color: ThemePalette;
  @Input() disabled: boolean;
  @Input() disableRipple: boolean;
  @Input() tabIndex: number;
  @Input() role: string | null;
  @Input() id: string;
  @Input() ariaLabel: string | null;
  @Input() ariaDescription: string | null;
  
  @Output() readonly destroyed: EventEmitter<MatChipEvent>;
  
  readonly basicChipAttrName: string;
  readonly _hasFocus: boolean;
  
  focus(): void;
  remove(): void;
  selectViaInteraction(): void;
}

/**
 * Selectable chip component
 */
class MatChipOption extends MatChip {
  @Input() selectable: boolean;
  @Input() selected: boolean;
  
  @Output() readonly selectionChange: EventEmitter<MatChipSelectionChange>;
  
  readonly chipListbox: MatChipListbox;
  readonly selectable: boolean;
  readonly ariaSelected: string | null;
  
  select(): void;
  deselect(): void;
  selectViaInteraction(): void;
  toggleSelected(isUserInput?: boolean): boolean;
}

/**
 * Chip row for grid layout
 */
class MatChipRow extends MatChip {
  @Input() editable: boolean;
  
  @Output() readonly edited: EventEmitter<MatChipEditedEvent>;
  
  readonly _isEditing: boolean;
  
  _startEdit(): void;
  _finishEdit(): void;
}

/**
 * Container for basic chips
 */
class MatChipSet {
  @Input() disabled: boolean;
  @Input() role: string | null;
  @Input() tabIndex: number;
  
  readonly chips: QueryList<MatChip>;
  readonly focused: boolean;
  readonly empty: boolean;
  
  focus(): void;
}

/**
 * Container for selectable chips
 */
class MatChipListbox extends MatChipSet {
  @Input() multiple: boolean;
  @Input() value: any;
  @Input() selectable: boolean;
  @Input() compareWith: (o1: any, o2: any) => boolean;
  @Input() required: boolean;
  @Input() hideSingleSelectionIndicator: boolean;
  
  @Output() readonly change: EventEmitter<MatChipListboxChange>;
  
  readonly selected: MatChipOption | MatChipOption[];
  readonly chipSelectionChanges: Observable<MatChipSelectionChange>;
  
  selectAll(): void;
  deselectAll(): void;
}

/**
 * Container for editable chips in grid layout
 */
class MatChipGrid extends MatChipSet {
  @Input() placeholder: string;
  @Input() required: boolean;
  @Input() value: any;
  @Input() errorStateMatcher: ErrorStateMatcher;
  
  @Output() readonly change: EventEmitter<MatChipGridChange>;
  @Output() readonly valueChange: EventEmitter<any>;
  
  readonly chipRows: QueryList<MatChipRow>;
  readonly errorState: boolean;
  readonly empty: boolean;
  readonly focused: boolean;
  readonly shouldLabelFloat: boolean;
  readonly stateChanges: Observable<void>;
  readonly ngControl: NgControl | null;
  
  focus(): void;
  onContainerClick(): void;
  setDescribedByIds(ids: string[]): void;
}

/**
 * Input directive for adding chips
 */
class MatChipInput {
  @Input('matChipInputFor') chipGrid: MatChipGrid;
  @Input('matChipInputAddOnBlur') addOnBlur: boolean;
  @Input('matChipInputSeparatorKeyCodes') separatorKeyCodes: readonly number[] | ReadonlySet<number>;
  @Input() placeholder: string;
  @Input() id: string;
  @Input() disabled: boolean;
  
  @Output('matChipInputTokenEnd') readonly chipEnd: EventEmitter<MatChipInputEvent>;
  
  readonly focused: boolean;
  readonly empty: boolean;
  
  focus(): void;
  clear(): void;
}

/**
 * Chip avatar directive
 */
class MatChipAvatar {
  // Avatar content for chips
}

/**
 * Chip trailing icon directive
 */
class MatChipTrailingIcon {
  // Trailing icon content
}

/**
 * Chip remove directive
 */
class MatChipRemove {
  // Remove button for chips
}

/**
 * Chip edit input component
 */
class MatChipEditInput {
  constructor(
    private _elementRef: ElementRef<HTMLInputElement>,
    private _document: Document
  );
  
  initialize(initialValue: string): void;
  getNativeElement(): HTMLInputElement;
}

/**
 * Chip events and interfaces
 */
class MatChipEvent {
  constructor(public chip: MatChip) {}
}

class MatChipSelectionChange {
  constructor(
    public source: MatChipOption,
    public selected: boolean,
    public isUserInput: boolean = false
  ) {}
}

class MatChipListboxChange {
  constructor(
    public source: MatChipListbox,
    public value: any
  ) {}
}

class MatChipGridChange {
  constructor(
    public source: MatChipGrid,
    public value: any
  ) {}
}

class MatChipInputEvent {
  constructor(
    public input: HTMLInputElement,
    public value: string,
    public chipInput: MatChipInput
  ) {}
}

class MatChipEditedEvent {
  constructor(
    public chip: MatChipRow,
    public value: string
  ) {}
}

/**
 * Chip text control interface
 */
interface MatChipTextControl {
  id: string;
  placeholder: string;
  focused: boolean;
  empty: boolean;
  
  focus(): void;
}

/**
 * Chips module
 */
class MatChipsModule {
  // NgModule for chips functionality
}

/**
 * Linear progress bar component
 */
class MatProgressBar {
  @Input() color: ThemePalette;
  @Input() value: number;
  @Input() bufferValue: number;
  @Input() mode: ProgressBarMode;
  
  readonly _primaryTransform: () => { transform: string };
  readonly _bufferTransform: () => { transform: string };
  
  _primaryTransform(): { transform: string };
  _bufferTransform(): { transform: string } | null;
}

type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';

/**
 * Progress bar module
 */
class MatProgressBarModule {
  // NgModule for progress bar functionality
}

/**
 * Circular progress spinner component
 */
class MatProgressSpinner {
  @Input() color: ThemePalette;
  @Input() diameter: number;
  @Input() mode: ProgressSpinnerMode;
  @Input() strokeWidth: number;
  @Input() value: number;
  
  readonly _circleRadius: number;
  readonly _viewBox: string;
  readonly _strokeWidth: number;
  readonly _strokeDashArray: number;
  readonly _strokeDashOffset: string | null;
  readonly _squareSize: number;
  readonly _circleStrokeWidth: number;
  
  getCircumference(): number;
  getStrokeDashOffset(): string | null;
}

/**
 * Indeterminate spinner (alias for progress spinner)
 */
class MatSpinner extends MatProgressSpinner {
  constructor(elementRef: ElementRef<HTMLElement>);
}

type ProgressSpinnerMode = 'determinate' | 'indeterminate';

/**
 * Progress spinner module
 */
class MatProgressSpinnerModule {
  // NgModule for progress spinner functionality
}

/**
 * Icon component for displaying icons from various sources
 */
class MatIcon {
  @Input('aria-hidden') ariaHidden: boolean;
  @Input() color: ThemePalette;
  @Input() svgIcon: string;
  @Input() fontSet: string;
  @Input() fontIcon: string;
  @Input() inline: boolean;
  
  readonly _usingFontIcon: () => boolean;
  readonly _previousFontSetClass: string[];
  readonly _previousFontIconClass: string;
  
  _usingFontIcon(): boolean;
  _setSvgElement(svg: SVGElement): void;
  _clearSvgElement(): void;
  _updateFontIconClasses(): void;
  getHostElement(): HTMLElement;
}

/**
 * Icon registry service for managing icon sources
 */
class MatIconRegistry {
  private _svgIconConfigs: Map<string, SvgIconConfig>;
  private _iconSetConfigs: Map<string, SvgIconConfig>;
  private _cachedIconsByUrl: Map<string, SVGElement>;
  private _inProgressUrlFetches: Map<string, Observable<string>>;
  private _fontCssClassesByAlias: Map<string, string>;
  private _resolvers: IconResolver[];
  private _defaultFontSetClass: string[];
  
  addSvgIcon(iconName: string, url: SafeResourceUrl, options?: IconOptions): this;
  addSvgIconInNamespace(namespace: string, iconName: string, url: SafeResourceUrl, options?: IconOptions): this;
  addSvgIconLiteral(iconName: string, literal: SafeHtml, options?: IconOptions): this;
  addSvgIconLiteralInNamespace(namespace: string, iconName: string, literal: SafeHtml, options?: IconOptions): this;
  addSvgIconSet(url: SafeResourceUrl, options?: IconOptions): this;
  addSvgIconSetInNamespace(namespace: string, url: SafeResourceUrl, options?: IconOptions): this;
  addSvgIconSetLiteral(literal: SafeHtml, options?: IconOptions): this;
  addSvgIconSetLiteralInNamespace(namespace: string, literal: SafeHtml, options?: IconOptions): this;
  addSvgIconResolver(resolver: IconResolver): this;
  registerFontClassAlias(alias: string, className?: string): this;
  classNameForFontAlias(alias: string): string;
  setDefaultFontSetClass(...classNames: string[]): this;
  getDefaultFontSetClass(): string[];
  getSvgIconFromUrl(safeUrl: SafeResourceUrl): Observable<SVGElement>;
  getNamedSvgIcon(name: string, namespace?: string): Observable<SVGElement>;
}

/**
 * Icon options interface
 */
interface IconOptions {
  viewBox?: string;
}

/**
 * Icon resolver function type
 */
type IconResolver = (name: string) => SafeResourceUrl | SafeResourceUrlWithIconOptions | null;

/**
 * Safe resource URL with icon options
 */
interface SafeResourceUrlWithIconOptions {
  url: SafeResourceUrl;
  options: IconOptions;
}

/**
 * Icon module
 */
class MatIconModule {
  // NgModule for icon functionality
}

import { MatButtonModule } from '@angular/material/button';
import { MatBadgeModule } from '@angular/material/badge';
import { MatChipsModule } from '@angular/material/chips';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatIconModule } from '@angular/material/icon';

@Component({
  imports: [
    MatButtonModule,
    MatBadgeModule, 
    MatChipsModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatIconModule
  ],
  template: `
    <!-- Buttons -->
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button>Outlined</button>
    <button mat-flat-button color="accent">Flat</button>
    <button mat-fab color="warn">
      <mat-icon>add</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>edit</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>favorite</mat-icon>
    </button>

    <!-- Badge -->
    <span matBadge="4" matBadgeOverlap="false">Text with a badge</span>
    <button mat-icon-button matBadge="15" matBadgeColor="warn">
      <mat-icon>home</mat-icon>
    </button>

    <!-- Button Toggle -->
    <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
      <mat-button-toggle value="bold">Bold</mat-button-toggle>
      <mat-button-toggle value="italic">Italic</mat-button-toggle>
      <mat-button-toggle value="underline">Underline</mat-button-toggle>
    </mat-button-toggle-group>

    <!-- Chips -->
    <mat-chip-listbox aria-label="Fish selection">
      <mat-chip-option>One fish</mat-chip-option>
      <mat-chip-option>Two fish</mat-chip-option>
      <mat-chip-option color="accent" selected>Accent fish</mat-chip-option>
      <mat-chip-option color="warn">Warn fish</mat-chip-option>
    </mat-chip-listbox>

    <!-- Progress Indicators -->
    <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    <mat-progress-bar mode="buffer" value="40" bufferValue="60"></mat-progress-bar>
    
    <mat-progress-spinner mode="determinate" value="75"></mat-progress-spinner>
    <mat-spinner></mat-spinner>
  `
})
export class ButtonsIndicatorsExample {}