@bbki.ng/bb-msg-history 0.14.1 → 2.0.0

package/dist/component.d.ts

@@ -1,12 +1,14 @@
 import type { AuthorOptions, Message } from './types/index.js';
 export declare class BBMsgHistory extends HTMLElement {
     private _mutationObserver?;
+    private _debounceTimer?;
+    private _eventTracker;
+    private _messageProcessor;
+    private _scrollManager;
+    private _renderer;
     private _userAuthors;
     private _lastAuthor;
     private _lastGroupTimestamp;
-    private _scrollButtonVisible;
-    private _scrollListeners;
-    private _debounceTimer?;
     static get observedAttributes(): string[];
     constructor();
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
@@ -48,26 +50,12 @@ export declare class BBMsgHistory extends HTMLElement {
      */
     scrollToBottom(): this;
     /**
-     * Check if two messages can be grouped (same author, no timestamp conflict)
+     * Internal: Append a single message with incremental DOM update
      */
-    private _canGroupMessages;
     private _appendSingleMessage;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * Track an event listener for cleanup on disconnect
-     */
-    private _addTrackedListener;
-    /**
-     * Remove all tracked event listeners
-     */
-    private _cleanupListeners;
     private _setupMutationObserver;
     private render;
-    private _renderFullStructure;
-    private _updateContent;
-    private _updateLoadingOverlay;
     private _setupAfterRender;
-    private _renderEmpty;
-    private _setupScrollTracking;
 }

package/dist/component.js

@@ -1,21 +1,28 @@
-import { EMPTY_STYLES, LOADING_STYLES, MAIN_STYLES } from './const/styles.js';
 import { parseMessages } from './utils/message-parser.js';
-import { resolveAuthorConfig } from './utils/author-resolver.js';
-import { setupTooltips } from './utils/tooltip.js';
-import { buildMessageRowHtml, setupTooltipForElement } from './utils/message-builder.js';
-import { buildScrollButtonHtml } from './utils/scroll-button.js';
+import { EventTracker } from './utils/event-tracker.js';
+import { MessageProcessor } from './core/message-processor.js';
+import { ScrollManager } from './core/scroll-manager.js';
+import { Renderer } from './core/renderer.js';
 export class BBMsgHistory extends HTMLElement {
     static get observedAttributes() {
         return ['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'];
     }
     constructor() {
         super();
+        // Core modules
+        this._eventTracker = new EventTracker();
+        this._messageProcessor = new MessageProcessor();
+        // State
         this._userAuthors = new Map();
         this._lastAuthor = '';
-        this._scrollButtonVisible = false;
-        this._scrollListeners = [];
         this.attachShadow({ mode: 'open' });
-        // Create MutationObserver once - will be connected in connectedCallback
+        // Initialize renderer with shadow root
+        this._renderer = new Renderer(this.shadowRoot);
+        // Initialize scroll manager with callback
+        this._scrollManager = new ScrollManager(this, this.shadowRoot, this._eventTracker, _ => {
+            // Callback for visibility changes (state tracking if needed)
+        });
+        // Create MutationObserver for reactive rendering
         this._mutationObserver = new MutationObserver(() => {
             clearTimeout(this._debounceTimer);
             this._debounceTimer = setTimeout(() => this.render(), 50);
@@ -24,7 +31,7 @@ export class BBMsgHistory extends HTMLElement {
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue)
             return;
-        if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite' || name === 'hide-scroll-button') {
+        if (['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'].includes(name)) {
             this.render();
         }
     }
@@ -93,95 +100,28 @@ export class BBMsgHistory extends HTMLElement {
      * el.scrollToBottom();  // Scroll with smooth animation
      */
     scrollToBottom() {
-        if (this.hasAttribute('infinite')) {
-            return this;
-        }
-        const container = this.shadowRoot?.querySelector('.history');
-        if (!container) {
-            return this;
-        }
-        container.scrollTo({
-            top: container.scrollHeight,
-            behavior: 'smooth',
-        });
+        this._scrollManager.scrollToBottom();
         return this;
     }
     /**
-     * Check if two messages can be grouped (same author, no timestamp conflict)
+     * Internal: Append a single message with incremental DOM update
      */
-    _canGroupMessages(prev, curr) {
-        if (!prev)
-            return false;
-        if (prev.author !== curr.author)
-            return false;
-        // Different timestamps = break group
-        if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
-            return false;
-        }
-        return true;
-    }
     _appendSingleMessage(message) {
-        const container = this.shadowRoot.querySelector('.history');
-        // If empty state or no container, do full render first
-        if (!container) {
+        const result = this._renderer.appendSingleMessage(message, this._userAuthors, {
+            author: this._lastAuthor,
+            groupTimestamp: this._lastGroupTimestamp,
+        });
+        if (!result.success) {
+            // Container not ready, do full render
             this.render();
             return;
         }
-        const author = message.author;
-        const text = message.text;
-        const timestamp = message.timestamp;
-        const config = resolveAuthorConfig(author, this._userAuthors);
-        // Build previous message object for grouping check
-        const prevMessage = this._lastAuthor
-            ? { author: this._lastAuthor, text: '', timestamp: this._lastGroupTimestamp }
-            : null;
-        // Use unified grouping logic
-        const canGroupWithLast = this._canGroupMessages(prevMessage, message);
-        const isFirstFromAuthor = !canGroupWithLast;
-        this._lastAuthor = author;
-        const isSubsequent = !isFirstFromAuthor;
-        // Update group timestamp tracking (consistent with render())
-        if (isFirstFromAuthor) {
-            // Start new group
-            this._lastGroupTimestamp = timestamp;
-        }
-        else if (!this._lastGroupTimestamp && timestamp) {
-            // If no timestamp in group yet and current has one, use it
-            this._lastGroupTimestamp = timestamp;
-        }
-        // When appending, we assume this IS the last in group (for now)
-        // If another message from same author comes, we'll re-render
-        const isLastInGroup = true;
-        const groupTimestamp = this._lastGroupTimestamp;
-        // Use utility function to build message HTML
-        const msgHtml = buildMessageRowHtml(author, text, config, isSubsequent, groupTimestamp, isLastInGroup);
-        // Append to container
-        container.insertAdjacentHTML('beforeend', msgHtml);
-        // Setup tooltip for new element using utility function
-        const newWrapper = container.lastElementChild?.querySelector('.avatar-wrapper');
-        if (newWrapper) {
-            setupTooltipForElement(newWrapper);
-        }
-        // Smooth scroll to bottom (skip in infinite mode)
+        // Update state
+        this._lastAuthor = result.lastAuthor;
+        this._lastGroupTimestamp = result.lastGroupTimestamp;
+        // Scroll to bottom (skip in infinite mode)
         if (!this.hasAttribute('infinite')) {
-            container.scrollTo({
-                top: container.scrollHeight,
-                behavior: 'smooth',
-            });
-            // Hide scroll button since we're scrolling to bottom
-            if (this._scrollButtonVisible) {
-                this._scrollButtonVisible = false;
-                const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
-                if (scrollButton) {
-                    scrollButton.classList.remove('visible');
-                }
-                // Dispatch hide event (always, regardless of button visibility)
-                this.dispatchEvent(new CustomEvent('bb-scrollbuttonhide', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { visible: false }
-                }));
-            }
+            this._scrollManager.scrollToBottom();
         }
     }
     connectedCallback() {
@@ -191,26 +131,9 @@ export class BBMsgHistory extends HTMLElement {
     disconnectedCallback() {
         this._mutationObserver?.disconnect();
         clearTimeout(this._debounceTimer);
-        this._cleanupListeners();
-    }
-    /**
-     * Track an event listener for cleanup on disconnect
-     */
-    _addTrackedListener(el, type, fn) {
-        el.addEventListener(type, fn);
-        this._scrollListeners.push({ el, type, fn });
-    }
-    /**
-     * Remove all tracked event listeners
-     */
-    _cleanupListeners() {
-        this._scrollListeners.forEach(({ el, type, fn }) => {
-            el.removeEventListener(type, fn);
-        });
-        this._scrollListeners = [];
+        this._eventTracker.cleanup();
     }
     _setupMutationObserver() {
-        // Observer was already created in constructor, just need to connect it
         this._mutationObserver?.observe(this, {
             childList: true,
             characterData: true,
@@ -222,185 +145,30 @@ export class BBMsgHistory extends HTMLElement {
         if (messages.length === 0) {
             this._lastAuthor = '';
             this._lastGroupTimestamp = undefined;
-            this._renderEmpty();
+            this._renderer.renderEmpty(this.hasAttribute('loading'));
             return;
         }
-        // First pass: determine which messages are last in their group
-        const lastInGroupFlags = messages.map((msg, i) => {
-            const next = messages[i + 1];
-            return !next || !this._canGroupMessages(msg, next);
-        });
-        // Second pass: collect the timestamp for each group
-        // Use the first non-empty timestamp in the group
-        const groupTimestamps = new Map();
-        let currentGroupTimestamp;
-        messages.forEach((msg, i) => {
-            // Start of a new group
-            if (i === 0 || !this._canGroupMessages(messages[i - 1], msg)) {
-                currentGroupTimestamp = msg.timestamp;
-            }
-            else if (!currentGroupTimestamp && msg.timestamp) {
-                // If no timestamp yet and current msg has one, use it
-                currentGroupTimestamp = msg.timestamp;
-            }
-            // If this is the last message in the group, save the timestamp
-            if (lastInGroupFlags[i]) {
-                groupTimestamps.set(i, currentGroupTimestamp);
-                currentGroupTimestamp = undefined;
-            }
-        });
-        // Third pass: build HTML
-        let lastAuthor = '';
-        const messagesHtml = messages
-            .map((msg, i) => {
-            const { author, text } = msg;
-            const config = resolveAuthorConfig(author, this._userAuthors);
-            // Determine if this is a new author group (can't group with previous)
-            const isFirstFromAuthor = i === 0 || !this._canGroupMessages(messages[i - 1], msg);
-            lastAuthor = author;
-            const isSubsequent = !isFirstFromAuthor;
-            // Get timestamp if this is the last in group
-            const isLastInGroup = lastInGroupFlags[i];
-            const groupTimestamp = groupTimestamps.get(i);
-            // Use utility function to build message HTML
-            return buildMessageRowHtml(author, text, config, isSubsequent, groupTimestamp, isLastInGroup);
-        })
-            .join('');
+        // Process messages (single-pass algorithm)
+        const { processed, lastAuthor, lastGroupTimestamp } = this._messageProcessor.process(messages);
+        // Update state
         this._lastAuthor = lastAuthor;
-        // Check if we need to create or update the structure
-        const historyContainer = this.shadowRoot.querySelector('.history');
-        const needsFullSetup = !historyContainer;
-        if (needsFullSetup) {
-            // First render - create full structure
-            this._renderFullStructure(messagesHtml);
-        }
-        else {
-            // Update only - preserve DOM structure, just update content
-            this._updateContent(historyContainer, messagesHtml);
-        }
-    }
-    _renderFullStructure(messagesHtml) {
-        // Check if we should preserve scroll position before re-rendering
-        const existingContainer = this.shadowRoot.querySelector('.history');
-        const wasAtBottom = existingContainer
-            ? existingContainer.scrollHeight - existingContainer.scrollTop - existingContainer.clientHeight < 50
-            : true; // Default to true for initial render
-        const loadingOverlay = this.hasAttribute('loading')
-            ? `<div class="loading-overlay" role="status" aria-label="Loading messages">
-          <div class="loading-spinner"></div>
-        </div>`
-            : '';
+        this._lastGroupTimestamp = lastGroupTimestamp;
+        // Render messages
+        const isLoading = this.hasAttribute('loading');
         const hideScrollButton = this.hasAttribute('hide-scroll-button');
-        this.shadowRoot.innerHTML = `
-      <style>${MAIN_STYLES}${LOADING_STYLES}</style>
-      <div class="history" role="log" aria-live="polite" aria-label="Message history">
-        ${messagesHtml}
-      </div>
-      ${hideScrollButton ? '' : buildScrollButtonHtml()}
-      ${loadingOverlay}
-    `;
+        const { wasAtBottom } = this._renderer.render(processed, this._userAuthors, isLoading, hideScrollButton);
+        // Setup scroll tracking and other post-render tasks
         this._setupAfterRender(wasAtBottom);
     }
-    _updateContent(historyContainer, messagesHtml) {
-        // Preserve scroll position before update
-        const scrollContainer = historyContainer;
-        const wasAtBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight < 50;
-        // Update messages content only
-        historyContainer.innerHTML = messagesHtml;
-        // Update loading overlay
-        this._updateLoadingOverlay();
-        // Restore scroll position or scroll to bottom if we were there
-        if (wasAtBottom) {
-            scrollContainer.scrollTop = scrollContainer.scrollHeight;
-        }
-        // Re-setup tooltips for new content
-        setupTooltips(this.shadowRoot);
-    }
-    _updateLoadingOverlay() {
-        const existingOverlay = this.shadowRoot.querySelector('.loading-overlay');
-        const shouldShow = this.hasAttribute('loading');
-        if (shouldShow && !existingOverlay) {
-            const overlay = document.createElement('div');
-            overlay.className = 'loading-overlay';
-            overlay.setAttribute('role', 'status');
-            overlay.setAttribute('aria-label', 'Loading messages');
-            overlay.innerHTML = '<div class="loading-spinner"></div>';
-            this.shadowRoot.appendChild(overlay);
-        }
-        else if (!shouldShow && existingOverlay) {
-            existingOverlay.remove();
-        }
-    }
     _setupAfterRender(shouldScrollToBottom = true) {
         requestAnimationFrame(() => {
-            const container = this.shadowRoot.querySelector('.history');
-            const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
+            const container = this._renderer.getHistoryContainer();
+            const scrollButton = this._renderer.getScrollButton();
             const isInfinite = this.hasAttribute('infinite');
             if (container && !isInfinite) {
-                if (shouldScrollToBottom) {
-                    container.scrollTop = container.scrollHeight;
-                }
-                this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
-            }
-            if (scrollButton && !isInfinite) {
-                scrollButton.addEventListener('click', () => {
-                    container?.scrollTo({
-                        top: container.scrollHeight,
-                        behavior: 'smooth',
-                    });
-                });
+                // Initialize scroll manager
+                this._scrollManager.init(container, scrollButton, shouldScrollToBottom);
             }
-            setupTooltips(this.shadowRoot);
         });
     }
-    _renderEmpty() {
-        const isLoading = this.hasAttribute('loading');
-        if (isLoading) {
-            // Show loading overlay with minimum height for better appearance
-            this.shadowRoot.innerHTML = `
-        <style>${EMPTY_STYLES}${LOADING_STYLES}</style>
-        <div style="position: relative; min-height: 120px;">
-          <div class="loading-overlay" role="status" aria-label="Loading messages">
-            <div class="loading-spinner"></div>
-          </div>
-        </div>
-      `;
-        }
-        else {
-            this.shadowRoot.innerHTML = `
-        <style>${EMPTY_STYLES}</style>
-        <div class="empty-state">No messages</div>
-      `;
-        }
-    }
-    _setupScrollTracking(container, button, options) {
-        const checkScrollPosition = () => {
-            const threshold = 50; // pixels from bottom
-            const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
-            const hasOverflow = container.scrollHeight > container.clientHeight;
-            // Show button when not at bottom and content has overflow
-            const shouldShow = !isAtBottom && hasOverflow;
-            if (shouldShow !== this._scrollButtonVisible) {
-                this._scrollButtonVisible = shouldShow;
-                // Only toggle button visibility if button exists
-                if (button) {
-                    button.classList.toggle('visible', shouldShow);
-                }
-                // Dispatch custom event (always, regardless of button visibility)
-                this.dispatchEvent(new CustomEvent(shouldShow ? 'bb-scrollbuttonshow' : 'bb-scrollbuttonhide', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { visible: shouldShow }
-                }));
-            }
-        };
-        // Check initial state unless skipped
-        if (!options?.skipInitialCheck) {
-            checkScrollPosition();
-        }
-        // Listen for scroll events with passive listener for performance
-        this._addTrackedListener(container, 'scroll', checkScrollPosition);
-        // Also check on resize
-        this._addTrackedListener(window, 'resize', checkScrollPosition);
-    }
 }

package/dist/components/bb-custom-avatar.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * Custom avatar component - displays SVG, img, emoji, or HTML content
+ * Includes tooltip on hover
+ */
+export declare class BBCustomAvatar extends LitElement {
+    static styles: import("lit").CSSResult;
+    tooltip: string;
+    private _tooltipRef;
+    private _showTooltip;
+    private _onMouseEnter;
+    private _onMouseLeave;
+    private _positionTooltip;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-custom-avatar': BBCustomAvatar;
+    }
+}

package/dist/components/bb-custom-avatar.js

@@ -0,0 +1,145 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { THEME } from '../const/theme.js';
+/**
+ * Custom avatar component - displays SVG, img, emoji, or HTML content
+ * Includes tooltip on hover
+ */
+let BBCustomAvatar = class BBCustomAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tooltip = '';
+        this._tooltipRef = null;
+        this._showTooltip = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+
+    .avatar-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background: #ffffff;
+      border-radius: 50%;
+      overflow: hidden;
+      cursor: help;
+    }
+
+    .avatar {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .avatar ::slotted(svg) {
+      width: 100%;
+      height: 100%;
+    }
+
+    .avatar ::slotted(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    /* Tooltip styles */
+    .avatar-tooltip {
+      position: fixed;
+      padding: 0.25rem 0.5rem;
+      background: ${unsafeCSS(THEME.gray[800])};
+      color: ${unsafeCSS(THEME.gray[50])};
+      font-size: 0.75rem;
+      border-radius: 0.25rem;
+      white-space: nowrap;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      z-index: 10000;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      transition:
+        opacity 0.2s ease,
+        visibility 0.2s ease;
+    }
+
+    .avatar-tooltip::after {
+      content: '';
+      position: absolute;
+      top: calc(100% - 1px);
+      left: 50%;
+      transform: translateX(-50%);
+      border: 4px solid transparent;
+      border-top-color: ${unsafeCSS(THEME.gray[800])};
+    }
+
+    .avatar-tooltip.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+  `; }
+    _onMouseEnter() {
+        this._showTooltip = true;
+        this._positionTooltip();
+        this.requestUpdate();
+    }
+    _onMouseLeave() {
+        this._showTooltip = false;
+        this.requestUpdate();
+    }
+    _positionTooltip() {
+        if (!this._tooltipRef || !this._showTooltip)
+            return;
+        const rect = this.getBoundingClientRect();
+        const tooltipRect = this._tooltipRef.getBoundingClientRect();
+        this._tooltipRef.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
+        this._tooltipRef.style.top = `${rect.top - tooltipRect.height - 8}px`;
+    }
+    render() {
+        return html `
+      <div
+        class="avatar-wrapper"
+        @mouseenter=${this._onMouseEnter}
+        @mouseleave=${this._onMouseLeave}
+      >
+        <div class="avatar"><slot></slot></div>
+      </div>
+      <div
+        class="avatar-tooltip ${this._showTooltip ? 'visible' : ''}"
+        ${(el) => {
+            if (el)
+                this._tooltipRef = el;
+        }}
+      >
+        ${this.tooltip}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], BBCustomAvatar.prototype, "tooltip", void 0);
+BBCustomAvatar = __decorate([
+    customElement('bb-custom-avatar')
+], BBCustomAvatar);
+export { BBCustomAvatar };

package/dist/components/bb-letter-avatar.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+/**
+ * Letter avatar component - displays a letter in a circular container
+ */
+export declare class BBLetterAvatar extends LitElement {
+    static styles: import("lit").CSSResult;
+    letter: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-letter-avatar': BBLetterAvatar;
+    }
+}

package/dist/components/bb-letter-avatar.js

@@ -0,0 +1,61 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { THEME } from '../const/theme.js';
+/**
+ * Letter avatar component - displays a letter in a circular container
+ */
+let BBLetterAvatar = class BBLetterAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.letter = '';
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+
+    .avatar {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--bb-avatar-bg, #ffffff);
+      color: var(--bb-avatar-color, ${unsafeCSS(THEME.gray[600])});
+      font-size: 14px;
+      font-weight: 600;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      .avatar {
+        font-size: 12px;
+      }
+    }
+  `; }
+    render() {
+        return html `<div class="avatar">${this.letter}</div>`;
+    }
+};
+__decorate([
+    property()
+], BBLetterAvatar.prototype, "letter", void 0);
+BBLetterAvatar = __decorate([
+    customElement('bb-letter-avatar')
+], BBLetterAvatar);
+export { BBLetterAvatar };