App Modal

<app-modal id="myModal" title="Confirm Delete" message="Are you sure you want to delete this item?" button1-text="Delete" button2-text="Cancel" button1-css="background: #ef4444;" ></app-modal> <script> const modal = document.getElementById('myModal'); // Show modal modal.open = true; // Listen for button events modal.addEventListener('modal-action1', () => { console.log('Deleted!'); }); modal.addEventListener('modal-action2', () => { console.log('Cancelled'); }); </script>

<app-modal id="slottedModal" title="Custom Content" button1-text="Got it"> <p>This content is <strong>slotted</strong> into the modal.</p> <ul> <li>Custom HTML</li> <li>Full flexibility</li> </ul> </app-modal>

import { showModal } from '@manufosela/app-modal'; showModal({ title: 'Hello!', message: 'Basic modal dialog.', button1Text: 'OK' });

showModal({ title: 'Confirm Action', message: 'Delete this item?', button1Text: 'Delete', button2Text: 'Cancel', button1Css: 'background: #ef4444;', button1Action: () => console.log('Deleted!'), button2Action: () => console.log('Cancelled.') });

showModal({ title: 'Save Changes?', message: 'You have unsaved changes.', button1Text: 'Save', button2Text: 'Discard', button3Text: 'Cancel', button1Css: 'background: #22c55e;', button2Css: 'background: #ef4444;', button1Action: () => console.log('Saved!'), button2Action: () => console.log('Discarded.'), button3Action: () => console.log('Cancelled.') });

// Small modal showModal({ title: 'Small', message: 'Max-width 300px.', maxWidth: '300px', button1Text: 'OK' }); // Large modal showModal({ title: 'Large', message: 'Max-width 600px.', maxWidth: '600px', button1Text: 'OK' });

// No header showModal({ message: 'No header.', showHeader: false, button1Text: 'Got it' }); // No footer showModal({ title: 'No Footer', message: 'Close with X or Escape.', showFooter: false });

<app-modal id="interceptModal" intercept-close modal-id="intercept-demo" title="Unsaved Changes" message="You have unsaved changes. Are you sure you want to close?" button1-text="Save & Close" button2-text="Discard" ></app-modal> <script> const modal = document.getElementById('interceptModal'); // Listen for close request (X button, Escape, overlay click) document.addEventListener('modal-closed-requested', (e) => { if (e.detail.modalId === 'intercept-demo') { // Ask for confirmation before closing if (confirm('Close without saving?')) { document.dispatchEvent(new CustomEvent('close-modal', { detail: { modalId: 'intercept-demo' } })); } } }); </script>

showModal({ title: 'Rich Content', message: ` <h3 style="margin:0">Features</h3> <ul> <li><strong>Bold</strong></li> <li><em>Italic</em></li> </ul> `, button1Text: 'Nice!' });