@liwe3/webcomponents 1.1.0 → 1.1.10

package/src/AITextEditor.ts

@@ -7,11 +7,14 @@ const AI_TEXT_EDITOR_API_KEY = 'ai-text-editor-api-key';
 
 export interface AITextEditorConfig {
   apiKey?: string;
-  suggestionDelay?: number;
+  suggestionDelay?: number; // Delay in seconds before showing AI suggestions
   systemPrompt?: string;
   apiEndpoint?: string;
   modelName?: string;
   context?: string;
+  embedded?: boolean;
+  onStatusChange?: (hasApiKey: boolean) => void;
+  onLoadingChange?: (isLoading: boolean) => void;
 }
 
 export class AITextEditorElement extends HTMLElement {
@@ -28,11 +31,15 @@ export class AITextEditorElement extends HTMLElement {
   private isShowingSuggestion: boolean = false;
 
   private apiKey: string = '';
-  private suggestionDelay: number = 1000;
+  private suggestionDelay: number = 1000; // Stored in milliseconds (default: 1000ms = 1 second)
   private systemPrompt: string = "You are a helpful writing assistant. Continue the user's text naturally and coherently. Provide 1-3 sentences that would logically follow their writing. Keep the same tone and style. Do not repeat what they've already written.";
   private apiEndpoint: string = 'https://api.openai.com/v1/chat/completions';
   private modelName: string = 'gpt-3.5-turbo';
   private context: string = '';
+  
+  private embedded: boolean = false;
+  private onStatusChangeCallback?: (hasApiKey: boolean) => void;
+  private onLoadingChangeCallback?: (isLoading: boolean) => void;
 
   constructor() {
     super();
@@ -70,6 +77,10 @@ export class AITextEditorElement extends HTMLElement {
           background: #777;
           z-index: 10;
         }
+        
+        :host([embedded]) .editor-status {
+          display: none;
+        }
 
         .editor-wrapper {
           position: relative;
@@ -97,12 +108,21 @@ export class AITextEditorElement extends HTMLElement {
           box-sizing: border-box;
           min-height: auto;
         }
+        
+        :host([embedded]) .editor {
+          border: none;
+          border-radius: 0;
+        }
 
         .editor:focus {
           outline: none;
           border-color: #4facfe;
           box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
         }
+        
+        :host([embedded]) .editor:focus {
+          box-shadow: none;
+        }
 
         .editor-background {
           position: absolute;
@@ -125,11 +145,20 @@ export class AITextEditorElement extends HTMLElement {
           color: transparent;
           box-sizing: border-box;
         }
+        
+        :host([embedded]) .editor-background {
+          border: none;
+          border-radius: 0;
+        }
 
         .editor-wrapper:focus-within .editor-background {
           background: white;
           border-color: #4facfe;
         }
+        
+        :host([embedded]) .editor-wrapper:focus-within .editor-background {
+          border-color: transparent;
+        }
 
         .suggestion-text {
           color: #bbb;
@@ -148,6 +177,10 @@ export class AITextEditorElement extends HTMLElement {
           z-index: 10;
           display: none;
         }
+        
+        :host([embedded]) .loading {
+          display: none !important;
+        }
 
         .loading.show {
           display: block;
@@ -357,6 +390,11 @@ export class AITextEditorElement extends HTMLElement {
     } catch (error) {
       this.hideLoading();
       this.showError('Failed to get AI suggestion: ' + (error as Error).message);
+      this.dispatchEvent(new CustomEvent('oncompletionerror', {
+        detail: { error: (error as Error).message },
+        bubbles: true,
+        composed: true
+      }));
     }
   }
 
@@ -488,6 +526,9 @@ export class AITextEditorElement extends HTMLElement {
    */
   private showLoading(): void {
     this.loading.classList.add('show');
+    if (this.onLoadingChangeCallback) {
+      this.onLoadingChangeCallback(true);
+    }
   }
 
   /**
@@ -495,6 +536,9 @@ export class AITextEditorElement extends HTMLElement {
    */
   private hideLoading(): void {
     this.loading.classList.remove('show');
+    if (this.onLoadingChangeCallback) {
+      this.onLoadingChangeCallback(false);
+    }
   }
 
   /**
@@ -552,6 +596,9 @@ export class AITextEditorElement extends HTMLElement {
     this.apiKey = key;
     this._saveApiKey();
     this.editorStatus.style.backgroundColor = this.apiKey ? '#4caf50' : '#777';
+    if (this.onStatusChangeCallback) {
+      this.onStatusChangeCallback(!!this.apiKey);
+    }
   }
 
   /**
@@ -661,6 +708,54 @@ export class AITextEditorElement extends HTMLElement {
     return this.context;
   }
 
+  /**
+   * Configure the editor with callbacks and embedded mode
+   */
+  configure(config: Partial<AITextEditorConfig>): void {
+    if (config.embedded !== undefined) {
+      this.embedded = config.embedded;
+      if (this.embedded) {
+        this.setAttribute('embedded', '');
+      } else {
+        this.removeAttribute('embedded');
+      }
+    }
+    
+    if (config.onStatusChange) {
+      this.onStatusChangeCallback = config.onStatusChange;
+      // Immediately call with current status
+      this.onStatusChangeCallback(!!this.apiKey);
+    }
+    
+    if (config.onLoadingChange) {
+      this.onLoadingChangeCallback = config.onLoadingChange;
+    }
+    
+    if (config.apiKey !== undefined) {
+      this.setApiKey(config.apiKey);
+    }
+    
+    if (config.suggestionDelay !== undefined) {
+      this.setSuggestionDelay(config.suggestionDelay);
+    }
+    
+    if (config.systemPrompt !== undefined) {
+      this.setSystemPrompt(config.systemPrompt);
+    }
+    
+    if (config.apiEndpoint !== undefined) {
+      this.setApiEndpoint(config.apiEndpoint);
+    }
+    
+    if (config.modelName !== undefined) {
+      this.setModelName(config.modelName);
+    }
+    
+    if (config.context !== undefined) {
+      this.setContext(config.context);
+    }
+  }
+
   /**
    * Saves settings to localStorage
    */

package/src/ButtonToolbar.ts

@@ -0,0 +1,302 @@
+/**
+ * ButtonToolbar Web Component
+ * A customizable toolbar with groups of buttons, supporting horizontal/vertical orientation
+ */
+
+export type ButtonToolbarItem = {
+  id: string;
+  label?: string;
+  icon?: string; // SVG content or icon class
+  image?: string; // Image URL
+  type?: 'default' | 'info' | 'error' | 'warn' | 'success';
+  disabled?: boolean;
+  tooltip?: string;
+  action?: string; // Optional action name to dispatch
+};
+
+export type ButtonToolbarGroup = {
+  id?: string;
+  items: ButtonToolbarItem[];
+  class?: string; // Optional CSS class for the group
+};
+
+export class ButtonToolbarElement extends HTMLElement {
+  declare shadowRoot: ShadowRoot;
+  private _groups: ButtonToolbarGroup[] = [];
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes(): string[] {
+    return ['orientation', 'groups'];
+  }
+
+  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void {
+    if (oldValue !== newValue) {
+      this.render();
+    }
+  }
+
+  get orientation(): 'horizontal' | 'vertical' {
+    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';
+  }
+
+  set orientation(value: 'horizontal' | 'vertical') {
+    this.setAttribute('orientation', value);
+  }
+
+  get groups(): ButtonToolbarGroup[] {
+    const groupsAttr = this.getAttribute('groups');
+    if (groupsAttr) {
+      try {
+        return JSON.parse(groupsAttr);
+      } catch (e) {
+        console.error('Invalid groups format:', e);
+        return [];
+      }
+    }
+    return this._groups;
+  }
+
+  set groups(value: ButtonToolbarGroup[]) {
+    this._groups = value;
+    // Also update attribute for consistency, but be careful with large data
+    // For now, let's just render. If we want to sync property to attribute:
+    // this.setAttribute('groups', JSON.stringify(value));
+    // But usually for complex data, property is preferred source of truth if set directly.
+    
+    // SmartSelect implementation:
+    // set options ( opts: SelectOption[] ) {
+    //   this.setAttribute( 'options', JSON.stringify( opts ) );
+    // }
+    
+    // I'll follow SmartSelect pattern for consistency
+    this.setAttribute('groups', JSON.stringify(value));
+  }
+
+  connectedCallback(): void {
+    this.render();
+  }
+
+  private handleButtonClick(item: ButtonToolbarItem, event: Event): void {
+    if (item.disabled) return;
+    
+    this.dispatchEvent(new CustomEvent('button-click', {
+      detail: {
+        id: item.id,
+        action: item.action || item.id,
+        originalEvent: event,
+        item
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private render(): void {
+    if (!this.shadowRoot) return;
+
+    const style = `
+      :host {
+        display: block;
+        font-family: var(--liwe3-font-family, system-ui, -apple-system, sans-serif);
+      }
+
+      .toolbar {
+        display: flex;
+        gap: var(--liwe3-toolbar-gap, 0.5rem);
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .toolbar.horizontal {
+        flex-direction: row;
+        align-items: center;
+      }
+
+      .toolbar.vertical {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .group {
+        display: flex;
+        gap: 1px; /* Gap between buttons in a group */
+        background-color: var(--liwe3-toolbar-group-bg, transparent);
+        border-radius: var(--liwe3-toolbar-radius, 0.375rem);
+        overflow: hidden;
+      }
+
+      .toolbar.horizontal .group {
+        flex-direction: row;
+      }
+
+      .toolbar.vertical .group {
+        flex-direction: column;
+      }
+
+      .button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: var(--liwe3-button-padding, 0.5rem 1rem);
+        border: none;
+        cursor: pointer;
+        font-size: var(--liwe3-button-font-size, 0.875rem);
+        line-height: 1.25;
+        transition: all 0.2s;
+        background-color: var(--liwe3-button-bg, #f3f4f6);
+        color: var(--liwe3-button-color, #1f2937);
+        min-height: var(--liwe3-button-height, 2.5rem);
+      }
+
+      .button:hover:not(:disabled) {
+        filter: brightness(0.95);
+      }
+
+      .button:active:not(:disabled) {
+        filter: brightness(0.9);
+      }
+
+      .button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      /* Button Types */
+      .button.default {
+        background-color: var(--liwe3-button-default-bg, #f3f4f6);
+        color: var(--liwe3-button-default-color, #1f2937);
+      }
+
+      .button.info {
+        background-color: var(--liwe3-button-info-bg, #3b82f6);
+        color: var(--liwe3-button-info-color, #ffffff);
+      }
+
+      .button.error {
+        background-color: var(--liwe3-button-error-bg, #ef4444);
+        color: var(--liwe3-button-error-color, #ffffff);
+      }
+
+      .button.warn {
+        background-color: var(--liwe3-button-warn-bg, #f59e0b);
+        color: var(--liwe3-button-warn-color, #ffffff);
+      }
+      
+      .button.success {
+        background-color: var(--liwe3-button-success-bg, #10b981);
+        color: var(--liwe3-button-success-color, #ffffff);
+      }
+
+      /* Content styling */
+      .icon {
+        width: 1.25em;
+        height: 1.25em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      .icon svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+      }
+
+      .image {
+        width: 1.5em;
+        height: 1.5em;
+        object-fit: cover;
+        border-radius: 50%;
+      }
+      
+      /* Group styling - rounded corners logic */
+      .toolbar.horizontal .group .button:first-child {
+        border-top-left-radius: var(--liwe3-toolbar-radius, 0.375rem);
+        border-bottom-left-radius: var(--liwe3-toolbar-radius, 0.375rem);
+      }
+      
+      .toolbar.horizontal .group .button:last-child {
+        border-top-right-radius: var(--liwe3-toolbar-radius, 0.375rem);
+        border-bottom-right-radius: var(--liwe3-toolbar-radius, 0.375rem);
+      }
+      
+      .toolbar.vertical .group .button:first-child {
+        border-top-left-radius: var(--liwe3-toolbar-radius, 0.375rem);
+        border-top-right-radius: var(--liwe3-toolbar-radius, 0.375rem);
+      }
+      
+      .toolbar.vertical .group .button:last-child {
+        border-bottom-left-radius: var(--liwe3-toolbar-radius, 0.375rem);
+        border-bottom-right-radius: var(--liwe3-toolbar-radius, 0.375rem);
+      }
+    `;
+
+    const renderButton = (item: ButtonToolbarItem) => {
+      const btn = document.createElement('button');
+      btn.className = `button ${item.type || 'default'}`;
+      if (item.disabled) btn.disabled = true;
+      if (item.tooltip) btn.title = item.tooltip;
+      
+      btn.onclick = (e) => this.handleButtonClick(item, e);
+
+      if (item.icon) {
+        const iconSpan = document.createElement('span');
+        iconSpan.className = 'icon';
+        // Check if it's an SVG string or just a class name (simple heuristic)
+        if (item.icon.trim().startsWith('<')) {
+          iconSpan.innerHTML = item.icon;
+        } else {
+          // Assuming it might be a class name if not SVG
+          const i = document.createElement('i');
+          i.className = item.icon;
+          iconSpan.appendChild(i);
+        }
+        btn.appendChild(iconSpan);
+      }
+
+      if (item.image) {
+        const img = document.createElement('img');
+        img.src = item.image;
+        img.className = 'image';
+        img.alt = item.label || '';
+        btn.appendChild(img);
+      }
+
+      if (item.label) {
+        const span = document.createElement('span');
+        span.textContent = item.label;
+        btn.appendChild(span);
+      }
+
+      return btn;
+    };
+
+    const container = document.createElement('div');
+    container.className = `toolbar ${this.orientation}`;
+
+    this._groups.forEach(group => {
+      const groupDiv = document.createElement('div');
+      groupDiv.className = `group ${group.class || ''}`;
+      
+      group.items.forEach(item => {
+        groupDiv.appendChild(renderButton(item));
+      });
+      
+      container.appendChild(groupDiv);
+    });
+
+    this.shadowRoot.innerHTML = `<style>${style}</style>`;
+    this.shadowRoot.appendChild(container);
+  }
+}
+
+export const defineButtonToolbar = (): void => {
+  if (typeof window !== 'undefined' && !customElements.get('liwe3-button-toolbar')) {
+    customElements.define('liwe3-button-toolbar', ButtonToolbarElement);
+  }
+};