DOM Element Access

/**
 * Gets the popup container which contains the backdrop and the popup itself
 * @returns The container element or null if no popup is displayed
 */
function getContainer(): HTMLElement | null;

/**
 * Gets the main popup element
 * @returns The popup element or null if no popup is displayed
 */
function getPopup(): HTMLElement | null;

// Style the container
const container = Swal.getContainer();
if (container) {
  container.style.zIndex = '99999';
}

// Add custom class to popup
const popup = Swal.getPopup();
if (popup) {
  popup.classList.add('my-custom-popup');
}

/**
 * Gets the popup title element
 * @returns The title element or null if no title is displayed
 */
function getTitle(): HTMLElement | null;

/**
 * Gets the DOM element where the html/text parameter is rendered
 * @returns The content container element or null if no content is displayed
 */
function getHtmlContainer(): HTMLElement | null;

/**
 * Gets the popup footer element
 * @returns The footer element or null if no footer is displayed
 */
function getFooter(): HTMLElement | null;

/**
 * Gets progress steps element
 * @returns The progress steps element or null if no progress steps are displayed
 */
function getProgressSteps(): HTMLElement | null;

// Animate title
const title = Swal.getTitle();
if (title) {
  title.style.animation = 'pulse 1s infinite';
}

// Modify content dynamically
const htmlContainer = Swal.getHtmlContainer();
if (htmlContainer) {
  htmlContainer.innerHTML += '<p>Additional content added dynamically</p>';
}

// Style footer
const footer = Swal.getFooter();
if (footer) {
  footer.style.backgroundColor = '#f8f9fa';
}

/**
 * Gets the icon element
 * @returns The icon element or null if no icon is displayed
 */
function getIcon(): HTMLElement | null;

/**
 * Gets the icon content element (without border)
 * @returns The icon content element or null if no icon is displayed
 */
function getIconContent(): HTMLElement | null;

/**
 * Gets the image element
 * @returns The image element or null if no image is displayed
 */
function getImage(): HTMLElement | null;

/**
 * Gets the timer progress bar element
 * @returns The progress bar element or null if timer progress bar is not enabled
 */
function getTimerProgressBar(): HTMLElement | null;

// Customize icon
const icon = Swal.getIcon();
if (icon) {
  icon.style.borderColor = '#ff6b6b';
  icon.style.color = '#ff6b6b';
}

// Add click handler to image
const image = Swal.getImage();
if (image) {
  image.addEventListener('click', () => {
    console.log('Image clicked!');
  });
}

// Style progress bar
const progressBar = Swal.getTimerProgressBar();
if (progressBar) {
  progressBar.style.backgroundColor = '#28a745';
}

/**
 * Gets the "Confirm" button element
 * @returns The confirm button element or null if not displayed
 */
function getConfirmButton(): HTMLButtonElement | null;

/**
 * Gets the "Deny" button element
 * @returns The deny button element or null if not displayed
 */
function getDenyButton(): HTMLButtonElement | null;

/**
 * Gets the "Cancel" button element
 * @returns The cancel button element or null if not displayed
 */
function getCancelButton(): HTMLButtonElement | null;

/**
 * Gets the close button element
 * @returns The close button element or null if not displayed
 */
function getCloseButton(): HTMLButtonElement | null;

/**
 * Gets the actions (buttons) wrapper element
 * @returns The actions wrapper element or null if no buttons are displayed
 */
function getActions(): HTMLElement | null;

// Style confirm button
const confirmBtn = Swal.getConfirmButton();
if (confirmBtn) {
  confirmBtn.style.backgroundColor = '#28a745';
  confirmBtn.style.borderRadius = '25px';
}

// Add custom event to deny button
const denyBtn = Swal.getDenyButton();
if (denyBtn) {
  denyBtn.addEventListener('mouseover', () => {
    denyBtn.textContent = 'Are you sure?';
  });
}

// Modify actions container
const actions = Swal.getActions();
if (actions) {
  actions.style.justifyContent = 'space-around';
}

/**
 * Gets all focusable elements in the popup
 * @returns Read-only array of focusable elements
 */
function getFocusableElements(): readonly HTMLElement[];

// Log all focusable elements
const focusable = Swal.getFocusableElements();
console.log('Focusable elements:', focusable);

// Add custom focus styling
focusable.forEach(element => {
  element.addEventListener('focus', (e) => {
    e.target.style.outline = '3px solid #007bff';
  });
  element.addEventListener('blur', (e) => {
    e.target.style.outline = '';
  });
});

/**
 * Clicks the "Confirm" button programmatically
 */
function clickConfirm(): void;

/**
 * Clicks the "Deny" button programmatically
 */
function clickDeny(): void;

/**
 * Clicks the "Cancel" button programmatically
 */
function clickCancel(): void;

// Auto-confirm after delay
Swal.fire({
  title: 'Auto-confirming in 5 seconds',
  timer: 5000,
  timerProgressBar: true,
  didOpen: () => {
    setTimeout(() => {
      Swal.clickConfirm();
    }, 5000);
  }
});

// Programmatic interaction based on conditions
if (userHasPermission) {
  Swal.clickConfirm();
} else {
  Swal.clickCancel();
}

// Complete custom styling
await Swal.fire({
  title: 'Custom Styled Popup',
  text: 'This popup has custom styling applied via DOM access',
  icon: 'info',
  didOpen: () => {
    // Style multiple elements
    const popup = Swal.getPopup();
    const title = Swal.getTitle();
    const content = Swal.getHtmlContainer();
    const confirmBtn = Swal.getConfirmButton();
    
    if (popup) popup.style.borderRadius = '15px';
    if (title) title.style.color = '#6c5ce7';
    if (content) content.style.fontSize = '1.1em';
    if (confirmBtn) {
      confirmBtn.style.background = 'linear-gradient(45deg, #6c5ce7, #a29bfe)';
      confirmBtn.style.border = 'none';
      confirmBtn.style.borderRadius = '25px';
    }
  }
});

// Dynamic content updates
Swal.fire({
  title: 'Loading...',
  html: 'Please wait while we process your request',
  didOpen: () => {
    const content = Swal.getHtmlContainer();
    let dots = 0;
    
    const interval = setInterval(() => {
      dots = (dots + 1) % 4;
      if (content) {
        content.innerHTML = `Please wait while we process your request${'.'.repeat(dots)}`;
      }
    }, 500);
    
    // Simulate async operation
    setTimeout(() => {
      clearInterval(interval);
      Swal.update({
        title: 'Complete!',
        html: 'Your request has been processed successfully',
        icon: 'success'
      });
    }, 3000);
  }
});