igniteui-webcomponents 6.3.0-alpha.0 → 6.3.0-beta.0

package/components/chat/chat-message-list.d.ts

@@ -1,111 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * A chat message list component that displays a list of chat messages grouped by date.
- *
- * @element igc-chat-message-list
- *
- * This component:
- * - Renders messages using the `<igc-chat-message>` component.
- * - Supports keyboard navigation between messages (Home, End, ArrowUp, ArrowDown).
- * - Manages focus highlighting on active messages.
- * - Automatically scrolls to the bottom when new messages arrive, unless auto-scroll is disabled.
- * - Displays a typing indicator if the chat state option `isComposing` is true.
- *
- * Accessibility:
- * - Uses ARIA roles and properties for grouping and active descendant management.
- * - Message items have role="option" for assistive technologies.
- *
- */
-export default class IgcChatMessageListComponent extends LitElement {
-    /** Tag name of the custom element. */
-    static readonly tagName = "igc-chat-message-list";
-    /** Styles applied to the component */
-    static styles: import("lit").CSSResult[];
-    /**
-     * Consumed chat state context providing messages, options, and user data.
-     * @private
-     */
-    private _chatState?;
-    /**
-     * Currently active message id used for focus and keyboard navigation.
-     * @private
-     */
-    private _activeMessageId;
-    /**
-     * Registers this component and its dependencies.
-     * Used internally for component setup.
-     */
-    static register(): void;
-    constructor();
-    /**
-     * Formats a date to a human-readable label.
-     * Returns 'Today', 'Yesterday', or localized date string.
-     * @param date - Date object to format
-     * @returns formatted string
-     * @private
-     */
-    private formatDate;
-    /**
-     * Groups messages by their date labels.
-     * @param messages - Array of messages to group
-     * @returns Array of groups with date label and messages
-     * @private
-     */
-    private groupMessagesByDate;
-    /**
-     * Scrolls the container to the bottom, typically called after new messages are rendered.
-     * @private
-     */
-    private scrollToBottom;
-    /**
-     * Scrolls the view to a specific message by id.
-     * @param messageId - The id of the message to scroll to
-     * @private
-     */
-    private scrollToMessage;
-    /**
-     * Handles focus entering the message list container.
-     * Sets the active message to the last message for keyboard navigation.
-     * @private
-     */
-    private handleFocusIn;
-    /**
-     * Handles focus leaving the message list container.
-     * Clears the active message.
-     * @private
-     */
-    private handleFocusOut;
-    /**
-     * Handles keyboard navigation within the message list.
-     * Supports Home, End, ArrowUp, ArrowDown keys to move active message focus.
-     * @param e KeyboardEvent from user input
-     * @private
-     */
-    private navigateToMessage;
-    /**
-     * Lifecycle: called when the component updates.
-     * Scrolls to bottom unless auto-scroll is disabled.
-     */
-    protected updated(): void;
-    /**
-     * Lifecycle: called after first render.
-     * Scrolls to bottom unless auto-scroll is disabled.
-     */
-    protected firstUpdated(): void;
-    /**
-     * Renders the typing indicator template if composing.
-     * @protected
-     */
-    protected renderLoadingTemplate(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
-    /**
-     * Main render method.
-     * Groups messages by date and renders each message.
-     * Shows the typing indicator if applicable.
-     */
-    protected render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'igc-chat-message-list': IgcChatMessageListComponent;
-    }
-}

package/components/chat/chat-message-list.js

@@ -1,178 +0,0 @@
-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 { consume } from '@lit/context';
-import { html, LitElement, nothing } from 'lit';
-import { state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { chatContext } from '../common/context.js';
-import { addKeybindings, arrowDown, arrowUp, endKey, homeKey, } from '../common/controllers/key-bindings.js';
-import { registerComponent } from '../common/definitions/register.js';
-import IgcChatMessageComponent from './chat-message.js';
-import { styles } from './themes/message-list.base.css.js';
-import { styles as shared } from './themes/shared/message-list.common.css.js';
-class IgcChatMessageListComponent extends LitElement {
-    static register() {
-        registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);
-    }
-    constructor() {
-        super();
-        this._activeMessageId = '';
-        addKeybindings(this)
-            .set(homeKey, this.navigateToMessage)
-            .set(endKey, this.navigateToMessage)
-            .set(arrowUp, this.navigateToMessage)
-            .set(arrowDown, this.navigateToMessage);
-    }
-    formatDate(date) {
-        const today = new Date();
-        const yesterday = new Date(today);
-        yesterday.setDate(yesterday.getDate() - 1);
-        if (date.toDateString() === today.toDateString()) {
-            return 'Today';
-        }
-        if (date.toDateString() === yesterday.toDateString()) {
-            return 'Yesterday';
-        }
-        return date.toLocaleDateString('en-US', {
-            weekday: 'long',
-            month: 'short',
-            day: 'numeric',
-        });
-    }
-    groupMessagesByDate(messages) {
-        const grouped = {};
-        messages.forEach((message) => {
-            const dateStr = this.formatDate(message.timestamp);
-            if (!grouped[dateStr]) {
-                grouped[dateStr] = [];
-            }
-            grouped[dateStr].push(message);
-        });
-        return Object.keys(grouped).map((date) => ({
-            date,
-            messages: grouped[date],
-        }));
-    }
-    scrollToBottom() {
-        requestAnimationFrame(() => {
-            const container = this.shadowRoot?.host;
-            if (container) {
-                container.scrollTop = container.scrollHeight;
-            }
-        });
-    }
-    scrollToMessage(messageId) {
-        const messageElement = this.shadowRoot?.querySelector(`#message-${messageId}`);
-        messageElement?.scrollIntoView();
-    }
-    handleFocusIn() {
-        if (!this._chatState?.messages || this._chatState.messages.length === 0) {
-            return;
-        }
-        const lastMessage = this._chatState.sortedMessagesIds?.pop() ?? '';
-        this._activeMessageId = lastMessage !== '' ? `message-${lastMessage}` : '';
-    }
-    handleFocusOut() {
-        this._activeMessageId = '';
-    }
-    navigateToMessage(e) {
-        if (!this._chatState?.messages || this._chatState.messages.length === 0) {
-            return;
-        }
-        const currentIndex = this._chatState?.sortedMessagesIds.findIndex((id) => `message-${id}` === this._activeMessageId);
-        let activeMessageId = '';
-        const key = e.key.toLowerCase();
-        switch (key) {
-            case 'home':
-                activeMessageId = this._chatState.sortedMessagesIds[0];
-                break;
-            case 'end':
-                activeMessageId =
-                    this._chatState.sortedMessagesIds[this._chatState.sortedMessagesIds.length - 1];
-                break;
-            case 'arrowup':
-                if (currentIndex > 0) {
-                    activeMessageId = this._chatState.sortedMessagesIds[currentIndex - 1];
-                }
-                break;
-            case 'arrowdown':
-                if (currentIndex < this._chatState?.messages.length - 1) {
-                    activeMessageId = this._chatState.sortedMessagesIds[currentIndex + 1];
-                }
-                break;
-            default:
-                return;
-        }
-        this._activeMessageId = `message-${activeMessageId}`;
-        this.scrollToMessage(activeMessageId);
-    }
-    updated() {
-        if (!this._chatState?.options?.disableAutoScroll) {
-            this.scrollToBottom();
-        }
-    }
-    firstUpdated() {
-        if (!this._chatState?.options?.disableAutoScroll) {
-            this.scrollToBottom();
-        }
-    }
-    *renderLoadingTemplate() {
-        yield html `${this._chatState?.options?.templates?.composingIndicatorTemplate
-            ? this._chatState.options.templates.composingIndicatorTemplate
-            : html `<div part="typing-indicator">
-          <div part="typing-dot"></div>
-          <div part="typing-dot"></div>
-          <div part="typing-dot"></div>
-        </div>`}`;
-    }
-    render() {
-        const groupedMessages = this.groupMessagesByDate(this._chatState?.messages ?? []);
-        return html `
-      <div
-        part="message-container"
-        aria-activedescendant=${this._activeMessageId}
-        role="group"
-        aria-label="Message list"
-        tabindex="0"
-        @focusin=${this.handleFocusIn}
-        @focusout=${this.handleFocusOut}
-      ></div>
-        <div part="message-list">
-          ${repeat(groupedMessages, (group) => group.date, (group) => html `
-              ${repeat(group.messages, (message) => message.id, (message) => {
-            const messageId = `message-${message.id}`;
-            return html `
-                    <igc-chat-message
-                      id=${messageId}
-                      role="option"
-                      part="message-item ${this._activeMessageId === messageId
-                ? 'active'
-                : ''}"
-                      .message=${message}
-                    >
-                    </igc-chat-message>
-                  `;
-        })}
-            `)}
-          ${this._chatState?.options?.isComposing
-            ? this.renderLoadingTemplate()
-            : nothing}
-        </div>
-      </div>
-    `;
-    }
-}
-IgcChatMessageListComponent.tagName = 'igc-chat-message-list';
-IgcChatMessageListComponent.styles = [styles, shared];
-export default IgcChatMessageListComponent;
-__decorate([
-    consume({ context: chatContext, subscribe: true })
-], IgcChatMessageListComponent.prototype, "_chatState", void 0);
-__decorate([
-    state()
-], IgcChatMessageListComponent.prototype, "_activeMessageId", void 0);
-//# sourceMappingURL=chat-message-list.js.map

package/components/chat/chat-message-list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-message-list.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { chatContext } from '../common/context.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n} from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcChatMessageComponent from './chat-message.js';\nimport type { ChatState } from './chat-state.js';\nimport { styles } from './themes/message-list.base.css.js';\nimport { styles as shared } from './themes/shared/message-list.common.css.js';\nimport type { IgcMessage } from './types.js';\n\n/**\n * A chat message list component that displays a list of chat messages grouped by date.\n *\n * @element igc-chat-message-list\n *\n * This component:\n * - Renders messages using the `<igc-chat-message>` component.\n * - Supports keyboard navigation between messages (Home, End, ArrowUp, ArrowDown).\n * - Manages focus highlighting on active messages.\n * - Automatically scrolls to the bottom when new messages arrive, unless auto-scroll is disabled.\n * - Displays a typing indicator if the chat state option `isComposing` is true.\n *\n * Accessibility:\n * - Uses ARIA roles and properties for grouping and active descendant management.\n * - Message items have role=\"option\" for assistive technologies.\n *\n */\nexport default class IgcChatMessageListComponent extends LitElement {\n  /** Tag name of the custom element. */\n  public static readonly tagName = 'igc-chat-message-list';\n\n  /** Styles applied to the component */\n  public static override styles = [styles, shared];\n\n  /**\n   * Consumed chat state context providing messages, options, and user data.\n   * @private\n   */\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /**\n   * Currently active message id used for focus and keyboard navigation.\n   * @private\n   */\n  @state()\n  private _activeMessageId = '';\n\n  /**\n   * Registers this component and its dependencies.\n   * Used internally for component setup.\n   */\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);\n  }\n\n  constructor() {\n    super();\n    addKeybindings(this)\n      .set(homeKey, this.navigateToMessage)\n      .set(endKey, this.navigateToMessage)\n      .set(arrowUp, this.navigateToMessage)\n      .set(arrowDown, this.navigateToMessage);\n  }\n\n  /**\n   * Formats a date to a human-readable label.\n   * Returns 'Today', 'Yesterday', or localized date string.\n   * @param date - Date object to format\n   * @returns formatted string\n   * @private\n   */\n  private formatDate(date: Date): string {\n    const today = new Date();\n    const yesterday = new Date(today);\n    yesterday.setDate(yesterday.getDate() - 1);\n\n    if (date.toDateString() === today.toDateString()) {\n      return 'Today';\n    }\n\n    if (date.toDateString() === yesterday.toDateString()) {\n      return 'Yesterday';\n    }\n\n    return date.toLocaleDateString('en-US', {\n      weekday: 'long',\n      month: 'short',\n      day: 'numeric',\n    });\n  }\n\n  /**\n   * Groups messages by their date labels.\n   * @param messages - Array of messages to group\n   * @returns Array of groups with date label and messages\n   * @private\n   */\n  private groupMessagesByDate(\n    messages: IgcMessage[]\n  ): { date: string; messages: IgcMessage[] }[] {\n    const grouped: { [key: string]: IgcMessage[] } = {};\n\n    messages.forEach((message) => {\n      const dateStr = this.formatDate(message.timestamp);\n      if (!grouped[dateStr]) {\n        grouped[dateStr] = [];\n      }\n      grouped[dateStr].push(message);\n    });\n\n    return Object.keys(grouped).map((date) => ({\n      date,\n      messages: grouped[date],\n    }));\n  }\n\n  /**\n   * Scrolls the container to the bottom, typically called after new messages are rendered.\n   * @private\n   */\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      const container = this.shadowRoot?.host as HTMLElement;\n      if (container) {\n        container.scrollTop = container.scrollHeight;\n      }\n    });\n  }\n\n  /**\n   * Scrolls the view to a specific message by id.\n   * @param messageId - The id of the message to scroll to\n   * @private\n   */\n  private scrollToMessage(messageId: string) {\n    const messageElement = this.shadowRoot?.querySelector(\n      `#message-${messageId}`\n    );\n    messageElement?.scrollIntoView();\n  }\n\n  /**\n   * Handles focus entering the message list container.\n   * Sets the active message to the last message for keyboard navigation.\n   * @private\n   */\n  private handleFocusIn() {\n    if (!this._chatState?.messages || this._chatState.messages.length === 0) {\n      return;\n    }\n    const lastMessage = this._chatState.sortedMessagesIds?.pop() ?? '';\n    this._activeMessageId = lastMessage !== '' ? `message-${lastMessage}` : '';\n  }\n\n  /**\n   * Handles focus leaving the message list container.\n   * Clears the active message.\n   * @private\n   */\n  private handleFocusOut() {\n    this._activeMessageId = '';\n  }\n\n  /**\n   * Handles keyboard navigation within the message list.\n   * Supports Home, End, ArrowUp, ArrowDown keys to move active message focus.\n   * @param e KeyboardEvent from user input\n   * @private\n   */\n  private navigateToMessage(e: KeyboardEvent) {\n    if (!this._chatState?.messages || this._chatState.messages.length === 0) {\n      return;\n    }\n\n    const currentIndex = this._chatState?.sortedMessagesIds.findIndex(\n      (id) => `message-${id}` === this._activeMessageId\n    );\n    let activeMessageId = '';\n    const key = e.key.toLowerCase();\n\n    switch (key) {\n      case 'home':\n        activeMessageId = this._chatState.sortedMessagesIds[0];\n        break;\n      case 'end':\n        activeMessageId =\n          this._chatState.sortedMessagesIds[\n            this._chatState.sortedMessagesIds.length - 1\n          ];\n        break;\n      case 'arrowup':\n        if (currentIndex > 0) {\n          activeMessageId = this._chatState.sortedMessagesIds[currentIndex - 1];\n        }\n        break;\n      case 'arrowdown':\n        if (currentIndex < this._chatState?.messages.length - 1) {\n          activeMessageId = this._chatState.sortedMessagesIds[currentIndex + 1];\n        }\n        break;\n      default:\n        return; // Ignore other keys\n    }\n\n    this._activeMessageId = `message-${activeMessageId}`;\n    this.scrollToMessage(activeMessageId);\n  }\n\n  /**\n   * Lifecycle: called when the component updates.\n   * Scrolls to bottom unless auto-scroll is disabled.\n   */\n  protected override updated() {\n    if (!this._chatState?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  /**\n   * Lifecycle: called after first render.\n   * Scrolls to bottom unless auto-scroll is disabled.\n   */\n  protected override firstUpdated() {\n    if (!this._chatState?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  /**\n   * Renders the typing indicator template if composing.\n   * @protected\n   */\n  protected *renderLoadingTemplate() {\n    yield html`${this._chatState?.options?.templates?.composingIndicatorTemplate\n      ? this._chatState.options.templates.composingIndicatorTemplate\n      : html`<div part=\"typing-indicator\">\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n          <div part=\"typing-dot\"></div>\n        </div>`}`;\n  }\n\n  /**\n   * Main render method.\n   * Groups messages by date and renders each message.\n   * Shows the typing indicator if applicable.\n   */\n  protected override render() {\n    const groupedMessages = this.groupMessagesByDate(\n      this._chatState?.messages ?? []\n    );\n\n    return html`\n      <div\n        part=\"message-container\"\n        aria-activedescendant=${this._activeMessageId}\n        role=\"group\"\n        aria-label=\"Message list\"\n        tabindex=\"0\"\n        @focusin=${this.handleFocusIn}\n        @focusout=${this.handleFocusOut}\n      ></div>\n        <div part=\"message-list\">\n          ${repeat(\n            groupedMessages,\n            (group) => group.date,\n            (group) => html`\n              ${repeat(\n                group.messages,\n                (message) => message.id,\n                (message) => {\n                  const messageId = `message-${message.id}`;\n                  return html`\n                    <igc-chat-message\n                      id=${messageId}\n                      role=\"option\"\n                      part=\"message-item ${this._activeMessageId === messageId\n                        ? 'active'\n                        : ''}\"\n                      .message=${message}\n                    >\n                    </igc-chat-message>\n                  `;\n                }\n              )}\n            `\n          )}\n          ${\n            this._chatState?.options?.isComposing\n              ? this.renderLoadingTemplate()\n              : nothing\n          }\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message-list': IgcChatMessageListComponent;\n  }\n}\n"]}

package/components/chat/markdown-util.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateResult } from 'lit';
-export declare function renderMarkdown(text: string): TemplateResult;

package/components/chat/markdown-util.js

@@ -1,22 +0,0 @@
-import { html } from 'lit';
-import { marked } from 'marked';
-marked.setOptions({
-    gfm: true,
-    breaks: true,
-});
-const renderer = new marked.Renderer();
-renderer.code = (code, language) => {
-    return `<pre><code class="language-${language}">${code}</code></pre>`;
-};
-renderer.link = (href, title, text) => {
-    return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
-};
-export function renderMarkdown(text) {
-    if (!text)
-        return html ``;
-    const rendered = marked(text, { renderer }).toString();
-    const template = document.createElement('template');
-    template.innerHTML = rendered;
-    return html `${template.content}`;
-}
-//# sourceMappingURL=markdown-util.js.map

package/components/chat/markdown-util.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"markdown-util.js","sourceRoot":"","sources":["../../../src/components/chat/markdown-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,MAAM,CAAC,UAAU,CAAC;IAChB,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;AAGvC,QAAQ,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;IACjC,OAAO,8BAA8B,QAAQ,KAAK,IAAI,eAAe,CAAC;AACxE,CAAC,CAAC;AAGF,QAAQ,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACpC,OAAO,YAAY,IAAI,+CAA+C,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,MAAM,CAAC;AACtH,CAAC,CAAC;AAEF,MAAM,UAAU,cAAc,CAAC,IAAY;IACzC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;IACvD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC;IAE9B,OAAO,IAAI,CAAA,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAC;AACnC,CAAC","sourcesContent":["import { html, type TemplateResult } from 'lit';\nimport { marked } from 'marked';\n\nmarked.setOptions({\n  gfm: true,\n  breaks: true,\n});\n\nconst renderer = new marked.Renderer();\n\n// Customize code rendering\nrenderer.code = (code, language) => {\n  return `<pre><code class=\"language-${language}\">${code}</code></pre>`;\n};\n\n// Customize link rendering\nrenderer.link = (href, title, text) => {\n  return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" ${title ? `title=\"${title}\"` : ''}>${text}</a>`;\n};\n\nexport function renderMarkdown(text: string): TemplateResult {\n  if (!text) return html``;\n\n  const rendered = marked(text, { renderer }).toString();\n  const template = document.createElement('template');\n  template.innerHTML = rendered;\n\n  return html`${template.content}`;\n}\n"]}

package/components/chat/themes/message-list.base.css.js

@@ -1,3 +0,0 @@
-import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:block;overflow-y:auto;flex:1;scrollbar-width:none;padding-block-start:1rem}:host(::-webkit-scrollbar){display:none}[part=message-list]{display:flex;flex-direction:column;gap:1.5rem}[part=typing-indicator]{position:relative}[part=typing-dot]{content:"";animation:blink 1.5s infinite;animation-fill-mode:both;height:.5rem;width:.5rem;position:absolute;inset:0;border-radius:50%}[part=typing-dot]:nth-child(2){animation-delay:.2s;margin-left:.75rem}[part=typing-dot]:nth-child(3){animation-delay:.4s;margin-left:1.5rem}@keyframes blink{0%{opacity:.1}20%{opacity:1}100%{opacity:.1}}`;
-//# sourceMappingURL=message-list.base.css.js.map

package/components/chat/themes/message-list.base.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"message-list.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/message-list.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0hDAA0hD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:block;overflow-y:auto;flex:1;scrollbar-width:none;padding-block-start:1rem}:host(::-webkit-scrollbar){display:none}[part=message-list]{display:flex;flex-direction:column;gap:1.5rem}[part=typing-indicator]{position:relative}[part=typing-dot]{content:\"\";animation:blink 1.5s infinite;animation-fill-mode:both;height:.5rem;width:.5rem;position:absolute;inset:0;border-radius:50%}[part=typing-dot]:nth-child(2){animation-delay:.2s;margin-left:.75rem}[part=typing-dot]:nth-child(3){animation-delay:.4s;margin-left:1.5rem}@keyframes blink{0%{opacity:.1}20%{opacity:1}100%{opacity:.1}}`;\n"]}

package/components/chat/themes/shared/chat-message.common.css.js

@@ -1,3 +0,0 @@
-import { css } from 'lit';
-export const styles = css `:host([part~=active])::part(message-container){box-shadow:inset 0 0 0 .0625rem var(--message-color)}[part~=sent]{background:var(--message-background)}[part~=bubble]{color:var(--message-color)}`;
-//# sourceMappingURL=chat-message.common.css.js.map

package/components/chat/themes/shared/chat-message.common.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-message.common.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/shared/chat-message.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kMAAkM,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([part~=active])::part(message-container){box-shadow:inset 0 0 0 .0625rem var(--message-color)}[part~=sent]{background:var(--message-background)}[part~=bubble]{color:var(--message-color)}`;\n"]}

package/components/chat/themes/shared/message-attachments.common.css.js

@@ -1,3 +0,0 @@
-import { css } from 'lit';
-export const styles = css `[part=attachment-header]{background:var(--image-background);border:.0625rem solid var(--image-border);border-block-end:none}[part=attachment-content]{border:.0625rem solid var(--image-border);border-block-start:none}`;
-//# sourceMappingURL=message-attachments.common.css.js.map

package/components/chat/themes/shared/message-attachments.common.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"message-attachments.common.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/shared/message-attachments.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0NAA0N,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=attachment-header]{background:var(--image-background);border:.0625rem solid var(--image-border);border-block-end:none}[part=attachment-content]{border:.0625rem solid var(--image-border);border-block-start:none}`;\n"]}

package/components/chat/themes/shared/message-list.common.css.js

@@ -1,3 +0,0 @@
-import { css } from 'lit';
-export const styles = css `[part=typing-dot]{background:var(--ig-gray-600)}`;
-//# sourceMappingURL=message-list.common.css.js.map

package/components/chat/themes/shared/message-list.common.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"message-list.common.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/shared/message-list.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kDAAkD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=typing-dot]{background:var(--ig-gray-600)}`;\n"]}