@liwe3/webcomponents 1.0.14 → 1.1.10

package/src/SmartSelect.ts

@@ -6,6 +6,7 @@
 export type SelectOption = {
   value: string;
   label: string;
+  image?: string;
 };
 
 export class SmartSelectElement extends HTMLElement {
@@ -699,6 +700,42 @@ export class SmartSelectElement extends HTMLElement {
           color: var(--option-selected-color, #1976d2);
         }
 
+        .option-content {
+          display: flex;
+          align-items: center;
+        }
+
+        .option-image {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          object-fit: cover;
+          margin-right: 8px;
+          flex-shrink: 0;
+        }
+
+        .tag-image {
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          object-fit: cover;
+          margin-right: 4px;
+          flex-shrink: 0;
+        }
+
+        .single-value {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .single-value-image {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          object-fit: cover;
+        }
+
         .no-options {
           padding: 8px 12px;
           color: var(--no-options-color, #6c757d);
@@ -712,11 +749,17 @@ export class SmartSelectElement extends HTMLElement {
             ${ this.multiple && this.selectedOptions.length > 0
         ? this.selectedOptions.map( option => `
                   <span class="tag">
+                    ${ option.image ? `<img src="${ option.image }" class="tag-image" alt="">` : '' }
                     ${ option.label }
                     <span class="remove-tag" data-value="${ option.value }">×</span>
                   </span>
                 `).join( '' )
-        : `<span>${ displayText }</span>`
+        : this.selectedOptions.length > 0
+          ? `<div class="single-value">
+               ${ this.selectedOptions[ 0 ].image ? `<img src="${ this.selectedOptions[ 0 ].image }" class="single-value-image" alt="">` : '' }
+               <span>${ this.selectedOptions[ 0 ].label }</span>
+             </div>`
+          : `<span>${ displayText }</span>`
       }
           </div>
           <div class="arrow ${ this.isOpen ? 'open' : '' }"></div>
@@ -739,7 +782,10 @@ export class SmartSelectElement extends HTMLElement {
                     class="option ${ this.selectedOptions.find( selected => selected.value === option.value ) ? 'selected' : '' } ${ index === this.focusedIndex ? 'focused' : '' }"
                     data-value="${ option.value }"
                   >
-                    ${ option.label }
+                    <div class="option-content">
+                      ${ option.image ? `<img src="${ option.image }" class="option-image" alt="">` : '' }
+                      <span>${ option.label }</span>
+                    </div>
                   </div>
                 `).join( '' )
           : '<div class="no-options">No options available</div>'

package/src/Toast.ts

@@ -5,6 +5,8 @@
 
 export type ToastType = 'info' | 'warning' | 'error' | 'success';
 
+export type ToastPosition = 'TL' | 'T' | 'TR' | 'BL' | 'B' | 'BR';
+
 export type ToastButton = {
   label: string;
   onClick: () => void;
@@ -18,6 +20,7 @@ export type ToastConfig = {
   buttons?: ToastButton[];
   closable?: boolean; // Show close X button
   duration?: number; // Auto-dismiss after x milliseconds (0 = no auto-dismiss, default: 5000ms)
+  position?: ToastPosition; // Toast container position (default: 'TR')
   onClose?: () => void;
 };
 
@@ -60,12 +63,26 @@ export class ToastElement extends HTMLElement {
   }
 
   get title (): string {
-    return this.getAttribute( 'title' ) || this.config.title;
+    const attrTitle = this.getAttribute( 'title' );
+    const configTitle = this.config.title;
+
+    // If no title is provided or empty, use capitalized type
+    if ( ( !attrTitle || attrTitle.trim() === '' ) && ( !configTitle || configTitle.trim() === '' ) ) {
+      const type = this.type;
+      return type.charAt( 0 ).toUpperCase() + type.slice( 1 );
+    }
+
+    return attrTitle || configTitle;
   }
 
   set title ( value: string ) {
-    this.setAttribute( 'title', value );
-    this.config.title = value;
+    if ( value && value.trim() !== '' ) {
+      this.setAttribute( 'title', value );
+      this.config.title = value;
+    } else {
+      this.removeAttribute( 'title' );
+      this.config.title = '';
+    }
   }
 
   get text (): string {
@@ -160,7 +177,13 @@ export class ToastElement extends HTMLElement {
     }
 
     // Sync config to attributes
-    this.title = config.title;
+    if ( config.title && config.title.trim() !== '' ) {
+      this.title = config.title;
+    } else {
+      // Clear title if not provided or empty
+      this.removeAttribute( 'title' );
+      this.config.title = '';
+    }
     this.text = config.text;
     if ( config.type ) this.type = config.type;
     if ( config.icon !== undefined ) this.icon = config.icon;
@@ -681,50 +704,89 @@ const defineToast = ( tagName: string = 'liwe3-toast' ): void => {
 defineToast();
 
 /**
- * Default container ID for toast notifications
+ * Base container ID prefix for toast notifications
+ */
+const CONTAINER_ID_PREFIX = 'liwe3-toast-container';
+
+/**
+ * Gets the container positioning styles based on position
  */
-const DEFAULT_CONTAINER_ID = 'liwe3-toast-container';
+const getContainerStyles = ( position: ToastPosition ): { top?: string; bottom?: string; left?: string; right?: string; alignItems: string } => {
+  switch ( position ) {
+    case 'TL':
+      return { top: '20px', left: '20px', alignItems: 'flex-start' };
+    case 'T':
+      return { top: '20px', left: '50%', alignItems: 'center' };
+    case 'TR':
+      return { top: '20px', right: '20px', alignItems: 'flex-end' };
+    case 'BL':
+      return { bottom: '20px', left: '20px', alignItems: 'flex-start' };
+    case 'B':
+      return { bottom: '20px', left: '50%', alignItems: 'center' };
+    case 'BR':
+      return { bottom: '20px', right: '20px', alignItems: 'flex-end' };
+    default:
+      return { top: '20px', right: '20px', alignItems: 'flex-end' };
+  }
+};
 
 /**
- * Creates or gets the toast container element
+ * Creates or gets the toast container element for the specified position
  */
-const getToastContainer = (): HTMLElement => {
-  let container = document.getElementById( DEFAULT_CONTAINER_ID );
+const getToastContainer = ( position: ToastPosition = 'TR' ): HTMLElement => {
+  const containerId = `${ CONTAINER_ID_PREFIX }-${ position.toLowerCase() }`;
+  let container = document.getElementById( containerId );
 
   if ( !container ) {
     container = document.createElement( 'div' );
-    container.id = DEFAULT_CONTAINER_ID;
+    container.id = containerId;
     container.style.position = 'fixed';
-    container.style.top = '20px';
-    container.style.right = '20px';
     container.style.zIndex = '99999';
     container.style.display = 'flex';
     container.style.flexDirection = 'column';
     container.style.maxWidth = '400px';
     container.style.pointerEvents = 'none';
 
+    // Apply position-specific styles
+    const styles = getContainerStyles( position );
+    if ( styles.top ) container.style.top = styles.top;
+    if ( styles.bottom ) container.style.bottom = styles.bottom;
+    if ( styles.left ) container.style.left = styles.left;
+    if ( styles.right ) container.style.right = styles.right;
+    container.style.alignItems = styles.alignItems;
+
+    // For centered positions, apply transform to center horizontally
+    if ( position === 'T' || position === 'B' ) {
+      container.style.transform = 'translateX(-50%)';
+    }
+
     // Add media query styles for mobile and smooth transitions
-    const style = document.createElement( 'style' );
-    style.textContent = `
-      #${DEFAULT_CONTAINER_ID} > * {
-        margin-bottom: 12px;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        overflow: hidden;
-      }
+    const styleId = `${ containerId }-styles`;
+    if ( !document.getElementById( styleId ) ) {
+      const style = document.createElement( 'style' );
+      style.id = styleId;
+      style.textContent = `
+        #${ containerId } > * {
+          margin-bottom: 12px;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          overflow: hidden;
+        }
 
-      #${DEFAULT_CONTAINER_ID} > *:last-child {
-        margin-bottom: 0;
-      }
+        #${ containerId } > *:last-child {
+          margin-bottom: 0;
+        }
 
-      @media (max-width: 768px) {
-        #${DEFAULT_CONTAINER_ID} {
-          left: 20px !important;
-          right: 20px !important;
-          max-width: none !important;
+        @media (max-width: 768px) {
+          #${ containerId } {
+            left: 20px !important;
+            right: 20px !important;
+            max-width: none !important;
+            transform: none !important;
+          }
         }
-      }
-    `;
-    document.head.appendChild( style );
+      `;
+      document.head.appendChild( style );
+    }
 
     document.body.appendChild( container );
   }
@@ -747,12 +809,14 @@ const getToastContainer = (): HTMLElement => {
  *   title: 'Success!',
  *   text: 'Your changes have been saved.',
  *   type: 'success',
- *   duration: 5000
+ *   duration: 5000,
+ *   position: 'TR' // Optional: top-right (default)
  * });
  * ```
  */
 const toastAdd = ( config: ToastConfig ): ToastElement => {
-  const container = getToastContainer();
+  const position = config.position || 'TR';
+  const container = getToastContainer( position );
   const toast = document.createElement( 'liwe3-toast' ) as ToastElement;
 
   // Allow pointer events on individual toasts