Basic Header with Dynamic Title
{
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
// Demo different titles
const titles = [
'MyService Status Page',
'Production Environment Status',
'API Health Dashboard',
'Global Infrastructure Status',
'🚀 Rocket Systems Monitor',
'Multi-Region Service Status'
];
let titleIndex = 0;
header.pageTitle = titles[titleIndex];
// Add event listeners
header.addEventListener('reportNewIncident', (event: CustomEvent) => {
console.log('Report incident clicked');
alert('Report Incident form would open here');
});
header.addEventListener('statusSubscribe', (event: CustomEvent) => {
console.log('Subscribe clicked');
alert('Subscribe modal would open here');
});
// Cycle through titles
setInterval(() => {
titleIndex = (titleIndex + 1) % titles.length;
header.pageTitle = titles[titleIndex];
}, 2000);
}}
>
Header with Configurable Buttons
{
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
header.pageTitle = 'Configurable Button States';
// Add properties to control button visibility
header.showReportButton = true;
header.showSubscribeButton = true;
const controls = document.createElement('div');
controls.className = 'demo-controls';
controls.innerHTML = `
`;
wrapperElement.appendChild(controls);
controls.querySelector('#toggleReport')?.addEventListener('click', () => {
header.showReportButton = !header.showReportButton;
});
controls.querySelector('#toggleSubscribe')?.addEventListener('click', () => {
header.showSubscribeButton = !header.showSubscribeButton;
});
controls.querySelector('#toggleBoth')?.addEventListener('click', () => {
header.showReportButton = false;
header.showSubscribeButton = false;
});
controls.querySelector('#showBoth')?.addEventListener('click', () => {
header.showReportButton = true;
header.showSubscribeButton = true;
});
}}
>
Header with Custom Branding
{
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
header.pageTitle = 'Enterprise Cloud Platform';
// Custom branding properties
header.brandColor = '#1976D2';
header.logoUrl = 'https://via.placeholder.com/120x40/1976D2/ffffff?text=LOGO';
header.customStyles = true;
// Simulate different brand states
const brands = [
{ title: 'Enterprise Cloud Platform', color: '#1976D2', logo: 'ENTERPRISE' },
{ title: 'StartUp SaaS Monitor', color: '#00BCD4', logo: 'STARTUP' },
{ title: 'Government Services Status', color: '#4CAF50', logo: 'GOV' },
{ title: 'Financial Systems Health', color: '#673AB7', logo: 'FINTECH' }
];
let brandIndex = 0;
setInterval(() => {
brandIndex = (brandIndex + 1) % brands.length;
const brand = brands[brandIndex];
header.pageTitle = brand.title;
header.brandColor = brand.color;
header.logoUrl = `https://via.placeholder.com/120x40/${brand.color.slice(1)}/ffffff?text=${brand.logo}`;
}, 3000);
}}
>
Header with Loading States
{
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
header.pageTitle = 'Loading State Demo';
header.loading = true;
// Simulate loading completion
setTimeout(() => {
header.loading = false;
header.pageTitle = 'Status Page Loaded';
}, 2000);
// Add loading toggle
const controls = document.createElement('div');
controls.className = 'demo-controls';
controls.innerHTML = `
`;
wrapperElement.appendChild(controls);
controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
header.loading = !header.loading;
if (header.loading) {
header.pageTitle = 'Loading...';
setTimeout(() => {
header.loading = false;
header.pageTitle = 'Status Page Ready';
}, 2000);
}
});
}}
>
Header with Event Tracking
{
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
header.pageTitle = 'Event Tracking Demo';
let reportCount = 0;
let subscribeCount = 0;
// Create counter display
const counterDisplay = document.createElement('div');
counterDisplay.style.marginTop = '16px';
counterDisplay.style.fontSize = '14px';
counterDisplay.innerHTML = `
Report Clicks: 0
Subscribe Clicks: 0
`;
wrapperElement.appendChild(counterDisplay);
header.addEventListener('reportNewIncident', () => {
reportCount++;
counterDisplay.querySelector('#reportCount').textContent = reportCount.toString();
console.log(`Report incident clicked ${reportCount} times`);
});
header.addEventListener('statusSubscribe', () => {
subscribeCount++;
counterDisplay.querySelector('#subscribeCount').textContent = subscribeCount.toString();
console.log(`Subscribe clicked ${subscribeCount} times`);
});
}}
>
`;