User Interface

/**
 * Base view class for all UI components
 */
abstract class View {
  /**
   * Locale object for internationalization
   */
  readonly locale?: Locale;

  /**
   * DOM element representing this view
   */
  element?: HTMLElement;

  /**
   * Template definition for this view
   */
  template?: Template;

  /**
   * Whether the view has been rendered
   */
  isRendered: boolean;

  /**
   * Renders the view to DOM
   */
  render(): void;

  /**
   * Destroys the view and cleans up resources
   */
  destroy(): void;

  /**
   * Sets the template definition
   * @param definition - Template definition
   */
  setTemplate(definition: TemplateDefinition): void;

  /**
   * Registers a callback for template events
   * @param eventNameOrObject - Event name or object with event definitions
   * @param callback - Event callback function
   */
  on(eventNameOrObject: string | object, callback?: Function): void;

  /**
   * Fires an event
   * @param eventOrInfo - Event name or event info
   * @param args - Event arguments
   */
  fire(eventOrInfo: string | EventInfo, ...args: any[]): any;
}

/**
 * Template definition for view rendering
 */
interface TemplateDefinition {
  /**
   * HTML tag name
   */
  tag: string;

  /**
   * Element attributes
   */
  attributes?: Record<string, string | TemplateBinding>;

  /**
   * Element children
   */
  children?: (View | TemplateDefinition | string | TemplateBinding)[];

  /**
   * Text content
   */
  text?: string | TemplateBinding;

  /**
   * Event listeners
   */
  on?: Record<string, TemplateBinding>;
}

/**
 * Template binding for dynamic values
 */
interface TemplateBinding {
  /**
   * Observable object
   */
  to: string | object;

  /**
   * Property callback function
   */
  callback?: Function;
}

/**
 * Standard button view component
 */
class ButtonView extends View {
  /**
   * Button label text
   */
  label?: string;

  /**
   * Button icon (SVG string or icon name)
   */
  icon?: string;

  /**
   * Button tooltip text
   */
  tooltip?: string | boolean;

  /**
   * Whether the button is enabled
   */
  isEnabled: boolean;

  /**
   * Whether the button is visible
   */
  isVisible: boolean;

  /**
   * Whether the button is toggleable
   */
  isToggleable: boolean;

  /**
   * Whether the button is in "on" state (for toggleable buttons)
   */
  isOn: boolean;

  /**
   * CSS class name
   */
  class?: string;

  /**
   * Button type attribute
   */
  type: 'button' | 'submit' | 'reset';

  /**
   * Executes the button action
   */
  execute(): void;

  /**
   * Focuses the button
   */
  focus(): void;
}

/**
 * Switch button view for toggle functionality
 */
class SwitchButtonView extends ButtonView {
  /**
   * Whether the switch is on
   */
  isOn: boolean;
}

/**
 * List item button view for dropdown menus
 */
class ListItemButtonView extends ButtonView {
  /**
   * Whether this is the first item in the list
   */
  isFirst: boolean;

  /**
   * Whether this is the last item in the list
   */
  isLast: boolean;
}

/**
 * File dialog button for file uploads
 */
class FileDialogButtonView extends ButtonView {
  /**
   * Accepted file types
   */
  acceptedType: string;

  /**
   * Whether multiple files can be selected
   */
  allowMultipleFiles: boolean;

  /**
   * Opens the file dialog
   */
  open(): void;
}

import { ButtonView } from 'ckeditor5';

// Create a custom button
const button = new ButtonView();
button.set({
  label: 'My Button',
  icon: '<svg>...</svg>',
  tooltip: 'Click me!',
  isEnabled: true
});

button.render();

// Handle button click
button.on('execute', () => {
  console.log('Button clicked!');
});

/**
 * Toolbar view for organizing buttons and other UI elements
 */
class ToolbarView extends View {
  /**
   * Collection of toolbar items
   */
  readonly items: ViewCollection;

  /**
   * Focus tracker for keyboard navigation
   */
  readonly focusTracker: FocusTracker;

  /**
   * Keystroke handler for keyboard shortcuts
   */
  readonly keystrokes: KeystrokeHandler;

  /**
   * Toolbar options
   */
  options: ToolbarOptions;

  /**
   * Whether the toolbar should group items when space is limited
   */
  shouldGroupWhenFull: boolean;

  /**
   * Focuses the first focusable item
   */
  focus(): void;

  /**
   * Focuses the last focusable item
   */
  focusLast(): void;

  /**
   * Fills the toolbar with items from configuration
   * @param itemsConfig - Toolbar items configuration
   * @param factory - Component factory
   */
  fillFromConfig(itemsConfig: ToolbarConfigItem[], factory: ComponentFactory): void;
}

/**
 * Toolbar separator view
 */
class ToolbarSeparatorView extends View {
  /**
   * Creates a toolbar separator
   */
  constructor();
}

/**
 * Menu bar view for top-level navigation
 */
class MenuBarView extends View {
  /**
   * Collection of menu bar items
   */
  readonly items: ViewCollection;

  /**
   * Focus tracker
   */
  readonly focusTracker: FocusTracker;

  /**
   * Keystroke handler
   */
  readonly keystrokes: KeystrokeHandler;

  /**
   * Whether the menu bar is open
   */
  isOpen: boolean;

  /**
   * Opens the menu bar
   */
  open(): void;

  /**
   * Closes the menu bar
   */
  close(): void;
}

/**
 * Toolbar options interface
 */
interface ToolbarOptions {
  /**
   * Whether to group items when full
   */
  shouldGroupWhenFull?: boolean;

  /**
   * Whether the toolbar is floating
   */
  isFloating?: boolean;
}

/**
 * Dropdown view component
 */
class DropdownView extends View {
  /**
   * Dropdown button
   */
  readonly buttonView: ButtonView;

  /**
   * Dropdown panel
   */
  readonly panelView: DropdownPanelView;

  /**
   * Whether the dropdown is open
   */
  isOpen: boolean;

  /**
   * Opens the dropdown
   */
  open(): void;

  /**
   * Closes the dropdown
   */
  close(): void;

  /**
   * Focuses the dropdown
   */
  focus(): void;
}

/**
 * Dropdown panel view
 */
class DropdownPanelView extends View {
  /**
   * Panel position relative to button
   */
  position: 'auto' | 's' | 'se' | 'sw' | 'sme' | 'smw' | 'n' | 'ne' | 'nw' | 'nme' | 'nmw';

  /**
   * Whether the panel is visible
   */
  isVisible: boolean;

  /**
   * Collection of panel children
   */
  readonly children: ViewCollection;
}

/**
 * Split button view combining button and dropdown
 */
class SplitButtonView extends View {
  /**
   * Main action button
   */
  readonly actionView: ButtonView;

  /**
   * Dropdown arrow button
   */
  readonly arrowView: ButtonView;

  /**
   * Whether the dropdown is open
   */
  isOpen: boolean;

  /**
   * Opens the dropdown
   */
  open(): void;

  /**
   * Closes the dropdown
   */
  close(): void;
}

/**
 * Text input view component
 */
class InputTextView extends View {
  /**
   * Input value
   */
  value?: string;

  /**
   * Input placeholder text
   */
  placeholder?: string;

  /**
   * Whether the input is enabled
   */
  isEnabled: boolean;

  /**
   * Whether the input is readonly
   */
  isReadOnly: boolean;

  /**
   * Input type (text, password, email, etc.)
   */
  type: string;

  /**
   * Input ID attribute
   */
  id?: string;

  /**
   * Whether the input has an error
   */
  hasError: boolean;

  /**
   * Focuses the input
   */
  focus(): void;

  /**
   * Selects all input text
   */
  select(): void;
}

/**
 * Textarea view component
 */
class TextareaView extends View {
  /**
   * Textarea value
   */
  value?: string;

  /**
   * Placeholder text
   */
  placeholder?: string;

  /**
   * Whether the textarea is enabled
   */
  isEnabled: boolean;

  /**
   * Whether the textarea is readonly
   */
  isReadOnly: boolean;

  /**
   * Textarea ID attribute
   */
  id?: string;

  /**
   * Number of rows
   */
  rows?: number;

  /**
   * Focuses the textarea
   */
  focus(): void;
}

/**
 * Label view component for form inputs
 */
class LabelView extends View {
  /**
   * Label text
   */
  text?: string;

  /**
   * Associated input ID
   */
  for?: string;
}

/**
 * Form header view component
 */
class FormHeaderView extends View {
  /**
   * Header label
   */
  label?: string;

  /**
   * Header class
   */
  class?: string;
}

/**
 * Dialog view for modal interactions
 */
class DialogView extends View {
  /**
   * Dialog content view
   */
  readonly contentView: DialogContentView;

  /**
   * Dialog actions view
   */
  readonly actionsView: DialogActionsView;

  /**
   * Whether the dialog is visible
   */
  isVisible: boolean;

  /**
   * Dialog header label
   */
  headerLabel?: string;

  /**
   * Shows the dialog
   */
  show(): void;

  /**
   * Hides the dialog
   */
  hide(): void;

  /**
   * Focuses the dialog
   */
  focus(): void;
}

/**
 * Dialog content view
 */
class DialogContentView extends View {
  /**
   * Collection of content children
   */
  readonly children: ViewCollection;
}

/**
 * Dialog actions view for buttons
 */
class DialogActionsView extends View {
  /**
   * Collection of action buttons
   */
  readonly children: ViewCollection;
}

/**
 * List view component for collections
 */
class ListView extends View {
  /**
   * Collection of list items
   */
  readonly items: ViewCollection;

  /**
   * Focus tracker for keyboard navigation
   */
  readonly focusTracker: FocusTracker;

  /**
   * Keystroke handler
   */
  readonly keystrokes: KeystrokeHandler;

  /**
   * ARIA role for the list
   */
  role?: string;

  /**
   * Focuses the first item
   */
  focus(): void;

  /**
   * Focuses the last item
   */
  focusLast(): void;
}

/**
 * List item view
 */
class ListItemView extends View {
  /**
   * Collection of item children
   */
  readonly children: ViewCollection;

  /**
   * Whether the item is focused
   */
  isFocused: boolean;
}

/**
 * List separator view
 */
class ListSeparatorView extends View {
  /**
   * Creates a list separator
   */
  constructor();
}

/**
 * Collection of views with observable behavior
 */
class ViewCollection<T extends View = View> {
  /**
   * Number of items in collection
   */
  readonly length: number;

  /**
   * Adds a view to the collection
   * @param item - View to add
   * @param index - Position to insert at
   */
  add(item: T, index?: number): void;

  /**
   * Adds multiple views to the collection
   * @param items - Views to add
   * @param index - Position to start inserting at
   */
  addMany(items: Iterable<T>, index?: number): void;

  /**
   * Gets a view by index
   * @param index - View index
   * @returns View at index
   */
  get(index: number): T | null;

  /**
   * Removes a view from the collection
   * @param subject - View or index to remove
   * @returns Removed view
   */
  remove(subject: T | number): T;

  /**
   * Clears all views from the collection
   */
  clear(): void;

  /**
   * Iterator over views
   */
  [Symbol.iterator](): Iterator<T>;
}

/**
 * Focus tracker for managing focus within UI components
 */
class FocusTracker {
  /**
   * Whether focus is within tracked elements
   */
  readonly isFocused: boolean;

  /**
   * Currently focused element
   */
  readonly focusedElement: Element | null;

  /**
   * Adds an element to focus tracking
   * @param element - Element to track
   */
  add(element: Element): void;

  /**
   * Removes an element from focus tracking
   * @param element - Element to stop tracking
   */
  remove(element: Element): void;

  /**
   * Destroys the focus tracker
   */
  destroy(): void;
}

/**
 * Keystroke handler for keyboard event management
 */
class KeystrokeHandler {
  /**
   * Sets a keystroke handler
   * @param keystroke - Keystroke pattern
   * @param callback - Handler callback
   * @param options - Handler options
   */
  set(
    keystroke: string | string[],
    callback: Function,
    options?: { priority?: number }
  ): void;

  /**
   * Destroys the keystroke handler
   */
  destroy(): void;
}

import { 
  DropdownView, 
  ButtonView, 
  ListView, 
  ListItemView,
  ViewCollection 
} from 'ckeditor5';

// Create a custom dropdown with list
const dropdown = new DropdownView();
const button = new ButtonView();
const list = new ListView();

button.set({
  label: 'Choose Option',
  withText: true
});

// Add items to list
const items = ['Option 1', 'Option 2', 'Option 3'];
items.forEach(text => {
  const listItem = new ListItemView();
  const itemButton = new ButtonView();
  
  itemButton.set({
    label: text,
    withText: true
  });
  
  itemButton.on('execute', () => {
    console.log(`Selected: ${text}`);
    dropdown.close();
  });
  
  listItem.children.add(itemButton);
  list.items.add(listItem);
});

dropdown.buttonView = button;
dropdown.panelView.children.add(list);

dropdown.render();