@liwe3/webcomponents 1.0.14 → 1.1.10

package/src/Dialog.ts

@@ -0,0 +1,510 @@
+/**
+ * Dialog Web Component
+ * A customizable dialog with HTML body, custom buttons, and modal support
+ */
+
+export type DialogButton = {
+	label : string;
+	backgroundColor? : string;
+	onclick : ( dialog? : DialogElement ) => void;
+};
+
+export type DialogConfig = {
+	title? : string; // Default: "Dialog"
+	body : string; // HTML content
+	buttons? : DialogButton[];
+	modal? : boolean; // If true, dims background and prevents interaction outside dialog
+	escToClose? : boolean; // If true, Esc key closes dialog
+	clickToClose? : boolean; // If true, clicking outside closes dialog (like cancel)
+	fxAppear? : 'none' | 'fade' | 'slide'; // Animation effect when dialog appears (default: 'none')
+	fxSpeed? : number; // Animation duration in milliseconds (default: 1000)
+	onclose? : () => void;
+};
+
+export class DialogElement extends HTMLElement {
+	declare shadowRoot : ShadowRoot;
+	private config : DialogConfig = {
+		title: 'Dialog',
+		body: '',
+		modal: true,
+		escToClose: true,
+		clickToClose: true,
+		fxAppear: 'none',
+		fxSpeed: 1000,
+	};
+	private backdrop? : HTMLElement;
+	private escKeyHandler? : ( e : KeyboardEvent ) => void;
+	private eventsBound : boolean = false;
+
+	constructor () {
+		super();
+		this.attachShadow( { mode: 'open' } );
+	}
+
+	connectedCallback () : void {
+		this.render();
+		this.setupKeyboardListeners();
+	}
+
+	disconnectedCallback () : void {
+		this.removeKeyboardListeners();
+		if ( this.backdrop ) {
+			this.backdrop.remove();
+		}
+	}
+
+	/**
+	 * Shows the dialog with the given configuration
+	 */
+	show ( config : DialogConfig ) : void {
+		this.config = { ...this.config, ...config };
+		this.render();
+		this.setupKeyboardListeners();
+
+		// Create backdrop if modal is enabled
+		if ( this.config.modal ) {
+			this.createBackdrop();
+		}
+
+		// Add opening animation class
+		requestAnimationFrame( () => {
+			requestAnimationFrame( () => {
+				const dialog = this.shadowRoot.querySelector( '.dialog-container' ) as HTMLElement;
+				if ( dialog ) {
+					dialog.classList.add( 'show' );
+				}
+				if ( this.backdrop ) {
+					// Use inline style instead of class since backdrop is outside shadow DOM
+					this.backdrop.style.opacity = '1';
+				}
+			} );
+		} );
+	}
+
+	/**
+	 * Closes the dialog
+	 */
+	close () : void {
+		const dialog = this.shadowRoot.querySelector( '.dialog-container' ) as HTMLElement;
+
+		// Add closing animation
+		if ( dialog ) {
+			dialog.classList.add( 'closing' );
+		}
+		if ( this.backdrop ) {
+			this.backdrop.remove();
+			this.backdrop = undefined;
+		}
+
+		// Wait for animation to complete
+		const animationDuration = this.config.fxAppear === 'none' ? 0 : ( this.config.fxSpeed || 1000 );
+		setTimeout( () => {
+			this.removeKeyboardListeners();
+
+			this.dispatchEvent( new CustomEvent( 'close' ) );
+			if ( this.config.onclose ) {
+				this.config.onclose();
+			}
+			this.remove();
+		}, animationDuration );
+	}
+
+	/**
+	 * Creates the modal backdrop
+	 */
+	private createBackdrop () : void {
+		if ( this.backdrop ) return;
+
+		this.backdrop = document.createElement( 'div' );
+		this.backdrop.className = 'dialog-backdrop';
+		this.backdrop.style.position = 'fixed';
+		this.backdrop.style.top = '0';
+		this.backdrop.style.left = '0';
+		this.backdrop.style.width = '100%';
+		this.backdrop.style.height = '100%';
+		this.backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
+		this.backdrop.style.backdropFilter = 'blur(4px)';
+		( this.backdrop.style as any ).webkitBackdropFilter = 'blur(4px)'; // Safari support
+		this.backdrop.style.zIndex = '99998';
+		this.backdrop.style.opacity = '0';
+		this.backdrop.style.transition = 'opacity 0.3s ease';
+
+		// Handle click outside to close
+		if ( this.config.clickToClose ) {
+			this.backdrop.addEventListener( 'click', () => {
+				this.close();
+			} );
+		}
+
+		document.body.appendChild( this.backdrop );
+	}
+
+	/**
+	 * Sets up keyboard event listeners
+	 */
+	private setupKeyboardListeners () : void {
+		if ( this.config.escToClose ) {
+			this.escKeyHandler = ( e : KeyboardEvent ) => {
+				if ( e.key === 'Escape' ) {
+					this.close();
+				}
+			};
+			document.addEventListener( 'keydown', this.escKeyHandler );
+		}
+	}
+
+	/**
+	 * Removes keyboard event listeners
+	 */
+	private removeKeyboardListeners () : void {
+		if ( this.escKeyHandler ) {
+			document.removeEventListener( 'keydown', this.escKeyHandler );
+			this.escKeyHandler = undefined;
+		}
+	}
+
+	/**
+	 * Binds all event listeners
+	 */
+	private bindEvents () : void {
+		// Only bind events once to prevent duplicate event listeners
+		if ( this.eventsBound ) return;
+		this.eventsBound = true;
+
+		// Handle button clicks
+		this.shadowRoot.addEventListener( 'click', ( e ) => {
+			const target = e.target as HTMLElement;
+
+			if ( target.closest( '.close-button' ) ) {
+				this.close();
+			} else if ( target.closest( '.dialog-button' ) ) {
+				const buttonIndex = ( target.closest( '.dialog-button' ) as HTMLElement ).dataset.index;
+				if ( buttonIndex !== undefined ) {
+					const button = this.config.buttons?.[parseInt( buttonIndex, 10 )];
+					if ( button && button.onclick ) {
+						button.onclick( this );
+					}
+				}
+			}
+		} );
+
+		// Prevent scroll propagation to body when scrolling within dialog
+		const dialogContainer = this.shadowRoot.querySelector( '.dialog-container' ) as HTMLElement;
+		if ( dialogContainer ) {
+			dialogContainer.addEventListener( 'wheel', ( e ) => {
+				e.stopPropagation();
+			}, { passive: true } );
+		}
+	}
+
+	/**
+	 * Renders the component
+	 */
+	private render () : void {
+		const title = this.config.title || 'Dialog';
+		const buttons = this.config.buttons || [];
+		const animationSpeed = this.config.fxSpeed || 1000;
+		const animationDuration = `${animationSpeed}ms`;
+		const fxClass = this.config.fxAppear === 'fade'
+			? 'fx-fade'
+			: this.config.fxAppear === 'slide'
+			? 'fx-slide'
+			: '';
+
+		// Determine button layout:
+		// - If only 1 button, put it on the right
+		// - If 2+ buttons, put first on left, rest on right
+		const firstButton = buttons.length > 1 ? buttons[0] : null;
+		const rightButtons = buttons.length === 1 ? buttons : buttons.slice( 1 );
+
+		this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--font-family, var(--liwe3-font-family, Ubuntu, sans-serif));
+          font-size: var(--font-size, 14px);
+        }
+
+        .dialog-container {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          min-width: 400px;
+          max-width: 600px;
+          max-height: 80vh;
+          background: var(--dialog-background, var(--liwe3-surface-raised, white));
+          border-radius: var(--dialog-border-radius, var(--liwe3-border-radius, 8px));
+          box-shadow: var(--dialog-shadow, 0 10px 40px rgba(0, 0, 0, 0.2));
+          z-index: 99999;
+          display: flex;
+          flex-direction: column;
+          opacity: 1;
+          font-family: var(--font-family, var(--liwe3-font-family, Ubuntu, sans-serif));
+        }
+
+        /* Fade animation */
+        .dialog-container.fx-fade {
+          opacity: 0;
+          transition: opacity ${animationDuration} ease;
+        }
+
+        .dialog-container.fx-fade.show {
+          opacity: 1;
+        }
+
+        .dialog-container.fx-fade.closing {
+          opacity: 0;
+        }
+
+        /* Slide animation */
+        .dialog-container.fx-slide {
+          transform: translate(-50%, -100%);
+          opacity: 0;
+          transition: transform ${animationDuration} cubic-bezier(0.16, 1, 0.3, 1), opacity ${animationDuration} ease;
+        }
+
+        .dialog-container.fx-slide.show {
+          transform: translate(-50%, -50%);
+          opacity: 1;
+        }
+
+        .dialog-container.fx-slide.closing {
+          transform: translate(-50%, -100%);
+          opacity: 0;
+        }
+
+        .dialog-header {
+          padding: 0;
+          border-bottom: none;
+          flex-shrink: 0;
+        }
+
+        .dialog-title {
+          margin: 0;
+          padding: 20px 24px;
+          font-size: 20px;
+          font-weight: 600;
+          color: var(--dialog-title-color, var(--liwe3-text-inverse, white));
+          background: var(--dialog-title-background, linear-gradient(135deg,
+            var(--liwe3-mode1-500, #667eea),
+            var(--liwe3-mode4-500, #9f7aea)
+          ));
+          border-bottom: 1px solid var(--dialog-border-color, var(--liwe3-border-default, #e0e0e0));
+        }
+
+        .dialog-body {
+          padding: 24px;
+          overflow-y: auto;
+          flex: 1;
+          color: var(--dialog-text-color, var(--liwe3-text-mode2, #555));
+          line-height: 1.6;
+        }
+
+        .dialog-footer {
+          padding: 16px 24px;
+          border-top: 1px solid var(--dialog-border-color, var(--liwe3-border-default, #e0e0e0));
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 12px;
+          flex-shrink: 0;
+          background: var(--dialog-background, var(--liwe3-surface-raised, white));
+        }
+
+        .footer-left {
+          display: flex;
+          gap: 12px;
+        }
+
+        .footer-right {
+          display: flex;
+          gap: 12px;
+          margin-left: auto;
+        }
+
+        .dialog-button {
+          padding: 8px 20px;
+          border: 1px solid var(--dialog-button-border-color, var(--liwe3-border-default, #ccc));
+          border-radius: var(--dialog-button-border-radius, var(--liwe3-border-radius, 4px));
+          background: var(--dialog-button-background, var(--liwe3-surface-raised, white));
+          color: var(--dialog-button-color, var(--liwe3-text-mode1, #333));
+          font-size: 14px;
+          cursor: pointer;
+          transition: all 0.2s;
+          font-family: inherit;
+          font-weight: 500;
+        }
+
+        .dialog-button:hover {
+          background-color: var(--dialog-button-hover-background, var(--liwe3-hover-overlay, #f8f9fa));
+          border-color: var(--dialog-button-hover-border-color, var(--liwe3-border-strong, #999));
+        }
+
+        .dialog-button:active {
+          background-color: var(--dialog-button-active-background, var(--liwe3-active-overlay, #e9ecef));
+        }
+
+        .close-button {
+          padding: 8px 20px;
+          border: 1px solid var(--dialog-close-border-color, var(--liwe3-border-default, #ccc));
+          border-radius: var(--dialog-button-border-radius, var(--liwe3-border-radius, 4px));
+          background: var(--dialog-close-background, var(--liwe3-surface-raised, white));
+          color: var(--dialog-close-color, var(--liwe3-text-mode1, #333));
+          font-size: 14px;
+          cursor: pointer;
+          transition: all 0.2s;
+          font-family: inherit;
+          font-weight: 500;
+        }
+
+        .close-button:hover {
+          background-color: var(--dialog-close-hover-background, var(--liwe3-hover-overlay, #f8f9fa));
+          border-color: var(--dialog-close-hover-border-color, var(--liwe3-border-strong, #999));
+        }
+
+        @media (max-width: 768px) {
+          .dialog-container {
+            min-width: 90vw;
+            max-width: 90vw;
+          }
+        }
+      </style>
+
+      <div class="dialog-container ${fxClass}">
+        <div class="dialog-header">
+          <h2 class="dialog-title">${title}</h2>
+        </div>
+
+        <div class="dialog-body">
+          ${this.config.body}
+        </div>
+
+        <div class="dialog-footer">
+          ${
+			firstButton
+				? `
+            <div class="footer-left">
+              <button
+                class="dialog-button"
+                data-index="0"
+                style="${firstButton.backgroundColor ? `background-color: ${firstButton.backgroundColor}; color: white; border-color: ${firstButton.backgroundColor};` : ''}"
+              >
+                ${firstButton.label}
+              </button>
+            </div>
+          `
+				: ''
+		}
+
+          <div class="footer-right">
+            ${
+			rightButtons.map( ( button, index ) => `
+              <button
+                class="dialog-button"
+                data-index="${firstButton ? index + 1 : index}"
+                style="${button.backgroundColor ? `background-color: ${button.backgroundColor}; color: white; border-color: ${button.backgroundColor};` : ''}"
+              >
+                ${button.label}
+              </button>
+            ` ).join( '' )
+		}
+            ${buttons.length === 0 ? '<button class="close-button">Close</button>' : ''}
+          </div>
+        </div>
+      </div>
+    `;
+
+		this.bindEvents();
+	}
+}
+
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+const defineDialog = ( tagName : string = 'liwe3-dialog' ) : void => {
+	if ( typeof window !== 'undefined' && !window.customElements.get( tagName ) ) {
+		customElements.define( tagName, DialogElement );
+	}
+};
+
+// Auto-register with default tag name
+defineDialog();
+
+/**
+ * Container ID for dialogs
+ */
+const DIALOG_CONTAINER_ID = 'liwe3-dialog-container';
+
+/**
+ * Gets or creates the dialog container element
+ */
+const getDialogContainer = () : HTMLElement => {
+	let container = document.getElementById( DIALOG_CONTAINER_ID );
+
+	if ( !container ) {
+		container = document.createElement( 'div' );
+		container.id = DIALOG_CONTAINER_ID;
+		container.style.position = 'fixed';
+		container.style.zIndex = '99999';
+		container.style.pointerEvents = 'none';
+		document.body.appendChild( container );
+	}
+
+	return container;
+};
+
+/**
+ * Shows a dialog with the given configuration.
+ * This is the recommended way to display dialogs.
+ *
+ * @param config - The dialog configuration
+ * @returns The dialog element instance
+ *
+ * @example
+ * ```typescript
+ * import { dialogAdd } from '@liwe3/webcomponents';
+ *
+ * dialogAdd({
+ *   title: 'Delete File',
+ *   body: '<p>Are you sure you want to delete this file? This action cannot be undone.</p>',
+ *   buttons: [
+ *     {
+ *       label: 'Delete',
+ *       backgroundColor: '#dc3545',
+ *       onclick: (dialog) => {
+ *         console.log('File deleted');
+ *         dialog.close();
+ *       }
+ *     },
+ *     {
+ *       label: 'Cancel',
+ *       onclick: (dialog) => {
+ *         console.log('Cancelled');
+ *         dialog.close();
+ *       }
+ *     }
+ *   ],
+ *   modal: true,
+ *   escToClose: true,
+ *   clickToClose: true
+ * });
+ * ```
+ */
+const dialogAdd = ( config : DialogConfig ) : DialogElement => {
+	const container = getDialogContainer();
+	const dialog = document.createElement( 'liwe3-dialog' ) as DialogElement;
+
+	// Allow pointer events on individual dialogs
+	dialog.style.pointerEvents = 'auto';
+
+	// Show the dialog with the provided config
+	dialog.show( config );
+
+	// Add to container
+	container.appendChild( dialog );
+
+	return dialog;
+};
+
+export { defineDialog, dialogAdd };