Professional Components

/**
 * Professional grid component with inline editing
 * Extends Grid with advanced editing capabilities
 */
interface GridPro extends Grid {
  /** Enable editing on single click instead of double-click */
  editOnClick: boolean;
  /** Currently edited item and column */
  editedItem: object | null;
  /** Enter edit mode preventing navigation */
  enterNextRow: boolean;
  /** Enter edit mode moving to next column */
  enterNextColumn: boolean;

  /** Start editing specific item and column */
  startEdit(item: object, column: GridProEditColumn): void;
  /** Stop editing with optional cancel */
  stopEdit(cancel?: boolean): void;
}

/**
 * Editable column for GridPro
 */
interface GridProEditColumn extends GridColumn {
  /** Edit mode renderer */
  editModeRenderer: (root: HTMLElement, column: GridProEditColumn, model: GridItemModel) => void;
  /** Editor type (text, select, checkbox, custom) */
  editorType: string;
  /** Editor options for select type */
  editorOptions: string[];
}

/**
 * Rich text editor with WYSIWYG capabilities
 * Based on Quill.js with Vaadin theming
 */
interface RichTextEditor extends HTMLElement {
  /** Editor content in Delta format */
  value: string;
  /** Editor content as HTML */
  htmlValue: string;
  /** Editor is read-only */
  readonly: boolean;
  /** Editor theme variant */
  theme: string;
  /** Maximum content length */
  maxLength: number;
  /** Minimum content length */
  minLength: number;

  /** Focus the editor */
  focus(): void;
  /** Get text content without formatting */
  getTextContent(): string;
  /** Insert content at current selection */
  insertText(text: string): void;
  /** Format current selection */
  format(format: string, value: any): void;
}

/**
 * Interactive charts component using Highcharts
 */
interface Chart extends HTMLElement {
  /** Chart configuration options */
  options: HighchartsOptions;
  /** Chart type shortcut */
  type: string;
  /** Chart title */
  title: string;
  /** Chart subtitle */
  subtitle: string;
  /** X-axis categories */
  categories: string[];
  /** Chart is currently loading */
  loading: boolean;

  /** Update chart with new options */
  update(): void;
  /** Show loading indicator */
  showLoading(): void;
  /** Hide loading indicator */
  hideLoading(): void;
  /** Export chart as image */
  exportChart(type: 'png' | 'jpeg' | 'pdf' | 'svg'): void;
}

/**
 * Complete CRUD interface with grid and form
 */
interface Crud extends HTMLElement {
  /** Data items for CRUD operations */
  items: object[];
  /** Fields to include in forms */
  include: string;
  /** Fields to exclude from forms */
  exclude: string;
  /** Size of the CRUD component */
  size: 'small' | 'medium' | 'large';
  /** Editor position */
  editorPosition: 'bottom' | 'aside';
  /** Disable delete functionality */
  noDelete: boolean;
  /** Disable edit functionality */
  noEdit: boolean;

  /** Edit specific item */
  editItem(item: object): void;
  /** Delete specific item */
  deleteItem(item: object): void;
  /** Create new item */
  newItem(): void;
  /** Save current changes */
  save(): void;
  /** Cancel current operation */
  cancel(): void;
}

/**
 * Responsive dashboard board layout
 */
interface Board extends HTMLElement {
  /** Enable board editing mode */
  editable: boolean;
}

/**
 * Board row container
 */
interface BoardRow extends HTMLElement {
  /** Row content items */
  items: BoardRowItem[];
}

/**
 * Interactive dashboard with widget management
 */
interface Dashboard extends HTMLElement {
  /** Dashboard items/widgets */
  items: DashboardItem[];
  /** Dashboard is in edit mode */
  editable: boolean;
  /** Minimum column width */
  minItemWidth: number;
  /** Maximum columns */
  maxColumns: number;
  /** Gap between items */
  gap: string;

  /** Add new widget */
  addItem(item: DashboardItem): void;
  /** Remove widget */
  removeItem(item: DashboardItem): void;
  /** Update widget */
  updateItem(item: DashboardItem): void;
}

/**
 * Dashboard widget item
 */
interface DashboardItem {
  /** Unique item identifier */
  id: string;
  /** Item title */
  title: string;
  /** Item column span */
  colspan: number;
  /** Item row span */
  rowspan: number;
  /** Item content component */
  component: string;
}

/**
 * GDPR cookie consent banner
 */
interface CookieConsent extends HTMLElement {
  /** Cookie name for storing consent */
  cookieName: string;
  /** Consent message text */
  message: string;
  /** Dismiss button text */
  dismiss: string;
  /** Learn more link text */
  learnMore: string;
  /** Learn more link URL */
  learnMoreLink: string;
  /** Banner position */
  position: 'bottom' | 'top';
}

/**
 * Interactive map component using OpenLayers
 */
interface Map extends HTMLElement {
  /** Map center coordinates [longitude, latitude] */
  center: [number, number];
  /** Map zoom level */
  zoom: number;
  /** Map projection */
  projection: string;

  /** Set map center */
  setCenter(coordinates: [number, number]): void;
  /** Set zoom level */
  setZoom(level: number): void;
  /** Add marker to map */
  addMarker(coordinates: [number, number], options?: MarkerOptions): void;
}