Content Components

/**
 * Interactive button component with comprehensive theming
 */
interface Button extends HTMLElement {
  /** Button theme variants */
  theme: string;
  /** Button is disabled */
  disabled: boolean;
  /** Button automatically focuses */
  autofocus: boolean;
  /** Button type for forms */
  type: 'button' | 'submit' | 'reset';

  /** Programmatically click the button */
  click(): void;
  /** Focus the button */
  focus(): void;
  /** Remove focus from button */
  blur(): void;
}

/**
 * Content card container with elevation and theming
 */
interface Card extends HTMLElement {
  /** Card theme variant */
  theme: string;
}

/**
 * User avatar component with multiple display modes
 */
interface Avatar extends HTMLElement {
  /** User's full name for generating initials */
  name: string;
  /** Custom abbreviation override */
  abbr: string;
  /** Image URL for avatar photo */
  img: string;
  /** Color index for theme variants (0-6) */
  colorIndex: number;
  /** Avatar size theme */
  theme: string;
}

/**
 * Container for multiple avatars with overflow management
 */
interface AvatarGroup extends HTMLElement {
  /** Array of avatar items data */
  items: AvatarItem[];
  /** Maximum number of avatars to display */
  maxItemsVisible: number;
  /** Overlay items beyond limit */
  overlayClass: string;

  /** Get total number of items */
  getItemCount(): number;
}

/**
 * Avatar item data structure
 */
interface AvatarItem {
  name?: string;
  abbr?: string;
  img?: string;
  colorIndex?: number;
}

/**
 * SVG icon component with icon library integration
 */
interface Icon extends HTMLElement {
  /** Icon identifier (e.g., 'vaadin:user', 'lumo:clock') */
  icon: string;
  /** Icon size theme variant */
  size: string;
  /** Custom SVG content */
  svg: string;
}

/**
 * Progress indicator component with determinate and indeterminate modes
 */
interface ProgressBar extends HTMLElement {
  /** Current progress value (0-1 for percentage) */
  value: number;
  /** Minimum value */
  min: number;
  /** Maximum value */
  max: number;
  /** Indeterminate loading state */
  indeterminate: boolean;
  /** Progress bar theme variant */
  theme: string;
}

/**
 * Collapsible details component with summary
 */
interface Details extends HTMLElement {
  /** Details section is expanded */
  opened: boolean;
  /** Summary text content */
  summary: string;
  /** Details theme variant */
  theme: string;

  /** Toggle opened/closed state */
  toggle(): void;
  /** Open the details section */
  open(): void;
  /** Close the details section */
  close(): void;
}

/**
 * Summary header for details component
 */
interface DetailsSummary extends HTMLElement {
  /** Summary is expandable */
  expandable: boolean;
}

/**
 * File upload component with comprehensive features
 */
interface Upload extends HTMLElement {
  /** Upload endpoint URL */
  target: string;
  /** HTTP method for upload */
  method: string;
  /** Additional form data */
  formDataName: string;
  /** Accepted file types */
  accept: string;
  /** Maximum number of files */
  maxFiles: number;
  /** Maximum file size in bytes */
  maxFileSize: number;
  /** Currently uploaded files */
  files: UploadFile[];
  /** Disable drag-and-drop */
  nodrop: boolean;

  /** Upload all files */
  uploadFiles(): void;
  /** Abort all uploads */
  abort(): void;
}

/**
 * Individual file in upload component
 */
interface UploadFile extends HTMLElement {
  /** File object */
  file: File;
  /** Upload progress (0-1) */
  progress: number;
  /** Upload is complete */
  complete: boolean;
  /** Upload has error */
  error: boolean;
  /** Upload is currently in progress */
  uploading: boolean;
  /** Retry failed upload */
  retry(): void;
  /** Remove file from upload */
  remove(): void;
}

/**
 * Message input field with integrated send functionality
 * Provides expanding text area and submit controls
 */
interface MessageInput extends HTMLElement {
  /** Current message text */
  value: string;
  /** Input field is disabled */
  disabled: boolean;
  /** Internationalization configuration */
  i18n: MessageInputI18n;

  /** Focus the input field */
  focus(): void;
}

/**
 * Message input internationalization
 */
interface MessageInputI18n {
  /** Send button label */
  send: string;
  /** Input placeholder and aria-label */
  message: string;
}

import '@vaadin/message-input';

// Create message input
const messageInput = document.createElement('vaadin-message-input');

// Configure internationalization
messageInput.i18n = {
  send: 'Send',
  message: 'Type your message...'
};

// Listen for message submissions
messageInput.addEventListener('submit', (e) => {
  const message = e.detail.value;
  console.log('New message:', message);

  // Clear input after sending
  messageInput.value = '';
});

document.body.appendChild(messageInput);

/**
 * Ordered list of chat messages with user avatars and metadata
 * Supports message rendering with timestamps and user information
 */
interface MessageList extends HTMLElement {
  /** Array of message items */
  items: MessageListItem[];
  /** Parse message text as Markdown */
  markdown: boolean;
}

/**
 * Individual message configuration
 */
interface MessageListItem {
  /** Message text content */
  text: string;
  /** Message timestamp */
  time: string;
  /** User's full name */
  userName: string;
  /** User's initials/abbreviation */
  userAbbr: string;
  /** User's avatar image URL */
  userImg?: string;
  /** User's color index for avatar background */
  userColorIndex?: number;
  /** Message theme variant */
  theme?: string;
  /** CSS class names */
  className?: string;
}

import '@vaadin/message-list';

// Create message list
const messageList = document.createElement('vaadin-message-list');

// Enable markdown parsing
messageList.markdown = true;

// Configure messages
messageList.items = [
  {
    text: 'Hello everyone! 👋',
    time: 'yesterday',
    userName: 'Alice Cooper',
    userAbbr: 'AC',
    userColorIndex: 1
  },
  {
    text: 'Welcome to the team! Let me know if you need any **help**.',
    time: '2 hours ago',
    userName: 'Bob Smith',
    userAbbr: 'BS',
    userImg: '/avatars/bob.jpg',
    userColorIndex: 2
  },
  {
    text: 'Thanks! Looking forward to working with you all.',
    time: 'just now',
    userName: 'Charlie Davis',
    userAbbr: 'CD',
    userColorIndex: 3
  }
];

document.body.appendChild(messageList);

/**
 * Cookie consent banner for GDPR compliance
 * Shows consent request and manages user preferences
 */
interface CookieConsent extends HTMLElement {
  /** Consent banner position */
  position: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  /** Custom message text */
  message: string;
  /** Dismiss button text */
  dismiss: string;
  /** Learn more link text */
  learnMore: string;
  /** Learn more link URL */
  learnMoreLink: string;
  /** Cookie name for storing consent */
  cookieName: string;

  /** Show the consent banner */
  show(): void;
  /** Hide the consent banner */
  hide(): void;
}

import '@vaadin/cookie-consent';

// Create cookie consent banner
const cookieConsent = document.createElement('vaadin-cookie-consent');

// Configure the banner
cookieConsent.position = 'bottom';
cookieConsent.message = 'This website uses cookies to ensure you get the best experience.';
cookieConsent.dismiss = 'Got it!';
cookieConsent.learnMore = 'Learn more';
cookieConsent.learnMoreLink = 'https://example.com/privacy-policy';
cookieConsent.cookieName = 'cookie-consent';

// The banner will show automatically on first visit
document.body.appendChild(cookieConsent);