@liwe3/webcomponents 1.1.0 → 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 };

package/src/MarkdownPreview.ts

@@ -0,0 +1,213 @@
+/**
+ * MarkdownPreview Web Component
+ * Renders markdown content using a dynamically loaded library
+ */
+
+export class MarkdownPreviewElement extends HTMLElement {
+  declare shadowRoot: ShadowRoot;
+  private _libUrl: string = 'https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js';
+  private _value: string = '';
+  private _isLibLoaded: boolean = false;
+  private _isLoadingLib: boolean = false;
+  private container!: HTMLElement;
+
+  static get observedAttributes() {
+    return ['lib-url', 'value'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.render();
+  }
+
+  connectedCallback() {
+    this.loadLibrary();
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (oldValue === newValue) return;
+
+    if (name === 'lib-url') {
+      this._libUrl = newValue;
+      this._isLibLoaded = false; // Reset loaded state if URL changes
+      this.loadLibrary();
+    } else if (name === 'value') {
+      // Only update internal value if it differs, to avoid loops if we were to reflect
+      if (this._value !== newValue) {
+        this.value = newValue;
+      }
+    }
+  }
+
+  get libUrl(): string {
+    return this._libUrl;
+  }
+
+  set libUrl(value: string) {
+    this.setAttribute('lib-url', value);
+  }
+
+  get value(): string {
+    return this._value;
+  }
+
+  set value(content: string) {
+    this._value = content;
+    this.updateContent();
+    // We do NOT reflect to attribute to avoid performance issues with large content
+  }
+
+  private render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+          line-height: 1.6;
+          color: #333;
+        }
+        .markdown-body {
+          box-sizing: border-box;
+          min-width: 200px;
+          max-width: 980px;
+          margin: 0 auto;
+          padding: 15px;
+        }
+        img {
+          max-width: 100%;
+        }
+        pre {
+          background-color: #f6f8fa;
+          border-radius: 6px;
+          padding: 16px;
+          overflow: auto;
+        }
+        code {
+          font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+          font-size: 85%;
+          background-color: rgba(175, 184, 193, 0.2);
+          padding: 0.2em 0.4em;
+          border-radius: 6px;
+        }
+        pre code {
+          background-color: transparent;
+          padding: 0;
+        }
+        blockquote {
+          border-left: 0.25em solid #d0d7de;
+          color: #656d76;
+          padding: 0 1em;
+          margin: 0;
+        }
+        table {
+          border-spacing: 0;
+          border-collapse: collapse;
+          display: block;
+          width: max-content;
+          max-width: 100%;
+          overflow: auto;
+        }
+        table th,
+        table td {
+          padding: 6px 13px;
+          border: 1px solid #d0d7de;
+        }
+        table tr {
+          background-color: #ffffff;
+          border-top: 1px solid #d8dee4;
+        }
+        table tr:nth-child(2n) {
+          background-color: #f6f8fa;
+        }
+      </style>
+      <div class="markdown-body" id="content"></div>
+    `;
+    this.container = this.shadowRoot.getElementById('content') as HTMLElement;
+  }
+
+  private async loadLibrary() {
+    if (this._isLibLoaded || this._isLoadingLib) return;
+
+    // Check if marked is already available globally
+    if (typeof (window as any).marked === 'function' || (typeof (window as any).marked === 'object' && typeof (window as any).marked.parse === 'function')) {
+      this._isLibLoaded = true;
+      this.updateContent();
+      return;
+    }
+
+    this._isLoadingLib = true;
+
+    try {
+      const script = document.createElement('script');
+      script.src = this._libUrl;
+      script.onload = () => {
+        // Double check if marked is available
+        if (!(window as any).marked) {
+          console.error('MarkdownPreview: Library loaded but window.marked is undefined');
+          this.container.innerHTML = `<div style="color: red;">Error: Markdown library loaded but not found. Try a different URL.</div>`;
+          this._isLoadingLib = false;
+          return;
+        }
+        this._isLibLoaded = true;
+        this._isLoadingLib = false;
+        this.updateContent();
+        this.dispatchEvent(new CustomEvent('library-loaded'));
+      };
+      script.onerror = () => {
+        this._isLoadingLib = false;
+        console.error(`Failed to load markdown library from ${this._libUrl}`);
+        this.container.innerHTML = `<div style="color: red;">Error loading markdown library</div>`;
+      };
+      document.head.appendChild(script);
+    } catch (e) {
+      this._isLoadingLib = false;
+      console.error(e);
+    }
+  }
+
+  private updateContent() {
+    if (!this._isLibLoaded) {
+      if (!this._isLoadingLib) {
+        this.loadLibrary();
+      }
+      return;
+    }
+
+    const marked = (window as any).marked;
+    if (!marked) {
+       console.error('Marked library loaded but not found in window');
+       return;
+    }
+
+    try {
+      // Handle both function style (older marked) and object style (newer marked)
+      const parse = typeof marked === 'function' ? marked : marked.parse;
+      if (typeof parse === 'function') {
+        const html = parse(this._value);
+        // If it returns a promise (async), handle it
+        if (html instanceof Promise) {
+          html.then((res: string) => {
+            this.container.innerHTML = res;
+          });
+        } else {
+          this.container.innerHTML = html;
+        }
+      } else {
+        console.error('Marked parse function not found');
+        this.container.innerHTML = `<div style="color: red;">Error: marked.parse not found</div>`;
+      }
+    } catch (e) {
+      console.error('Error parsing markdown:', e);
+      this.container.innerHTML = `<div style="color: red;">Error parsing markdown</div>`;
+    }
+  }
+}
+
+export const defineMarkdownPreview = (tagName: string = 'liwe3-markdown-preview') => {
+  if (typeof window !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, MarkdownPreviewElement);
+  }
+};
+
+defineMarkdownPreview();