Merge branch 'master' into skrastev/localization-intl

Author: rkaraivanov

src/components/chat/chat-input.ts

@@ -24,7 +24,7 @@ import type {
   ChatTemplateRenderer,
   IgcChatMessageAttachment,
 } from './types.js';
-import { getChatAcceptedFiles, getIconName } from './utils.js';
+import { adoptPageStyles, getChatAcceptedFiles, getIconName } from './utils.js';
 
 type DefaultInputRenderers = {
   input: ChatTemplateRenderer<ChatInputRenderContext>;
@@ -119,6 +119,12 @@ export default class IgcChatInputComponent extends LitElement {
     addThemingController(this, all);
   }
 
+  protected override firstUpdated(): void {
+    if (this._state.options?.adoptRootStyles) {
+      adoptPageStyles(this);
+    }
+  }
+
   /** @internal */
   public focusInput(): void {
     this._textInputElement.focus();

src/components/chat/chat-message.ts

@@ -19,7 +19,7 @@ import type {
   ChatTemplateRenderer,
   IgcChatMessage,
 } from './types.js';
-import { chatMessageAdoptPageStyles } from './utils.js';
+import { adoptPageStyles } from './utils.js';
 
 const LIKE_INACTIVE = 'thumb_up_inactive';
 const LIKE_ACTIVE = 'thumb_up_active';
@@ -89,7 +89,7 @@ export default class IgcChatMessageComponent extends LitElement {
 
   protected override firstUpdated(): void {
     if (this._state.options?.adoptRootStyles) {
-      chatMessageAdoptPageStyles(this);
+      adoptPageStyles(this);
     }
   }
 

src/components/chat/chat.ts

@@ -105,7 +105,8 @@ const Slots = setSlots(
   'suggestions',
   'suggestions-actions',
   'suggestion',
-  'empty-state'
+  'empty-state',
+  'typing-indicator'
 );
 
 /**
@@ -133,6 +134,7 @@ const Slots = setSlots(
  * @slot suggestions-actions - Slot for rendering additional actions.
  * @slot suggestion - Slot for rendering a single suggestion item.
  * @slot empty-state - Slot shown when there are no messages.
+ * @slot typing-indicator - Slot for the "is typing" indicator.
  *
  * @csspart chat-container - Styles the main chat container.
  * @csspart header - Styles the chat header container.
@@ -413,7 +415,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
         ${this._state.options?.isTyping
           ? html`
               <div part="typing-indicator">
-                ${this._getRenderer('typingIndicator')(ctx)}
+                <slot name="typing-indicator"
+                  >${this._getRenderer('typingIndicator')(ctx)}</slot
+                >
               </div>
             `
           : nothing}

src/components/chat/types.ts

@@ -234,6 +234,8 @@ export interface ChatRenderers {
   messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;
   /**
    * Custom renderer for the "is typing" indicator.
+   *
+   * @deprecated since 6.4.0. Use the `typing-indicator` slot.
    */
   typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;
   /**

src/components/chat/utils.ts

@@ -1,6 +1,5 @@
 import { adoptStyles, type LitElement } from 'lit';
 import { last } from '../common/util.js';
-import type IgcChatMessageComponent from './chat-message.js';
 import type { IgcChatMessageAttachment } from './types.js';
 
 export type ChatAcceptedFileTypes = {
@@ -110,9 +109,7 @@ export function isImageAttachment(
   );
 }
 
-export function chatMessageAdoptPageStyles(
-  message: IgcChatMessageComponent
-): void {
+export function adoptPageStyles(element: LitElement): void {
   const sheets: CSSStyleSheet[] = [];
 
   for (const sheet of document.styleSheets) {
@@ -129,6 +126,6 @@ export function chatMessageAdoptPageStyles(
     } catch {}
   }
 
-  const ctor = message.constructor as typeof LitElement;
-  adoptStyles(message.shadowRoot!, [...ctor.elementStyles, ...sheets]);
+  const ctor = element.constructor as typeof LitElement;
+  adoptStyles(element.shadowRoot!, [...ctor.elementStyles, ...sheets]);
 }

src/components/date-range-picker/date-range-picker.ts

@@ -306,6 +306,11 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   // #region General properties
 
+  /* @tsTwoWayProperty(true, "igcChange", "detail", false) */
+  /**
+   * The value of the picker
+   * @attr
+   */
   @property({ converter: convertToDateRange })
   public set value(value: DateRangeValue | string | null | undefined) {
     this._formValue.setValueAndFormState(convertToDateRange(value));

src/components/dialog/themes/dialog.base.scss

@@ -2,6 +2,9 @@
 @use 'styles/utilities' as *;
 
 :host {
+    --transition-duration: 350ms;
+
+    display: contents;
     border-style: none;
     padding: unset;
 }
@@ -80,9 +83,11 @@ dialog::backdrop {
     z-index: 10005;
     pointer-events: none;
     opacity: 0;
-    transition: opacity 350ms ease-out;
+    transition: opacity var(--transition-duration) ease-out;
 }
 
-:host([open]) [part='backdrop'] {
-    opacity: 1;
+:host([open]) {
+    [part='backdrop'] {
+        opacity: 1;
+    }
 }