Add product toast

<salla-add-product-toast></salla-add-product-toast>

this.duration = 5000; // 5 seconds

// Automatically applied
onmouseenter="this.isPaused=true"
onmouseleave="this.isPaused=false"

<div class="s-add-product-toast__progress">
  <div class="s-add-product-toast__progress-bar" style="width: 100%"></div>
</div>

{
  id: 123,
  name: "Product Name",
  image: "https://...",
  price: 99.99,
  originalPrice: 129.99,
  hasDiscount: true,
  isOnSale: true,
  quantity: 2,
  url: "/product/product-name",
  options: [
    { name: "Color", value: "Red" },
    { name: "Size", value: "Large" }
  ]
}

const toast = document.querySelector('salla-add-product-toast');
toast.open({
  id: 123,
  name: "Premium T-Shirt",
  image: "https://...",
  price: 49.99,
  originalPrice: 69.99,
  hasDiscount: true,
  quantity: 1,
  url: "/product/premium-t-shirt",
  options: [{ name: "Size", value: "M" }]
});

const toast = document.querySelector('salla-add-product-toast');
toast.close();

// Automatically triggered by Salla event
salla.event.on('Product Added', (data) => this.handleProductAdded(data));

// Returns formatted options
[
  { name: "Color", value: "Red" },
  { name: "Size", value: "Large" },
  { name: "Image", value: "uploaded.jpg", hideValue: true }
]

// Called automatically when toast opens
this.startAutoHideTimer();

// Called on close or disconnect
this.clearTimers();

connectedCallback() {
  if (window.app?.status === 'ready') {
    this.init();
  } else {
    document.addEventListener('theme::ready', () => this.init());
  }
}

disconnectedCallback() {
  this.clearTimers();
}

salla.event.on('Product Added', (data) => this.handleProductAdded(data));

this.querySelector('#toast-submit').addEventListener('click', () => {
  salla.cart.submit();
  this.close();
});

salla.lang.addBulk({
  'pages.cart.added_to_cart': { 
    ar: 'تمت الإضافة إلى سلة التسوق', 
    en: 'Added to Cart' 
  },
  'pages.cart.view_cart': { 
    ar: 'عرض السلة', 
    en: 'View Cart' 
  }
});

escapeHTML(str = '') {
  return String(str)
    .replace(/&/g, '&')
    .replace(/"/g, '"')
    .replace(/'/g, ''')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

try {
  const cartResponse = await salla.cart.api.details(null, ['options']);
  // Process cart data
} catch (error) {
  salla.log('Error processing product added event:', error);
}

const toast = document.querySelector('salla-add-product-toast');
toast.duration = 7000; // 7 seconds instead of default 5