igniteui-webcomponents 6.0.1 → 6.1.1-alpha.0

package/components/chat/chat.js

@@ -0,0 +1,98 @@
+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 { ContextProvider } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import IgcButtonComponent from '../button/button.js';
+import { chatContext } from '../common/context.js';
+import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import IgcChatInputComponent from './chat-input.js';
+import IgcChatMessageListComponent from './chat-message-list.js';
+import { styles } from './themes/chat.base.css.js';
+class IgcChatComponent extends EventEmitterMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._context = new ContextProvider(this, {
+            context: chatContext,
+            initialValue: this,
+        });
+        this.messages = [];
+    }
+    static register() {
+        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageListComponent, IgcButtonComponent);
+    }
+    contextChanged() {
+        this._context.setValue(this, true);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('message-created', this.handleSendMessage);
+        this.addEventListener('attachment-click', this.handleAttachmentClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('message-created', this.handleSendMessage);
+        this.removeEventListener('attachment-click', this.handleAttachmentClick);
+    }
+    handleSendMessage(e) {
+        const text = e.detail.text;
+        const attachments = e.detail.attachments || [];
+        if (!text.trim() && attachments.length === 0)
+            return;
+        const newMessage = {
+            id: Date.now().toString(),
+            text,
+            sender: 'user',
+            timestamp: new Date(),
+            attachments,
+        };
+        this.messages = [...this.messages, newMessage];
+        this.emitEvent('igcMessageCreated', { detail: newMessage });
+    }
+    handleAttachmentClick(e) {
+        const attachmentArgs = e.detail.attachment;
+        this.emitEvent('igcAttachmentClick', { detail: attachmentArgs });
+    }
+    firstUpdated() {
+        this._context.setValue(this, true);
+    }
+    render() {
+        return html `
+      <div class="chat-container">
+        <div class="header" part="header">
+          <div class="info">
+            <slot name="prefix" part="prefix"></slot>
+            <slot name="title" part="title">${this.options?.headerText}</slot>
+          </div>
+          <slot name="actions" class="actions">
+            <igc-button variant="flat">⋯</igc-button>
+          </slot>
+        </div>
+        <igc-chat-message-list> </igc-chat-message-list>
+        <igc-chat-input
+          @message-created=${this.handleSendMessage}
+        ></igc-chat-input>
+      </div>
+    `;
+    }
+}
+IgcChatComponent.tagName = 'igc-chat';
+IgcChatComponent.styles = styles;
+export default IgcChatComponent;
+__decorate([
+    property({ reflect: true, attribute: false })
+], IgcChatComponent.prototype, "messages", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcChatComponent.prototype, "options", void 0);
+__decorate([
+    watch('options'),
+    watch('messages')
+], IgcChatComponent.prototype, "contextChanged", null);
+//# sourceMappingURL=chat.js.map

package/components/chat/chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.js","sourceRoot":"","sources":["../../../src/components/chat/chat.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { chatContext } from '../common/context.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport IgcChatInputComponent from './chat-input.js';\nimport IgcChatMessageListComponent from './chat-message-list.js';\nimport { styles } from './themes/chat.base.css.js';\nimport type {\n  IgcChatOptions,\n  IgcMessage,\n  IgcMessageAttachment,\n} from './types.js';\n\nexport interface IgcChatComponentEventMap {\n  igcMessageCreated: CustomEvent<IgcMessage>;\n  igcAttachmentClick: CustomEvent<IgcMessageAttachment>;\n  igcAttachmentChange: CustomEvent<IgcMessageAttachment>;\n  igcTypingChange: CustomEvent<boolean>;\n  igcInputFocus: CustomEvent<void>;\n  igcInputBlur: CustomEvent<void>;\n  igcInputChange: CustomEvent<string>;\n  igcMessageCopied: CustomEvent<IgcMessage>;\n}\n\n/**\n *\n * @element igc-chat\n *\n */\nexport default class IgcChatComponent extends EventEmitterMixin<\n  IgcChatComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static readonly tagName = 'igc-chat';\n\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcChatComponent,\n      IgcChatInputComponent,\n      IgcChatMessageListComponent,\n      IgcButtonComponent\n    );\n  }\n\n  private _context = new ContextProvider(this, {\n    context: chatContext,\n    initialValue: this,\n  });\n\n  @property({ reflect: true, attribute: false })\n  public messages: IgcMessage[] = [];\n\n  @property({ attribute: false })\n  public options?: IgcChatOptions;\n\n  @watch('options')\n  @watch('messages')\n  protected contextChanged() {\n    this._context.setValue(this, true);\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\n      'message-created',\n      this.handleSendMessage as EventListener\n    );\n    this.addEventListener(\n      'attachment-click',\n      this.handleAttachmentClick as EventListener\n    );\n  }\n\n  public override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'message-created',\n      this.handleSendMessage as EventListener\n    );\n    this.removeEventListener(\n      'attachment-click',\n      this.handleAttachmentClick as EventListener\n    );\n  }\n\n  private handleSendMessage(e: CustomEvent) {\n    const text = e.detail.text;\n    const attachments = e.detail.attachments || [];\n\n    if (!text.trim() && attachments.length === 0) return;\n\n    const newMessage: IgcMessage = {\n      id: Date.now().toString(),\n      text,\n      sender: 'user',\n      timestamp: new Date(),\n      attachments,\n    };\n\n    this.messages = [...this.messages, newMessage];\n    this.emitEvent('igcMessageCreated', { detail: newMessage });\n  }\n\n  private handleAttachmentClick(e: CustomEvent) {\n    const attachmentArgs = e.detail.attachment;\n    this.emitEvent('igcAttachmentClick', { detail: attachmentArgs });\n  }\n\n  protected override firstUpdated() {\n    this._context.setValue(this, true);\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"chat-container\">\n        <div class=\"header\" part=\"header\">\n          <div class=\"info\">\n            <slot name=\"prefix\" part=\"prefix\"></slot>\n            <slot name=\"title\" part=\"title\">${this.options?.headerText}</slot>\n          </div>\n          <slot name=\"actions\" class=\"actions\">\n            <igc-button variant=\"flat\">⋯</igc-button>\n          </slot>\n        </div>\n        <igc-chat-message-list> </igc-chat-message-list>\n        <igc-chat-input\n          @message-created=${this.handleSendMessage}\n        ></igc-chat-input>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat': IgcChatComponent;\n  }\n}\n"]}

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

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

package/components/chat/markdown-util.js

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-util.js","sourceRoot":"","sources":["../../../src/components/chat/markdown-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,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 { type TemplateResult, html } 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/message-attachments.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { type IgcMessageAttachment } from './types.js';
+/**
+ *
+ * @element igc-message-attachments
+ *
+ */
+export default class IgcMessageAttachmentsComponent extends LitElement {
+    /** @private */
+    static readonly tagName = "igc-message-attachments";
+    static styles: import("lit").CSSResult;
+    private _chat?;
+    static register(): void;
+    attachments: IgcMessageAttachment[];
+    previewImage: string;
+    constructor();
+    private openImagePreview;
+    private closeImagePreview;
+    private handleToggle;
+    private handleAttachmentClick;
+    private getURL;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-message-attachments': IgcMessageAttachmentsComponent;
+    }
+}

package/components/chat/message-attachments.js

@@ -0,0 +1,168 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+import { chatContext } from '../common/context.js';
+import { registerComponent } from '../common/definitions/register.js';
+import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
+import IgcIconComponent from '../icon/icon.js';
+import { registerIconFromText } from '../icon/icon.registry.js';
+import { styles } from './themes/message-attachments.base.css.js';
+import { closeIcon, fileIcon, imageIcon, moreIcon, previewIcon, } from './types.js';
+class IgcMessageAttachmentsComponent extends LitElement {
+    static register() {
+        registerComponent(IgcMessageAttachmentsComponent, IgcIconComponent, IgcIconButtonComponent, IgcExpansionPanelComponent);
+    }
+    constructor() {
+        super();
+        this.attachments = [];
+        this.previewImage = '';
+        registerIconFromText('close', closeIcon, 'material');
+        registerIconFromText('file', fileIcon, 'material');
+        registerIconFromText('image', imageIcon, 'material');
+        registerIconFromText('preview', previewIcon, 'material');
+        registerIconFromText('more', moreIcon, 'material');
+    }
+    openImagePreview(attachment) {
+        this.previewImage = this.getURL(attachment);
+    }
+    closeImagePreview() {
+        this.previewImage = '';
+    }
+    handleToggle(e, attachment) {
+        this.handleAttachmentClick(attachment);
+        e.preventDefault();
+    }
+    handleAttachmentClick(attachment) {
+        this.dispatchEvent(new CustomEvent('attachment-click', {
+            detail: { attachment },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    getURL(attachment) {
+        if (attachment.url) {
+            return attachment.url;
+        }
+        if (attachment.file) {
+            return URL.createObjectURL(attachment.file);
+        }
+        return '';
+    }
+    render() {
+        return html `
+      <div class="attachments-container">
+        ${this._chat?.options?.templates?.attachmentTemplate
+            ? this._chat.options.templates.attachmentTemplate(this.attachments)
+            : html ` ${this.attachments.map((attachment) => html ` <igc-expansion-panel
+                  indicator-position="none"
+                  .open=${attachment.type === 'image' ||
+                attachment.file?.type.startsWith('image/') ||
+                this._chat?.options?.templates?.attachmentContentTemplate}
+                  @igcClosing=${(ev) => this.handleToggle(ev, attachment)}
+                  @igcOpening=${(ev) => this.handleToggle(ev, attachment)}
+                >
+                  <div slot="title" class="attachment">
+                    <div class="details">
+                      ${this._chat?.options?.templates?.attachmentHeaderTemplate
+                ? this._chat.options.templates.attachmentHeaderTemplate(this.attachments)
+                : html `
+                            <slot name="attachment-icon">
+                              ${attachment.type === 'image' ||
+                    attachment.file?.type.startsWith('image/')
+                    ? html `<igc-icon
+                                    name="image"
+                                    collection="material"
+                                    class="medium"
+                                  ></igc-icon>`
+                    : html `<igc-icon
+                                    name="file"
+                                    collection="material"
+                                    class="medium"
+                                  ></igc-icon>`}
+                            </slot>
+                            <slot name="attachment-name">
+                              <span class="file-name">${attachment.name}</span>
+                            </slot>
+                          `}
+                    </div>
+                    <div class="actions">
+                      ${this._chat?.options?.templates
+                ?.attachmentActionsTemplate
+                ? this._chat.options.templates.attachmentActionsTemplate(this.attachments)
+                : html `
+                            <slot name="attachment-actions">
+                              ${attachment.type === 'image' ||
+                    attachment.file?.type.startsWith('image/')
+                    ? html ` <igc-icon-button
+                                    name="preview"
+                                    collection="material"
+                                    variant="flat"
+                                    class="small"
+                                    @click=${() => this.openImagePreview(attachment)}
+                                  ></igc-icon-button>`
+                    : ''}
+                              <igc-icon-button
+                                name="more"
+                                collection="material"
+                                variant="flat"
+                                class="small"
+                              ></igc-icon-button>
+                            </slot>
+                          `}
+                    </div>
+                  </div>
+
+                  ${this._chat?.options?.templates?.attachmentContentTemplate
+                ? this._chat.options.templates.attachmentContentTemplate(this.attachments)
+                : html `
+                        <slot name="attachment-content">
+                          ${attachment.type === 'image' ||
+                    attachment.file?.type.startsWith('image/')
+                    ? html ` <img
+                                class="image-attachment"
+                                src=${this.getURL(attachment)}
+                                alt=${attachment.name}
+                              />`
+                    : ''}
+                        </slot>
+                      `}
+                </igc-expansion-panel>`)}`}
+      </div>
+
+      ${this.previewImage
+            ? html `
+            <div class="image-overlay" @click=${this.closeImagePreview}>
+              <img class="overlay-image" src=${this.previewImage} />
+              <igc-icon-button
+                name="close"
+                collection="material"
+                variant="contained"
+                class="small"
+                @click=${this.closeImagePreview}
+              ></igc-icon-button>
+            </div>
+          `
+            : ''}
+    `;
+    }
+}
+IgcMessageAttachmentsComponent.tagName = 'igc-message-attachments';
+IgcMessageAttachmentsComponent.styles = styles;
+export default IgcMessageAttachmentsComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcMessageAttachmentsComponent.prototype, "_chat", void 0);
+__decorate([
+    property({ type: Array })
+], IgcMessageAttachmentsComponent.prototype, "attachments", void 0);
+__decorate([
+    property({ type: String })
+], IgcMessageAttachmentsComponent.prototype, "previewImage", void 0);
+//# sourceMappingURL=message-attachments.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message-attachments.js","sourceRoot":"","sources":["../../../src/components/chat/message-attachments.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { registerIconFromText } from '../icon/icon.registry.js';\nimport type IgcChatComponent from './chat.js';\nimport { styles } from './themes/message-attachments.base.css.js';\nimport {\n  closeIcon,\n  fileIcon,\n  type IgcMessageAttachment,\n  imageIcon,\n  moreIcon,\n  previewIcon,\n} from './types.js';\n\n/**\n *\n * @element igc-message-attachments\n *\n */\nexport default class IgcMessageAttachmentsComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-message-attachments';\n\n  public static override styles = styles;\n\n  @consume({ context: chatContext, subscribe: true })\n  private _chat?: IgcChatComponent;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcMessageAttachmentsComponent,\n      IgcIconComponent,\n      IgcIconButtonComponent,\n      IgcExpansionPanelComponent\n    );\n  }\n  @property({ type: Array })\n  attachments: IgcMessageAttachment[] = [];\n\n  @property({ type: String })\n  previewImage = '';\n\n  constructor() {\n    super();\n    registerIconFromText('close', closeIcon, 'material');\n    registerIconFromText('file', fileIcon, 'material');\n    registerIconFromText('image', imageIcon, 'material');\n    registerIconFromText('preview', previewIcon, 'material');\n    registerIconFromText('more', moreIcon, 'material');\n  }\n\n  private openImagePreview(attachment: IgcMessageAttachment) {\n    this.previewImage = this.getURL(attachment);\n  }\n\n  private closeImagePreview() {\n    this.previewImage = '';\n  }\n\n  private handleToggle(e: CustomEvent, attachment: IgcMessageAttachment) {\n    this.handleAttachmentClick(attachment);\n    e.preventDefault();\n  }\n\n  private handleAttachmentClick(attachment: IgcMessageAttachment) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-click', {\n        detail: { attachment },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private getURL(attachment: IgcMessageAttachment): string {\n    if (attachment.url) {\n      return attachment.url;\n    }\n    if (attachment.file) {\n      return URL.createObjectURL(attachment.file);\n    }\n    return '';\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"attachments-container\">\n        ${this._chat?.options?.templates?.attachmentTemplate\n          ? this._chat.options.templates.attachmentTemplate(this.attachments)\n          : html` ${this.attachments.map(\n              (attachment) =>\n                html` <igc-expansion-panel\n                  indicator-position=\"none\"\n                  .open=${attachment.type === 'image' ||\n                  attachment.file?.type.startsWith('image/') ||\n                  this._chat?.options?.templates?.attachmentContentTemplate}\n                  @igcClosing=${(ev: CustomEvent) =>\n                    this.handleToggle(ev, attachment)}\n                  @igcOpening=${(ev: CustomEvent) =>\n                    this.handleToggle(ev, attachment)}\n                >\n                  <div slot=\"title\" class=\"attachment\">\n                    <div class=\"details\">\n                      ${this._chat?.options?.templates?.attachmentHeaderTemplate\n                        ? this._chat.options.templates.attachmentHeaderTemplate(\n                            this.attachments\n                          )\n                        : html`\n                            <slot name=\"attachment-icon\">\n                              ${attachment.type === 'image' ||\n                              attachment.file?.type.startsWith('image/')\n                                ? html`<igc-icon\n                                    name=\"image\"\n                                    collection=\"material\"\n                                    class=\"medium\"\n                                  ></igc-icon>`\n                                : html`<igc-icon\n                                    name=\"file\"\n                                    collection=\"material\"\n                                    class=\"medium\"\n                                  ></igc-icon>`}\n                            </slot>\n                            <slot name=\"attachment-name\">\n                              <span class=\"file-name\">${attachment.name}</span>\n                            </slot>\n                          `}\n                    </div>\n                    <div class=\"actions\">\n                      ${this._chat?.options?.templates\n                        ?.attachmentActionsTemplate\n                        ? this._chat.options.templates.attachmentActionsTemplate(\n                            this.attachments\n                          )\n                        : html`\n                            <slot name=\"attachment-actions\">\n                              ${attachment.type === 'image' ||\n                              attachment.file?.type.startsWith('image/')\n                                ? html` <igc-icon-button\n                                    name=\"preview\"\n                                    collection=\"material\"\n                                    variant=\"flat\"\n                                    class=\"small\"\n                                    @click=${() =>\n                                      this.openImagePreview(attachment)}\n                                  ></igc-icon-button>`\n                                : ''}\n                              <igc-icon-button\n                                name=\"more\"\n                                collection=\"material\"\n                                variant=\"flat\"\n                                class=\"small\"\n                              ></igc-icon-button>\n                            </slot>\n                          `}\n                    </div>\n                  </div>\n\n                  ${this._chat?.options?.templates?.attachmentContentTemplate\n                    ? this._chat.options.templates.attachmentContentTemplate(\n                        this.attachments\n                      )\n                    : html`\n                        <slot name=\"attachment-content\">\n                          ${attachment.type === 'image' ||\n                          attachment.file?.type.startsWith('image/')\n                            ? html` <img\n                                class=\"image-attachment\"\n                                src=${this.getURL(attachment)}\n                                alt=${attachment.name}\n                              />`\n                            : ''}\n                        </slot>\n                      `}\n                </igc-expansion-panel>`\n            )}`}\n      </div>\n\n      ${this.previewImage\n        ? html`\n            <div class=\"image-overlay\" @click=${this.closeImagePreview}>\n              <img class=\"overlay-image\" src=${this.previewImage} />\n              <igc-icon-button\n                name=\"close\"\n                collection=\"material\"\n                variant=\"contained\"\n                class=\"small\"\n                @click=${this.closeImagePreview}\n              ></igc-icon-button>\n            </div>\n          `\n        : ''}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-message-attachments': IgcMessageAttachmentsComponent;\n  }\n}\n"]}

package/components/chat/themes/chat.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chat/themes/chat.base.css.js

@@ -0,0 +1,3 @@
+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{width:100%;height:600px;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #1f1f1f;display:flex;flex-direction:column}.chat-container{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#edeff0}.info{display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.avatar-container{position:relative}.status-indicator{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background-color:#30d158;border:2px solid #fff}.actions{display:flex;gap:16px}.action-button{background:none;border:none;color:#0a84ff;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:#fff .2s}.action-button:hover{background-color:#e5e5ea}`;
+//# sourceMappingURL=chat.base.css.js.map

package/components/chat/themes/chat.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/chat.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u0DAAu0D,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{width:100%;height:600px;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #1f1f1f;display:flex;flex-direction:column}.chat-container{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#edeff0}.info{display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.avatar-container{position:relative}.status-indicator{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background-color:#30d158;border:2px solid #fff}.actions{display:flex;gap:16px}.action-button{background:none;border:none;color:#0a84ff;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:#fff .2s}.action-button:hover{background-color:#e5e5ea}`;\n"]}

package/components/chat/themes/input.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chat/themes/input.base.css.js

@@ -0,0 +1,3 @@
+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;padding:12px 16px;border-top:1px solid #e5e5ea}igc-file-input{width:-moz-fit-content;width:fit-content}igc-file-input::part(file-names){display:none}.input-container{display:flex;align-items:center;gap:12px}.input-container.dragging{background-color:#000;border:2px dashed #0a84ff}.input-wrapper{flex:1;position:relative;border-radius:24px;overflow:hidden;transition:box-shadow .2s}.buttons-container{display:flex;align-items:center}.input-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;margin-left:.25rem;background:rgba(0,0,0,0);border:none;outline:none;cursor:pointer;color:#8e8e93;transition:all .2s ease}.input-button:hover{color:#0a84ff;background-color:#a1a1a1}.text-input{width:100%;border:none;padding:12px 16px;font-size:.95rem;line-height:1.5;outline:none;resize:none;max-height:120px;font-family:inherit}.input-wrapper:focus-within{box-shadow:0 0 0 2px #0a84ff}.attachment-button,.send-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:rgba(0,0,0,0);border:none;cursor:pointer;color:#0a84ff;transition:#fff .2s}.attachment-button:hover,.send-button:hover{background-color:#8e8e93}.attachment-wrapper{max-width:200px;margin-right:5px;float:left}.attachment-wrapper igc-chip{border:1px solid #e5e5ea;border-radius:5px}.attachment-name{font-size:small;font-style:italic;margin:0 5px}.send-button{background-color:#0a84ff;color:#fff}.send-button:hover{background-color:#5ac8fa}.send-button:disabled{background-color:#c7c7cc;cursor:not-allowed}`;
+//# sourceMappingURL=input.base.css.js.map

package/components/chat/themes/input.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/input.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ugFAAugF,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;padding:12px 16px;border-top:1px solid #e5e5ea}igc-file-input{width:-moz-fit-content;width:fit-content}igc-file-input::part(file-names){display:none}.input-container{display:flex;align-items:center;gap:12px}.input-container.dragging{background-color:#000;border:2px dashed #0a84ff}.input-wrapper{flex:1;position:relative;border-radius:24px;overflow:hidden;transition:box-shadow .2s}.buttons-container{display:flex;align-items:center}.input-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;margin-left:.25rem;background:rgba(0,0,0,0);border:none;outline:none;cursor:pointer;color:#8e8e93;transition:all .2s ease}.input-button:hover{color:#0a84ff;background-color:#a1a1a1}.text-input{width:100%;border:none;padding:12px 16px;font-size:.95rem;line-height:1.5;outline:none;resize:none;max-height:120px;font-family:inherit}.input-wrapper:focus-within{box-shadow:0 0 0 2px #0a84ff}.attachment-button,.send-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:rgba(0,0,0,0);border:none;cursor:pointer;color:#0a84ff;transition:#fff .2s}.attachment-button:hover,.send-button:hover{background-color:#8e8e93}.attachment-wrapper{max-width:200px;margin-right:5px;float:left}.attachment-wrapper igc-chip{border:1px solid #e5e5ea;border-radius:5px}.attachment-name{font-size:small;font-style:italic;margin:0 5px}.send-button{background-color:#0a84ff;color:#fff}.send-button:hover{background-color:#5ac8fa}.send-button:disabled{background-color:#c7c7cc;cursor:not-allowed}`;\n"]}

package/components/chat/themes/message-attachments.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,3 @@
+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;margin-top:.5rem}.attachments-container{flex-wrap:wrap;gap:.5rem}.attachment-preview{position:relative;border-radius:.375rem;overflow:hidden;max-width:200px}.image-attachment{max-width:250px;max-height:250px;-o-object-fit:cover;object-fit:cover;cursor:pointer;border-radius:.375rem}.file-attachment{display:flex;align-items:center;padding:.5rem;background-color:var(--gray-100);border-radius:.375rem;max-width:200px}.file-icon{margin-right:.5rem;color:var(--gray-600)}.file-info{overflow:hidden}.file-name{font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gray-800)}.file-size{font-size:.625rem;color:var(--gray-500)}.image-overlay{position:fixed;inset:0;background-color:#1f1f1f;display:flex;align-items:center;justify-content:center;z-index:1000}.overlay-image{max-width:90%;max-height:90%}.close-overlay{position:absolute;top:1rem;right:1rem;color:#fff;background:#1f1f1f;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none}.close-overlay:hover{background:#1f1f1f}.large{--ig-size: var(--ig-size-large)}.actions{display:flex}.attachment{display:flex;justify-content:space-between;gap:2rem}.details{display:flex;align-items:center;gap:.2rem}igc-expansion-panel{width:100%}`;
+//# sourceMappingURL=message-attachments.base.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message-attachments.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/message-attachments.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gvEAAgvE,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;margin-top:.5rem}.attachments-container{flex-wrap:wrap;gap:.5rem}.attachment-preview{position:relative;border-radius:.375rem;overflow:hidden;max-width:200px}.image-attachment{max-width:250px;max-height:250px;-o-object-fit:cover;object-fit:cover;cursor:pointer;border-radius:.375rem}.file-attachment{display:flex;align-items:center;padding:.5rem;background-color:var(--gray-100);border-radius:.375rem;max-width:200px}.file-icon{margin-right:.5rem;color:var(--gray-600)}.file-info{overflow:hidden}.file-name{font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gray-800)}.file-size{font-size:.625rem;color:var(--gray-500)}.image-overlay{position:fixed;inset:0;background-color:#1f1f1f;display:flex;align-items:center;justify-content:center;z-index:1000}.overlay-image{max-width:90%;max-height:90%}.close-overlay{position:absolute;top:1rem;right:1rem;color:#fff;background:#1f1f1f;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none}.close-overlay:hover{background:#1f1f1f}.large{--ig-size: var(--ig-size-large)}.actions{display:flex}.attachment{display:flex;justify-content:space-between;gap:2rem}.details{display:flex;align-items:center;gap:.2rem}igc-expansion-panel{width:100%}`;\n"]}

package/components/chat/themes/message-list.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,3 @@
+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;flex:1;overflow-y:auto;padding:16px}.message-list{display:flex;flex-direction:column;gap:12px}.day-separator{display:flex;align-items:center;margin:16px 0;color:#636366;font-size:.8rem}.day-separator::before,.day-separator::after{content:"";flex:1;height:1px;background-color:#a5a5a5;margin:0 8px}.typing-indicator{display:flex;align-items:center;gap:4px;padding:8px;margin-top:8px;animation:fadeIn .3s ease-in}.typing-dot{width:8px;height:8px;border-radius:50%;background-color:#7e7e81;opacity:.6}.typing-dot:nth-child(1){animation:bounce 1.2s infinite 0s}.typing-dot:nth-child(2){animation:bounce 1.2s infinite .2s}.typing-dot:nth-child(3){animation:bounce 1.2s infinite .4s}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}@media(prefers-color-scheme: dark){.day-separator::before,.day-separator::after{background-color:#525253}}`;
+//# sourceMappingURL=message-list.base.css.js.map

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

@@ -0,0 +1 @@
+{"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,m3DAAm3D,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;flex:1;overflow-y:auto;padding:16px}.message-list{display:flex;flex-direction:column;gap:12px}.day-separator{display:flex;align-items:center;margin:16px 0;color:#636366;font-size:.8rem}.day-separator::before,.day-separator::after{content:\"\";flex:1;height:1px;background-color:#a5a5a5;margin:0 8px}.typing-indicator{display:flex;align-items:center;gap:4px;padding:8px;margin-top:8px;animation:fadeIn .3s ease-in}.typing-dot{width:8px;height:8px;border-radius:50%;background-color:#7e7e81;opacity:.6}.typing-dot:nth-child(1){animation:bounce 1.2s infinite 0s}.typing-dot:nth-child(2){animation:bounce 1.2s infinite .2s}.typing-dot:nth-child(3){animation:bounce 1.2s infinite .4s}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}@media(prefers-color-scheme: dark){.day-separator::before,.day-separator::after{background-color:#525253}}`;\n"]}

package/components/chat/themes/message.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,3 @@
+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;--message-max-width: 75%}.message-container{display:flex;justify-content:flex-start;align-items:flex-end;gap:8px;margin-bottom:4px;animation:fadeIn .2s ease-out}.message-container.sent{display:flex;flex-direction:row-reverse}.avatar{width:32px;height:32px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0;opacity:0}.message-container.show-avatar .avatar{opacity:1}.message-container pre{background-color:#000;padding:8px;border-radius:4px;overflow-x:auto;margin:8px 0}.message-container code{font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:.9em;padding:2px 4px;border-radius:4px}.bubble{display:block;padding:12px 16px;border-radius:18px;color:#000;word-break:break-all;font-weight:400;line-height:1.4;position:relative;transition:all .2s ease;width:-moz-fit-content;width:fit-content}.sent{border-radius:18px 18px 4px}.sent .bubble{background-color:#e5e5ea}.received .bubble{border-radius:18px 18px 18px 4px}.meta{display:flex;font-size:.7rem;color:#636366;margin-top:4px;opacity:.8}.sent .meta{justify-content:flex-end}.time{margin-right:4px}@keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}`;
+//# sourceMappingURL=message.base.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/message.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,yoEAAyoE,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;--message-max-width: 75%}.message-container{display:flex;justify-content:flex-start;align-items:flex-end;gap:8px;margin-bottom:4px;animation:fadeIn .2s ease-out}.message-container.sent{display:flex;flex-direction:row-reverse}.avatar{width:32px;height:32px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0;opacity:0}.message-container.show-avatar .avatar{opacity:1}.message-container pre{background-color:#000;padding:8px;border-radius:4px;overflow-x:auto;margin:8px 0}.message-container code{font-family:SFMono-Regular,Consolas,\"Liberation Mono\",Menlo,monospace;font-size:.9em;padding:2px 4px;border-radius:4px}.bubble{display:block;padding:12px 16px;border-radius:18px;color:#000;word-break:break-all;font-weight:400;line-height:1.4;position:relative;transition:all .2s ease;width:-moz-fit-content;width:fit-content}.sent{border-radius:18px 18px 4px}.sent .bubble{background-color:#e5e5ea}.received .bubble{border-radius:18px 18px 18px 4px}.meta{display:flex;font-size:.7rem;color:#636366;margin-top:4px;opacity:.8}.sent .meta{justify-content:flex-end}.time{margin-right:4px}@keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}`;\n"]}

package/components/chat/types.d.ts

@@ -0,0 +1,46 @@
+import type { TemplateResult } from 'lit';
+export interface IgcMessage {
+    id: string;
+    text: string;
+    sender: string;
+    timestamp: Date;
+    attachments?: IgcMessageAttachment[];
+}
+export interface IgcMessageAttachment {
+    id: string;
+    name: string;
+    url?: string;
+    file?: File;
+    type?: string;
+    thumbnail?: string;
+}
+export type AttachmentTemplate = (attachments: IgcMessageAttachment[]) => TemplateResult;
+export type MessageActionsTemplate = (message: IgcMessage) => TemplateResult;
+export type IgcChatOptions = {
+    hideAvatar?: boolean;
+    hideTimestamp?: boolean;
+    hideUserName?: boolean;
+    disableAutoScroll?: boolean;
+    disableAttachments?: boolean;
+    /**
+     * The accepted files that could be attached.
+     * Defines the file types as a list of comma-separated values that the file input should accept.
+     */
+    acceptedFiles?: string;
+    headerText?: string;
+    templates?: IgcChatTemplates;
+};
+export type IgcChatTemplates = {
+    attachmentTemplate?: AttachmentTemplate;
+    attachmentHeaderTemplate?: AttachmentTemplate;
+    attachmentActionsTemplate?: AttachmentTemplate;
+    attachmentContentTemplate?: AttachmentTemplate;
+    messageActionsTemplate?: MessageActionsTemplate;
+};
+export declare const attachmentIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z\"/></svg>";
+export declare const sendButtonIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z\"/></svg>";
+export declare const closeIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>";
+export declare const fileIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z\"/></svg>";
+export declare const imageIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>";
+export declare const moreIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z\"/></svg>";
+export declare const previewIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z\"/></svg>";

package/components/chat/types.js

@@ -0,0 +1,8 @@
+export const attachmentIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>';
+export const sendButtonIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>';
+export const closeIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
+export const fileIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>';
+export const imageIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>';
+export const moreIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/></svg>';
+export const previewIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>';
+//# sourceMappingURL=types.js.map

package/components/chat/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chat/types.ts"],"names":[],"mappings":"AAiDA,MAAM,CAAC,MAAM,cAAc,GACzB,mbAAmb,CAAC;AACtb,MAAM,CAAC,MAAM,cAAc,GACzB,yNAAyN,CAAC;AAC5N,MAAM,CAAC,MAAM,SAAS,GACpB,gOAAgO,CAAC;AACnO,MAAM,CAAC,MAAM,QAAQ,GACnB,iSAAiS,CAAC;AACpS,MAAM,CAAC,MAAM,SAAS,GACpB,yUAAyU,CAAC;AAC5U,MAAM,CAAC,MAAM,QAAQ,GACnB,6aAA6a,CAAC;AAChb,MAAM,CAAC,MAAM,WAAW,GACtB,8SAA8S,CAAC","sourcesContent":["import type { TemplateResult } from 'lit';\n\n// export type IgcMessageAttachmentType = 'image' | 'file';\n\nexport interface IgcMessage {\n  id: string;\n  text: string;\n  sender: string;\n  timestamp: Date;\n  attachments?: IgcMessageAttachment[];\n}\n\nexport interface IgcMessageAttachment {\n  id: string;\n  name: string;\n  url?: string;\n  file?: File;\n  type?: string;\n  thumbnail?: string;\n}\n\nexport type AttachmentTemplate = (\n  attachments: IgcMessageAttachment[]\n) => TemplateResult;\nexport type MessageActionsTemplate = (message: IgcMessage) => TemplateResult;\n\nexport type IgcChatOptions = {\n  hideAvatar?: boolean;\n  hideTimestamp?: boolean;\n  hideUserName?: boolean;\n  disableAutoScroll?: boolean;\n  disableAttachments?: boolean;\n  /**\n   * The accepted files that could be attached.\n   * Defines the file types as a list of comma-separated values that the file input should accept.\n   */\n  acceptedFiles?: string;\n  headerText?: string;\n  templates?: IgcChatTemplates;\n};\n\nexport type IgcChatTemplates = {\n  attachmentTemplate?: AttachmentTemplate;\n  attachmentHeaderTemplate?: AttachmentTemplate;\n  attachmentActionsTemplate?: AttachmentTemplate;\n  attachmentContentTemplate?: AttachmentTemplate;\n  messageActionsTemplate?: MessageActionsTemplate;\n};\n\nexport const attachmentIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z\"/></svg>';\nexport const sendButtonIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z\"/></svg>';\nexport const closeIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>';\nexport const fileIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z\"/></svg>';\nexport const imageIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>';\nexport const moreIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z\"/></svg>';\nexport const previewIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e3e3e3\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z\"/></svg>';\n"]}

package/components/checkbox/checkbox-base.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
-import { type FormValue } from '../common/mixins/forms/form-value.js';
+import { type FormValueOf } from '../common/mixins/forms/form-value.js';
 import type { ToggleLabelPosition } from '../types.js';
 export interface IgcCheckboxChangeEventArgs {
     checked: boolean;
@@ -14,12 +14,12 @@ export interface IgcCheckboxComponentEventMap {
 declare const IgcCheckboxBaseComponent_base: Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedCheckboxElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCheckboxComponentEventMap>> & Constructor<LitElement>;
 export declare class IgcCheckboxBaseComponent extends IgcCheckboxBaseComponent_base {
     protected get __validators(): import("../common/validators.js").Validator<IgcCheckboxBaseComponent>[];
-    protected _kbFocus: import("../common/controllers/focus-ring.js").KeyboardFocusRingController;
-    protected _formValue: FormValue<boolean>;
+    protected readonly _focusRingManager: import("../common/controllers/focus-ring.js").KeyboardFocusRingController;
+    protected readonly _formValue: FormValueOf<boolean>;
     protected _value: string;
-    protected input: HTMLInputElement;
-    protected label: Array<Node>;
-    protected hideLabel: boolean;
+    protected readonly _input: HTMLInputElement;
+    protected readonly _label: Array<Node>;
+    protected _hideLabel: boolean;
     /**
      * The value attribute of the control.
      * @attr
@@ -37,7 +37,6 @@ export declare class IgcCheckboxBaseComponent extends IgcCheckboxBaseComponent_b
      * @attr label-position
      */
     labelPosition: ToggleLabelPosition;
-    constructor();
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     /** Simulates a click on the control. */
     click(): void;
@@ -45,8 +44,7 @@ export declare class IgcCheckboxBaseComponent extends IgcCheckboxBaseComponent_b
     focus(options?: FocusOptions): void;
     /** Removes focus from the control. */
     blur(): void;
-    protected handleClick(event: PointerEvent): void;
-    protected handleBlur(): void;
-    protected handleFocus(): void;
+    protected _handleClick(event: PointerEvent): void;
+    protected _handleFocus(): void;
 }
 export {};