igniteui-webcomponents 6.3.0-beta.0 → 6.3.0

package/components/chat/types.d.ts

@@ -1,7 +1,8 @@
+import type IgcChatComponent from './chat.js';
 /**
  * Represents a single chat message in the conversation.
  */
-export interface IgcMessage {
+export interface IgcChatMessage {
     /**
      * A unique identifier for the message.
      */
@@ -17,12 +18,12 @@ export interface IgcMessage {
     /**
      * The timestamp indicating when the message was sent.
      */
-    timestamp: Date;
+    timestamp?: string;
     /**
      * Optional list of attachments associated with the message,
      * such as images, files, or links.
      */
-    attachments?: IgcMessageAttachment[];
+    attachments?: IgcChatMessageAttachment[];
     /**
      * Optional list of reactions associated with the message.
      */
@@ -31,7 +32,7 @@ export interface IgcMessage {
 /**
  * Represents an attachment associated with a chat message.
  */
-export interface IgcMessageAttachment {
+export interface IgcChatMessageAttachment {
     /**
      * A unique identifier for the attachment.
      */
@@ -105,33 +106,177 @@ export type IgcChatOptions = {
      *
      * Default is `"below-messages"`.
      */
-    suggestionsPosition?: 'below-input' | 'below-messages';
+    suggestionsPosition?: ChatSuggestionsPosition;
     /**
      * Time in milliseconds to wait before dispatching a stop typing event.
      * Default is `3000`.
      */
     stopTypingDelay?: number;
-    renderers?: Partial<ChatRenderers>;
-};
-export type ChatRenderers = {
-    attachment?: ChatTemplateRenderer<IgcMessageAttachment>;
-    attachmentHeader?: ChatTemplateRenderer<IgcMessageAttachment>;
-    attachmentContent?: ChatTemplateRenderer<IgcMessageAttachment>;
-    message?: ChatTemplateRenderer<IgcMessage>;
-    messageHeader?: ChatTemplateRenderer<IgcMessage>;
-    messageContent?: ChatTemplateRenderer<IgcMessage>;
-    messageAttachments?: ChatTemplateRenderer<IgcMessage>;
-    messageActions?: ChatTemplateRenderer<IgcMessage>;
-    attachments?: ChatTemplateRenderer<IgcMessageAttachment[]>;
-    typingIndicator?: ChatTemplateRenderer<void>;
-    input?: ChatTemplateRenderer<string>;
-    inputActions?: ChatTemplateRenderer<void>;
-    inputAttachments?: ChatTemplateRenderer<IgcMessageAttachment[]>;
-    fileUploadButton?: ChatTemplateRenderer<void>;
-    sendButton?: ChatTemplateRenderer<void>;
+    /**
+     * A boolean flag that, when `true`, enables a **quick and dirty workaround** for styling
+     * components rendered within the Shadow DOM, from custom message renderers, by allowing them
+     * to inherit styles from the document's root. This can be useful for developers who prefer not to handle
+     * Shadow DOM encapsulation, but it is **not the recommended approach**.
+     *
+     * It is highly advised to use standard Web Component styling methods first, in this order:
+     *
+     * 1.  **CSS Variables and Parts API**: Use the exposed `::part` API with custom CSS variables to style
+     * your content in your custom renderers.
+     *
+     * 2.  **`link` elements**: For larger style sheets, link them directly within the Shadow DOM to maintain
+     * encapsulation.
+     *
+     * 3.  **Inline `<style>` tags**: Use these for small, self-contained styles within a template.
+     *
+     * This property should be used as a **last resort** as it can lead to **style leakage**, where
+     * global styles unexpectedly bleed into the component, breaking encapsulation and causing
+     * unpredictable visual issues.
+     *
+     * **WARNING**: This is a once time shot. Changing this property in runtime won't reflect
+     * its value.
+     */
+    adoptRootStyles?: boolean;
+    /**
+     * An object containing a collection of custom renderers for different parts of the chat UI.
+     */
+    renderers?: ChatRenderers;
 };
-export type ChatTemplateRenderer<T> = (ctx: {
-    param: T;
-    defaults: Partial<ChatRenderers>;
-    options?: IgcChatOptions;
-}) => unknown;
+/**
+ * Represents a user's reaction to a specific chat message.
+ */
+export interface IgcChatMessageReaction {
+    /**
+     * The chat message that the reaction is associated with.
+     */
+    message: IgcChatMessage;
+    /**
+     * The string representation of the reaction, such as an emoji or a string;
+     */
+    reaction: string;
+}
+/**
+ * A collection of optional rendering functions that allow for custom UI rendering.
+ * Each property is a function that takes a context object and returns a template result.
+ */
+export interface ChatRenderers {
+    /**
+     * Custom renderer for a single chat message attachment.
+     */
+    attachment?: ChatTemplateRenderer<ChatAttachmentRenderContext>;
+    /**
+     * Custom renderer for the content of an attachment.
+     */
+    attachmentContent?: ChatTemplateRenderer<ChatAttachmentRenderContext>;
+    /**
+     * Custom renderer for the header of an attachment.
+     */
+    attachmentHeader?: ChatTemplateRenderer<ChatAttachmentRenderContext>;
+    /**
+     * Custom renderer for the file upload button in the input area.
+     */
+    fileUploadButton?: ChatTemplateRenderer<ChatRenderContext>;
+    /**
+     * Custom renderer for the main chat input field.
+     */
+    input?: ChatTemplateRenderer<ChatInputRenderContext>;
+    /**
+     * Custom renderer for the actions container within the input area.
+     */
+    inputActions?: ChatTemplateRenderer<ChatRenderContext>;
+    /**
+     * Custom renderer for the actions at the end of the input area.
+     */
+    inputActionsEnd?: ChatTemplateRenderer<ChatRenderContext>;
+    /**
+     * Custom renderer for the actions at the start of the input area.
+     */
+    inputActionsStart?: ChatTemplateRenderer<ChatRenderContext>;
+    /**
+     * Custom renderer for the attachment previews within the input field.
+     */
+    inputAttachments?: ChatTemplateRenderer<ChatInputRenderContext>;
+    /**
+     * Custom renderer for an entire chat message bubble.
+     */
+    message?: ChatTemplateRenderer<ChatMessageRenderContext>;
+    /**
+     * Custom renderer for message-specific actions (e.g., reply or delete buttons).
+     */
+    messageActions?: ChatTemplateRenderer<ChatMessageRenderContext>;
+    /**
+     * Custom renderer for the attachments associated with a message.
+     */
+    messageAttachments?: ChatTemplateRenderer<ChatMessageRenderContext>;
+    /**
+     * Custom renderer for the main text and content of a message.
+     */
+    messageContent?: ChatTemplateRenderer<ChatMessageRenderContext>;
+    /**
+     * Custom renderer for the header of a message, including sender and timestamp.
+     */
+    messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;
+    /**
+     * Custom renderer for the "is typing" indicator.
+     */
+    typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;
+    /**
+     * Custom renderer for the message send button.
+     */
+    sendButton?: ChatTemplateRenderer<ChatRenderContext>;
+    /**
+     * Custom renderer for the prefix text shown before suggestions.
+     */
+    suggestionPrefix?: ChatTemplateRenderer<ChatRenderContext>;
+}
+/**
+ * A generic type for a function that serves as a custom renderer.
+ * It takes a context object of type T and returns a template result.
+ */
+export type ChatTemplateRenderer<T> = (ctx: T) => unknown;
+/**
+ * A string literal type defining the two possible positions for chat suggestions.
+ */
+export type ChatSuggestionsPosition = 'below-input' | 'below-messages';
+/**
+ * The base context object passed to custom renderer functions, containing the chat component instance.
+ */
+export interface ChatRenderContext {
+    /**
+     * The instance of the IgcChatComponent.
+     */
+    instance: IgcChatComponent;
+}
+/**
+ * The context object for renderers that deal with the chat input area.
+ * It extends the base context with input-specific properties.
+ */
+export interface ChatInputRenderContext extends ChatRenderContext {
+    /**
+     * The list of attachments currently in the input area.
+     */
+    attachments: IgcChatMessageAttachment[];
+    /**
+     * The current value of the input field.
+     */
+    value: string;
+}
+/**
+ * The context object for renderers that deal with a specific chat message.
+ * It extends the base context with the message data.
+ */
+export interface ChatMessageRenderContext extends ChatRenderContext {
+    /**
+     * The specific chat message being rendered.
+     */
+    message: IgcChatMessage;
+}
+/**
+ * The context object for renderers that deal with a specific attachment within a message.
+ * It extends the message context with the attachment data.
+ */
+export interface ChatAttachmentRenderContext extends ChatMessageRenderContext {
+    /**
+     * The specific attachment being rendered.
+     */
+    attachment: IgcChatMessageAttachment;
+}

package/components/chat/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chat/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Represents a single chat message in the conversation.\n */\nexport interface IgcMessage {\n  /**\n   * A unique identifier for the message.\n   */\n  id: string;\n\n  /**\n   * The textual content of the message.\n   */\n  text: string;\n\n  /**\n   * The identifier or name of the sender of the message.\n   */\n  sender: string;\n\n  /**\n   * The timestamp indicating when the message was sent.\n   */\n  timestamp: Date;\n\n  /**\n   * Optional list of attachments associated with the message,\n   * such as images, files, or links.\n   */\n  attachments?: IgcMessageAttachment[];\n\n  /**\n   * Optional list of reactions associated with the message.\n   */\n  reactions?: string[];\n}\n\n/**\n * Represents an attachment associated with a chat message.\n */\nexport interface IgcMessageAttachment {\n  /**\n   * A unique identifier for the attachment.\n   */\n  id: string;\n\n  /**\n   * The display name of the attachment (e.g. file name).\n   */\n  name: string;\n\n  /**\n   * The URL from which the attachment can be downloaded or viewed.\n   * Typically used for attachments stored on a server or CDN.\n   */\n  url?: string;\n\n  /**\n   * The actual File object, if the attachment was provided locally (e.g. via upload).\n   */\n  file?: File;\n\n  /**\n   * The MIME type or a custom type identifier for the attachment (e.g. \"image/png\", \"pdf\", \"audio\").\n   */\n  type?: string;\n\n  /**\n   * Optional URL to a thumbnail preview of the attachment (e.g. for images or videos).\n   */\n  thumbnail?: string;\n}\n\n/**\n * Configuration options for customizing the behavior and appearance of the chat component.\n */\nexport type IgcChatOptions = {\n  /**\n   * The ID of the current user. Used to differentiate between incoming and outgoing messages.\n   */\n  currentUserId?: string;\n  /**\n   * If `true`, prevents the chat from automatically scrolling to the latest message.\n   */\n  disableAutoScroll?: boolean;\n  /**\n   * If `true`, disables the ability to upload and send attachments.\n   * Defaults to `false`.\n   */\n  disableInputAttachments?: boolean;\n  /**\n   * Indicates whether the other user is currently typing a message.\n   */\n  isTyping?: boolean;\n  /**\n   * The accepted files that could be attached.\n   * Defines the file types as a list of comma-separated values (e.g. \"image/*,.pdf\") that the file input should accept.\n   */\n  acceptedFiles?: string;\n  /**\n   * Optional header text to display at the top of the chat component.\n   */\n  headerText?: string;\n  /**\n   * Optional placeholder text for the chat input area.\n   * Provides a hint to the user about what they can type (e.g. \"Type a message...\").\n   */\n  inputPlaceholder?: string;\n  /**\n   * Suggested text snippets or quick replies that can be shown as user-selectable options.\n   */\n  suggestions?: string[];\n  /**\n   * Controls the position of the chat suggestions within the component layout.\n   *\n   * - `\"below-input\"`: Renders suggestions below the chat input area.\n   * - `\"below-messages\"`: Renders suggestions below the chat messages area.\n   *\n   * Default is `\"below-messages\"`.\n   */\n  suggestionsPosition?: 'below-input' | 'below-messages';\n  /**\n   * Time in milliseconds to wait before dispatching a stop typing event.\n   * Default is `3000`.\n   */\n  stopTypingDelay?: number;\n\n  renderers?: Partial<ChatRenderers>;\n};\n\nexport type ChatRenderers = {\n  attachment?: ChatTemplateRenderer<IgcMessageAttachment>;\n  attachmentHeader?: ChatTemplateRenderer<IgcMessageAttachment>;\n  attachmentContent?: ChatTemplateRenderer<IgcMessageAttachment>;\n  message?: ChatTemplateRenderer<IgcMessage>;\n  messageHeader?: ChatTemplateRenderer<IgcMessage>;\n  messageContent?: ChatTemplateRenderer<IgcMessage>;\n  messageAttachments?: ChatTemplateRenderer<IgcMessage>;\n  messageActions?: ChatTemplateRenderer<IgcMessage>;\n  attachments?: ChatTemplateRenderer<IgcMessageAttachment[]>;\n  typingIndicator?: ChatTemplateRenderer<void>;\n  input?: ChatTemplateRenderer<string>;\n  inputActions?: ChatTemplateRenderer<void>;\n  inputAttachments?: ChatTemplateRenderer<IgcMessageAttachment[]>;\n  fileUploadButton?: ChatTemplateRenderer<void>;\n  sendButton?: ChatTemplateRenderer<void>;\n};\n\nexport type ChatTemplateRenderer<T> = (ctx: {\n  param: T;\n  defaults: Partial<ChatRenderers>;\n  options?: IgcChatOptions;\n}) => unknown;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chat/types.ts"],"names":[],"mappings":"","sourcesContent":["import type IgcChatComponent from './chat.js';\n\n/**\n * Represents a single chat message in the conversation.\n */\nexport interface IgcChatMessage {\n  /**\n   * A unique identifier for the message.\n   */\n  id: string;\n\n  /**\n   * The textual content of the message.\n   */\n  text: string;\n\n  /**\n   * The identifier or name of the sender of the message.\n   */\n  sender: string;\n\n  /**\n   * The timestamp indicating when the message was sent.\n   */\n  timestamp?: string;\n\n  /**\n   * Optional list of attachments associated with the message,\n   * such as images, files, or links.\n   */\n  attachments?: IgcChatMessageAttachment[];\n\n  /**\n   * Optional list of reactions associated with the message.\n   */\n  reactions?: string[];\n}\n\n/**\n * Represents an attachment associated with a chat message.\n */\nexport interface IgcChatMessageAttachment {\n  /**\n   * A unique identifier for the attachment.\n   */\n  id: string;\n\n  /**\n   * The display name of the attachment (e.g. file name).\n   */\n  name: string;\n\n  /**\n   * The URL from which the attachment can be downloaded or viewed.\n   * Typically used for attachments stored on a server or CDN.\n   */\n  url?: string;\n\n  /**\n   * The actual File object, if the attachment was provided locally (e.g. via upload).\n   */\n  file?: File;\n\n  /**\n   * The MIME type or a custom type identifier for the attachment (e.g. \"image/png\", \"pdf\", \"audio\").\n   */\n  type?: string;\n\n  /**\n   * Optional URL to a thumbnail preview of the attachment (e.g. for images or videos).\n   */\n  thumbnail?: string;\n}\n\n/**\n * Configuration options for customizing the behavior and appearance of the chat component.\n */\nexport type IgcChatOptions = {\n  /**\n   * The ID of the current user. Used to differentiate between incoming and outgoing messages.\n   */\n  currentUserId?: string;\n  /**\n   * If `true`, prevents the chat from automatically scrolling to the latest message.\n   */\n  disableAutoScroll?: boolean;\n  /**\n   * If `true`, disables the ability to upload and send attachments.\n   * Defaults to `false`.\n   */\n  disableInputAttachments?: boolean;\n  /**\n   * Indicates whether the other user is currently typing a message.\n   */\n  isTyping?: boolean;\n  /**\n   * The accepted files that could be attached.\n   * Defines the file types as a list of comma-separated values (e.g. \"image/*,.pdf\") that the file input should accept.\n   */\n  acceptedFiles?: string;\n  /**\n   * Optional header text to display at the top of the chat component.\n   */\n  headerText?: string;\n  /**\n   * Optional placeholder text for the chat input area.\n   * Provides a hint to the user about what they can type (e.g. \"Type a message...\").\n   */\n  inputPlaceholder?: string;\n  /**\n   * Suggested text snippets or quick replies that can be shown as user-selectable options.\n   */\n  suggestions?: string[];\n  /**\n   * Controls the position of the chat suggestions within the component layout.\n   *\n   * - `\"below-input\"`: Renders suggestions below the chat input area.\n   * - `\"below-messages\"`: Renders suggestions below the chat messages area.\n   *\n   * Default is `\"below-messages\"`.\n   */\n  suggestionsPosition?: ChatSuggestionsPosition;\n  /**\n   * Time in milliseconds to wait before dispatching a stop typing event.\n   * Default is `3000`.\n   */\n  stopTypingDelay?: number;\n\n  /**\n   * A boolean flag that, when `true`, enables a **quick and dirty workaround** for styling\n   * components rendered within the Shadow DOM, from custom message renderers, by allowing them\n   * to inherit styles from the document's root. This can be useful for developers who prefer not to handle\n   * Shadow DOM encapsulation, but it is **not the recommended approach**.\n   *\n   * It is highly advised to use standard Web Component styling methods first, in this order:\n   *\n   * 1.  **CSS Variables and Parts API**: Use the exposed `::part` API with custom CSS variables to style\n   * your content in your custom renderers.\n   *\n   * 2.  **`link` elements**: For larger style sheets, link them directly within the Shadow DOM to maintain\n   * encapsulation.\n   *\n   * 3.  **Inline `<style>` tags**: Use these for small, self-contained styles within a template.\n   *\n   * This property should be used as a **last resort** as it can lead to **style leakage**, where\n   * global styles unexpectedly bleed into the component, breaking encapsulation and causing\n   * unpredictable visual issues.\n   *\n   * **WARNING**: This is a once time shot. Changing this property in runtime won't reflect\n   * its value.\n   */\n  adoptRootStyles?: boolean;\n\n  /**\n   * An object containing a collection of custom renderers for different parts of the chat UI.\n   */\n  renderers?: ChatRenderers;\n};\n\n/**\n * Represents a user's reaction to a specific chat message.\n */\nexport interface IgcChatMessageReaction {\n  /**\n   * The chat message that the reaction is associated with.\n   */\n  message: IgcChatMessage;\n  /**\n   * The string representation of the reaction, such as an emoji or a string;\n   */\n  reaction: string;\n}\n\n/**\n * A collection of optional rendering functions that allow for custom UI rendering.\n * Each property is a function that takes a context object and returns a template result.\n */\nexport interface ChatRenderers {\n  /**\n   * Custom renderer for a single chat message attachment.\n   */\n  attachment?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n  /**\n   * Custom renderer for the content of an attachment.\n   */\n  attachmentContent?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n  /**\n   * Custom renderer for the header of an attachment.\n   */\n  attachmentHeader?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n  /**\n   * Custom renderer for the file upload button in the input area.\n   */\n  fileUploadButton?: ChatTemplateRenderer<ChatRenderContext>;\n  /**\n   * Custom renderer for the main chat input field.\n   */\n  input?: ChatTemplateRenderer<ChatInputRenderContext>;\n  /**\n   * Custom renderer for the actions container within the input area.\n   */\n  inputActions?: ChatTemplateRenderer<ChatRenderContext>;\n  /**\n   * Custom renderer for the actions at the end of the input area.\n   */\n  inputActionsEnd?: ChatTemplateRenderer<ChatRenderContext>;\n  /**\n   * Custom renderer for the actions at the start of the input area.\n   */\n  inputActionsStart?: ChatTemplateRenderer<ChatRenderContext>;\n  /**\n   * Custom renderer for the attachment previews within the input field.\n   */\n  inputAttachments?: ChatTemplateRenderer<ChatInputRenderContext>;\n  /**\n   * Custom renderer for an entire chat message bubble.\n   */\n  message?: ChatTemplateRenderer<ChatMessageRenderContext>;\n  /**\n   * Custom renderer for message-specific actions (e.g., reply or delete buttons).\n   */\n  messageActions?: ChatTemplateRenderer<ChatMessageRenderContext>;\n  /**\n   * Custom renderer for the attachments associated with a message.\n   */\n  messageAttachments?: ChatTemplateRenderer<ChatMessageRenderContext>;\n  /**\n   * Custom renderer for the main text and content of a message.\n   */\n  messageContent?: ChatTemplateRenderer<ChatMessageRenderContext>;\n  /**\n   * Custom renderer for the header of a message, including sender and timestamp.\n   */\n  messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;\n  /**\n   * Custom renderer for the \"is typing\" indicator.\n   */\n  typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;\n  /**\n   * Custom renderer for the message send button.\n   */\n  sendButton?: ChatTemplateRenderer<ChatRenderContext>;\n  /**\n   * Custom renderer for the prefix text shown before suggestions.\n   */\n  suggestionPrefix?: ChatTemplateRenderer<ChatRenderContext>;\n}\n\n/**\n * A generic type for a function that serves as a custom renderer.\n * It takes a context object of type T and returns a template result.\n */\nexport type ChatTemplateRenderer<T> = (ctx: T) => unknown;\n\n/**\n * A string literal type defining the two possible positions for chat suggestions.\n */\nexport type ChatSuggestionsPosition = 'below-input' | 'below-messages';\n\n/**\n * The base context object passed to custom renderer functions, containing the chat component instance.\n */\nexport interface ChatRenderContext {\n  /**\n   * The instance of the IgcChatComponent.\n   */\n  instance: IgcChatComponent;\n}\n\n/**\n * The context object for renderers that deal with the chat input area.\n * It extends the base context with input-specific properties.\n */\nexport interface ChatInputRenderContext extends ChatRenderContext {\n  /**\n   * The list of attachments currently in the input area.\n   */\n  attachments: IgcChatMessageAttachment[];\n  /**\n   * The current value of the input field.\n   */\n  value: string;\n}\n\n/**\n * The context object for renderers that deal with a specific chat message.\n * It extends the base context with the message data.\n */\nexport interface ChatMessageRenderContext extends ChatRenderContext {\n  /**\n   * The specific chat message being rendered.\n   */\n  message: IgcChatMessage;\n}\n\n/**\n * The context object for renderers that deal with a specific attachment within a message.\n * It extends the message context with the attachment data.\n */\nexport interface ChatAttachmentRenderContext extends ChatMessageRenderContext {\n  /**\n   * The specific attachment being rendered.\n   */\n  attachment: IgcChatMessageAttachment;\n}\n"]}

package/components/chat/utils.d.ts

@@ -1,5 +1,5 @@
 import type IgcChatMessageComponent from './chat-message.js';
-import type { IgcMessageAttachment } from './types.js';
+import type { IgcChatMessageAttachment } from './types.js';
 export type ChatAcceptedFileTypes = {
     extensions: Set<string>;
     mimeTypes: Set<string>;
@@ -10,7 +10,7 @@ export declare function parseAcceptedFileTypes(fileTypes: string): ChatAcceptedF
 export declare function isAcceptedFileType(file: File, accepted: ChatAcceptedFileTypes | null): boolean;
 export declare function getChatAcceptedFiles(event: DragEvent, accepted: ChatAcceptedFileTypes | null): File[];
 export declare function getIconName(fileType?: string): "attach_document" | "attach_image";
-export declare function createAttachmentURL(attachment: IgcMessageAttachment): string;
+export declare function createAttachmentURL(attachment: IgcChatMessageAttachment): string;
 export declare function getFileExtension(name: string): string;
-export declare function showChatActionsTooltip(target: Element, message: string): void;
+export declare function isImageAttachment(attachment: IgcChatMessageAttachment | File): boolean;
 export declare function chatMessageAdoptPageStyles(message: IgcChatMessageComponent): void;

package/components/chat/utils.js

@@ -1,7 +1,5 @@
 import { adoptStyles } from 'lit';
 import { last } from '../common/util.js';
-import IgcTooltipComponent from '../tooltip/tooltip.js';
-let actionsTooltip;
 export const ChatFileTypeIcons = new Map(Object.entries({
     css: 'file_css',
     csv: 'file_csv',
@@ -43,7 +41,9 @@ export function isAcceptedFileType(file, accepted) {
         wildcardTypes.has(fileBaseType));
 }
 export function getChatAcceptedFiles(event, accepted) {
-    return Array.from(event.dataTransfer?.files ?? []).filter((file) => isAcceptedFileType(file, accepted));
+    return Array.from(event.dataTransfer?.items ?? [])
+        .filter((item) => item.kind === 'file' && isAcceptedFileType(item.getAsFile(), accepted))
+        .map((item) => item.getAsFile());
 }
 export function getIconName(fileType) {
     return fileType?.startsWith('image') ? 'attach_image' : 'attach_document';
@@ -58,15 +58,11 @@ export function getFileExtension(name) {
     const parts = name.split('.');
     return parts.length > 1 ? last(parts) : '';
 }
-export function showChatActionsTooltip(target, message) {
-    if (!actionsTooltip) {
-        actionsTooltip = document.createElement(IgcTooltipComponent.tagName);
-        actionsTooltip.hideTriggers = 'pointerleave,click,blur';
-        actionsTooltip.hideDelay = 100;
-        document.body.appendChild(actionsTooltip);
+export function isImageAttachment(attachment) {
+    if (attachment instanceof File) {
+        return attachment.type.startsWith('image/');
     }
-    actionsTooltip.message = message;
-    actionsTooltip.show(target);
+    return Boolean(attachment.type === 'image' || attachment.file?.type.startsWith('image/'));
 }
 export function chatMessageAdoptPageStyles(message) {
     const sheets = [];

package/components/chat/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/chat/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAmB,MAAM,KAAK,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAIxD,IAAI,cAAmC,CAAC;AAQxC,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,GAAG,CACtC,MAAM,CAAC,OAAO,CAAC;IACb,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,UAAU;IACf,IAAI,EAAE,WAAW;IACjB,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,WAAW;IACjB,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,UAAU;IACf,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,OAAO,EAAE,cAAc;CACxB,CAAC,CACH,CAAC;AAEF,MAAM,UAAU,sBAAsB,CACpC,SAAiB;IAEjB,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5E,OAAO;QACL,UAAU,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3D,SAAS,EAAE,IAAI,GAAG,CAChB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC7D;QACD,aAAa,EAAE,IAAI,GAAG,CACpB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CACjE;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,IAAU,EACV,QAAsC;IAEtC,IAAI,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;IAC1D,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IACzC,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,CAAC;IACtE,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE3C,OAAO,CACL,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC;QAC7B,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;QACvB,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,CAChC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,KAAgB,EAChB,QAAsC;IAEtC,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CACjE,kBAAkB,CAAC,IAAI,EAAE,QAAQ,CAAC,CACnC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,QAAiB;IAC3C,OAAO,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC;AAC5E,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,UAAgC;IAClE,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC;QACpB,OAAO,GAAG,CAAC,eAAe,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAY;IAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,MAAe,EAAE,OAAe;IACrE,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACrE,cAAc,CAAC,YAAY,GAAG,yBAAyB,CAAC;QACxD,cAAc,CAAC,SAAS,GAAG,GAAG,CAAC;QAC/B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC;IACD,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC;IACjC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9B,CAAC;AAGD,MAAM,UAAU,0BAA0B,CACxC,OAAgC;IAEhC,MAAM,MAAM,GAAoB,EAAE,CAAC;IAEnC,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC;QACzC,IAAI,CAAC;YACH,MAAM,WAAW,GAAG,IAAI,aAAa,EAAE,CAAC;YACxC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAClC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACvC,CAAC;YACD,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3B,CAAC;QAAC,MAAM,CAAC,CAAA,CAAC;IACZ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,WAAgC,CAAC;IACtD,WAAW,CAAC,OAAO,CAAC,UAAW,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC;AACvE,CAAC","sourcesContent":["import { adoptStyles, type LitElement } from 'lit';\nimport { last } from '../common/util.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.js';\nimport type IgcChatMessageComponent from './chat-message.js';\nimport type { IgcMessageAttachment } from './types.js';\n\nlet actionsTooltip: IgcTooltipComponent;\n\nexport type ChatAcceptedFileTypes = {\n  extensions: Set<string>;\n  mimeTypes: Set<string>;\n  wildcardTypes: Set<string>;\n};\n\nexport const ChatFileTypeIcons = new Map(\n  Object.entries({\n    css: 'file_css',\n    csv: 'file_csv',\n    doc: 'file_doc',\n    docx: 'file_doc',\n    htm: 'file_htm',\n    html: 'file_html',\n    js: 'file_js',\n    json: 'file_json',\n    pdf: 'file_pdf',\n    rtf: 'file_rtf',\n    svg: 'file_svg',\n    txt: 'file_txt',\n    url: 'file_link',\n    xls: 'file_xls',\n    xlsx: 'file_xls',\n    xml: 'file_xml',\n    zip: 'file_zip',\n    default: 'file_generic',\n  })\n);\n\nexport function parseAcceptedFileTypes(\n  fileTypes: string\n): ChatAcceptedFileTypes {\n  const types = fileTypes.split(',').map((each) => each.trim().toLowerCase());\n  return {\n    extensions: new Set(types.filter((t) => t.startsWith('.'))),\n    mimeTypes: new Set(\n      types.filter((t) => !t.startsWith('.') && !t.endsWith('/*'))\n    ),\n    wildcardTypes: new Set(\n      types.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2))\n    ),\n  };\n}\n\nexport function isAcceptedFileType(\n  file: File,\n  accepted: ChatAcceptedFileTypes | null\n): boolean {\n  if (!(accepted && file)) {\n    return true;\n  }\n\n  const { extensions, mimeTypes, wildcardTypes } = accepted;\n  const fileType = file.type.toLowerCase();\n  const fileExtension = `.${last(file.name.split('.'))?.toLowerCase()}`;\n  const [fileBaseType] = fileType.split('/');\n\n  return (\n    extensions.has(fileExtension) ||\n    mimeTypes.has(fileType) ||\n    wildcardTypes.has(fileBaseType)\n  );\n}\n\nexport function getChatAcceptedFiles(\n  event: DragEvent,\n  accepted: ChatAcceptedFileTypes | null\n): File[] {\n  return Array.from(event.dataTransfer?.files ?? []).filter((file) =>\n    isAcceptedFileType(file, accepted)\n  );\n}\n\nexport function getIconName(fileType?: string) {\n  return fileType?.startsWith('image') ? 'attach_image' : 'attach_document';\n}\n\nexport function createAttachmentURL(attachment: IgcMessageAttachment): string {\n  if (attachment.file) {\n    return URL.createObjectURL(attachment.file);\n  }\n\n  return attachment.url || '';\n}\n\nexport function getFileExtension(name: string): string {\n  const parts = name.split('.');\n  return parts.length > 1 ? last(parts) : '';\n}\n\nexport function showChatActionsTooltip(target: Element, message: string): void {\n  if (!actionsTooltip) {\n    actionsTooltip = document.createElement(IgcTooltipComponent.tagName);\n    actionsTooltip.hideTriggers = 'pointerleave,click,blur';\n    actionsTooltip.hideDelay = 100;\n    document.body.appendChild(actionsTooltip);\n  }\n  actionsTooltip.message = message;\n  actionsTooltip.show(target);\n}\n\n// REVIEW: Maybe put that behind a configuration flag as this is nasty.\nexport function chatMessageAdoptPageStyles(\n  message: IgcChatMessageComponent\n): void {\n  const sheets: CSSStyleSheet[] = [];\n\n  for (const sheet of document.styleSheets) {\n    try {\n      const constructed = new CSSStyleSheet();\n      for (const rule of sheet.cssRules) {\n        constructed.insertRule(rule.cssText);\n      }\n      sheets.push(constructed);\n    } catch {}\n  }\n\n  const ctor = message.constructor as typeof LitElement;\n  adoptStyles(message.shadowRoot!, [...ctor.elementStyles, ...sheets]);\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/chat/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAmB,MAAM,KAAK,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAUzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,GAAG,CACtC,MAAM,CAAC,OAAO,CAAC;IACb,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,UAAU;IACf,IAAI,EAAE,WAAW;IACjB,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,WAAW;IACjB,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,UAAU;IACf,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,OAAO,EAAE,cAAc;CACxB,CAAC,CACH,CAAC;AAEF,MAAM,UAAU,sBAAsB,CACpC,SAAiB;IAEjB,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5E,OAAO;QACL,UAAU,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3D,SAAS,EAAE,IAAI,GAAG,CAChB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC7D;QACD,aAAa,EAAE,IAAI,GAAG,CACpB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CACjE;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,IAAU,EACV,QAAsC;IAEtC,IAAI,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;IAC1D,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IACzC,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,CAAC;IACtE,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE3C,OAAO,CACL,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC;QAC7B,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;QACvB,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,CAChC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,KAAgB,EAChB,QAAsC;IAEtC,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC;SAC/C,MAAM,CACL,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAG,EAAE,QAAQ,CAAC,CAC1E;SACA,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,EAAG,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,QAAiB;IAC3C,OAAO,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC;AAC5E,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,UAAoC;IAEpC,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC;QACpB,OAAO,GAAG,CAAC,eAAe,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAY;IAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,UAA2C;IAE3C,IAAI,UAAU,YAAY,IAAI,EAAE,CAAC;QAC/B,OAAO,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC9C,CAAC;IAED,OAAO,OAAO,CACZ,UAAU,CAAC,IAAI,KAAK,OAAO,IAAI,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAC1E,CAAC;AACJ,CAAC;AAGD,MAAM,UAAU,0BAA0B,CACxC,OAAgC;IAEhC,MAAM,MAAM,GAAoB,EAAE,CAAC;IAEnC,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC;QACzC,IAAI,CAAC;YACH,MAAM,WAAW,GAAG,IAAI,aAAa,EAAE,CAAC;YACxC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAClC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACvC,CAAC;YACD,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3B,CAAC;QAAC,MAAM,CAAC,CAAA,CAAC;IACZ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,WAAgC,CAAC;IACtD,WAAW,CAAC,OAAO,CAAC,UAAW,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC;AACvE,CAAC","sourcesContent":["import { adoptStyles, type LitElement } from 'lit';\nimport { last } from '../common/util.js';\nimport type IgcChatMessageComponent from './chat-message.js';\nimport type { IgcChatMessageAttachment } from './types.js';\n\nexport type ChatAcceptedFileTypes = {\n  extensions: Set<string>;\n  mimeTypes: Set<string>;\n  wildcardTypes: Set<string>;\n};\n\nexport const ChatFileTypeIcons = new Map(\n  Object.entries({\n    css: 'file_css',\n    csv: 'file_csv',\n    doc: 'file_doc',\n    docx: 'file_doc',\n    htm: 'file_htm',\n    html: 'file_html',\n    js: 'file_js',\n    json: 'file_json',\n    pdf: 'file_pdf',\n    rtf: 'file_rtf',\n    svg: 'file_svg',\n    txt: 'file_txt',\n    url: 'file_link',\n    xls: 'file_xls',\n    xlsx: 'file_xls',\n    xml: 'file_xml',\n    zip: 'file_zip',\n    default: 'file_generic',\n  })\n);\n\nexport function parseAcceptedFileTypes(\n  fileTypes: string\n): ChatAcceptedFileTypes {\n  const types = fileTypes.split(',').map((each) => each.trim().toLowerCase());\n  return {\n    extensions: new Set(types.filter((t) => t.startsWith('.'))),\n    mimeTypes: new Set(\n      types.filter((t) => !t.startsWith('.') && !t.endsWith('/*'))\n    ),\n    wildcardTypes: new Set(\n      types.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2))\n    ),\n  };\n}\n\nexport function isAcceptedFileType(\n  file: File,\n  accepted: ChatAcceptedFileTypes | null\n): boolean {\n  if (!(accepted && file)) {\n    return true;\n  }\n\n  const { extensions, mimeTypes, wildcardTypes } = accepted;\n  const fileType = file.type.toLowerCase();\n  const fileExtension = `.${last(file.name.split('.'))?.toLowerCase()}`;\n  const [fileBaseType] = fileType.split('/');\n\n  return (\n    extensions.has(fileExtension) ||\n    mimeTypes.has(fileType) ||\n    wildcardTypes.has(fileBaseType)\n  );\n}\n\nexport function getChatAcceptedFiles(\n  event: DragEvent,\n  accepted: ChatAcceptedFileTypes | null\n): File[] {\n  return Array.from(event.dataTransfer?.items ?? [])\n    .filter(\n      (item) =>\n        item.kind === 'file' && isAcceptedFileType(item.getAsFile()!, accepted)\n    )\n    .map((item) => item.getAsFile()!);\n}\n\nexport function getIconName(fileType?: string) {\n  return fileType?.startsWith('image') ? 'attach_image' : 'attach_document';\n}\n\nexport function createAttachmentURL(\n  attachment: IgcChatMessageAttachment\n): string {\n  if (attachment.file) {\n    return URL.createObjectURL(attachment.file);\n  }\n\n  return attachment.url || '';\n}\n\nexport function getFileExtension(name: string): string {\n  const parts = name.split('.');\n  return parts.length > 1 ? last(parts) : '';\n}\n\nexport function isImageAttachment(\n  attachment: IgcChatMessageAttachment | File\n): boolean {\n  if (attachment instanceof File) {\n    return attachment.type.startsWith('image/');\n  }\n\n  return Boolean(\n    attachment.type === 'image' || attachment.file?.type.startsWith('image/')\n  );\n}\n\n// REVIEW: Maybe put that behind a configuration flag as this is nasty.\nexport function chatMessageAdoptPageStyles(\n  message: IgcChatMessageComponent\n): void {\n  const sheets: CSSStyleSheet[] = [];\n\n  for (const sheet of document.styleSheets) {\n    try {\n      const constructed = new CSSStyleSheet();\n      for (const rule of sheet.cssRules) {\n        constructed.insertRule(rule.cssText);\n      }\n      sheets.push(constructed);\n    } catch {}\n  }\n\n  const ctor = message.constructor as typeof LitElement;\n  adoptStyles(message.shadowRoot!, [...ctor.elementStyles, ...sheets]);\n}\n"]}

package/components/checkbox/checkbox.js

@@ -17,7 +17,7 @@ import { styles } from './themes/checkbox.base.css.js';
 import { all } from './themes/checkbox-themes.js';
 import { styles as shared } from './themes/shared/checkbox/checkbox.common.css.js';
 let nextId = 1;
-class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
+export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
     constructor() {
         super(...arguments);
         this._themes = addThemingController(this, all);
@@ -25,6 +25,8 @@ class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
         this._labelId = `checkbox-label-${this._inputId}`;
         this.indeterminate = false;
     }
+    static { this.tagName = 'igc-checkbox'; }
+    static { this.styles = [styles, shared]; }
     static register() {
         registerComponent(IgcCheckboxComponent, IgcValidationContainerComponent);
     }
@@ -99,9 +101,6 @@ class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
     `;
     }
 }
-IgcCheckboxComponent.tagName = 'igc-checkbox';
-IgcCheckboxComponent.styles = [styles, shared];
-export default IgcCheckboxComponent;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcCheckboxComponent.prototype, "indeterminate", void 0);

package/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,+BAA+B,MAAM,iDAAiD,CAAC;AAC9F,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,iDAAiD,CAAC;AAEnF,IAAI,MAAM,GAAG,CAAC,CAAC;AAoBf,MAAqB,oBAAqB,SAAQ,wBAAwB;IAA1E;;QASmB,YAAO,GAAG,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAE1C,aAAQ,GAAG,YAAY,MAAM,EAAE,EAAE,CAAC;QAClC,aAAQ,GAAG,kBAAkB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAOvD,kBAAa,GAAG,KAAK,CAAC;IA6E/B,CAAC;IA3FQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,oBAAoB,EAAE,+BAA+B,CAAC,CAAC;IAC3E,CAAC;IAckB,YAAY,CAAC,KAAmB;QACjD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAES,yBAAyB;QACjC,OAAO,+BAA+B,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC;IAES,eAAe;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,aAAa,CAAC;YAChE,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,OAAO,CAAC;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,OAAO,IAAI,CAAA;;eAEA,OAAO,CAAC;YACb,IAAI,EAAE,IAAI;YACV,OAAO;YACP,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,OAAO;SACxC,CAAC;cACI,IAAI,CAAC,QAAQ;;;eAGZ,IAAI,CAAC,QAAQ;;iBAEX,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;sBACjB,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;qBACd,IAAI,CAAC,OAAO,CAAC;2BACP,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;4BACvB,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;6BACtC,WAAW;mBACrB,IAAI,CAAC,YAAY;kBAClB,IAAI,CAAC,WAAW;;qBAEb,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uBACjC,OAAO,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;cAC9C,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ;YAC/B,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;YACtB,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE;;;;eAIvB,IAAI,CAAC,QAAQ;iBACX,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oBAC9B,IAAI,CAAC,UAAU;;;;QAI3B,IAAI,CAAC,yBAAyB,EAAE;KACnC,CAAC;IACJ,CAAC;;AA9FsB,4BAAO,GAAG,cAAc,AAAjB,CAAkB;AAC/B,2BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAFxB,oBAAoB;AAmBhC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACd","sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { styles } from './themes/checkbox.base.css.js';\nimport { all } from './themes/checkbox-themes.js';\nimport { styles as shared } from './themes/shared/checkbox/checkbox.common.css.js';\n\nlet nextId = 1;\n\n/**\n * A check box allowing single values to be selected/deselected.\n *\n * @element igc-checkbox\n *\n * @slot - The checkbox label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the checkbox.\n * @csspart control - The checkbox input element.\n * @csspart label - The checkbox label.\n * @csspart indicator - The checkbox indicator icon.\n */\nexport default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {\n  public static readonly tagName = 'igc-checkbox';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCheckboxComponent, IgcValidationContainerComponent);\n  }\n\n  private readonly _themes = addThemingController(this, all);\n\n  private readonly _inputId = `checkbox-${nextId++}`;\n  private readonly _labelId = `checkbox-label-${this._inputId}`;\n\n  /**\n   * Draws the checkbox in indeterminate state.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public indeterminate = false;\n\n  protected override _handleClick(event: PointerEvent): void {\n    this.indeterminate = false;\n    super._handleClick(event);\n  }\n\n  protected _renderValidatorContainer(): TemplateResult {\n    return IgcValidationContainerComponent.create(this);\n  }\n\n  protected _renderStandard() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M4.1,12.7 9,17.6 20.3,6.3\" />\n      </svg>\n    `;\n  }\n\n  protected _renderIndigo() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <rect width=\"18\" height=\"4\" x=\"3\" y=\"10\" rx=\"1.85\" />\n        <path\n          d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"\n        />\n      </svg>\n    `;\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n    const describedBy = this._slots.hasAssignedElements('helper-text')\n      ? 'helper-text'\n      : nothing;\n    const checked = this.checked;\n\n    return html`\n      <label\n        part=${partMap({\n          base: true,\n          checked,\n          focused: this._focusRingManager.focused,\n        })}\n        for=${this._inputId}\n      >\n        <input\n          id=${this._inputId}\n          type=\"checkbox\"\n          name=${ifDefined(this.name)}\n          value=${ifDefined(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          .checked=${live(checked)}\n          .indeterminate=${live(this.indeterminate)}\n          aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n          aria-describedby=${describedBy}\n          @click=${this._handleClick}\n          @blur=${this._handleBlur}\n        />\n        <span part=${partMap({ control: true, checked })}>\n          <span part=${partMap({ indicator: true, checked })}>\n            ${this._themes.theme === 'indigo'\n              ? this._renderIndigo()\n              : this._renderStandard()}\n          </span>\n        </span>\n        <span\n          id=${this._labelId}\n          part=${partMap({ label: true, checked })}\n          ?hidden=${this._hideLabel}\n          ><slot></slot>\n        </span>\n      </label>\n      ${this._renderValidatorContainer()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-checkbox': IgcCheckboxComponent;\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { styles } from './themes/checkbox.base.css.js';\nimport { all } from './themes/checkbox-themes.js';\nimport { styles as shared } from './themes/shared/checkbox/checkbox.common.css.js';\n\nlet nextId = 1;\n\n/**\n * A check box allowing single values to be selected/deselected.\n *\n * @element igc-checkbox\n *\n * @slot - The checkbox label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the checkbox.\n * @csspart control - The checkbox input element.\n * @csspart label - The checkbox label.\n * @csspart indicator - The checkbox indicator icon.\n */\nexport default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {\n  public static readonly tagName = 'igc-checkbox';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCheckboxComponent, IgcValidationContainerComponent);\n  }\n\n  private readonly _themes = addThemingController(this, all);\n\n  private readonly _inputId = `checkbox-${nextId++}`;\n  private readonly _labelId = `checkbox-label-${this._inputId}`;\n\n  /**\n   * Draws the checkbox in indeterminate state.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public indeterminate = false;\n\n  protected override _handleClick(event: PointerEvent): void {\n    this.indeterminate = false;\n    super._handleClick(event);\n  }\n\n  protected _renderValidatorContainer(): TemplateResult {\n    return IgcValidationContainerComponent.create(this);\n  }\n\n  protected _renderStandard() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M4.1,12.7 9,17.6 20.3,6.3\" />\n      </svg>\n    `;\n  }\n\n  protected _renderIndigo() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <rect width=\"18\" height=\"4\" x=\"3\" y=\"10\" rx=\"1.85\" />\n        <path\n          d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"\n        />\n      </svg>\n    `;\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n    const describedBy = this._slots.hasAssignedElements('helper-text')\n      ? 'helper-text'\n      : nothing;\n    const checked = this.checked;\n\n    return html`\n      <label\n        part=${partMap({\n          base: true,\n          checked,\n          focused: this._focusRingManager.focused,\n        })}\n        for=${this._inputId}\n      >\n        <input\n          id=${this._inputId}\n          type=\"checkbox\"\n          name=${ifDefined(this.name)}\n          value=${ifDefined(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          .checked=${live(checked)}\n          .indeterminate=${live(this.indeterminate)}\n          aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n          aria-describedby=${describedBy}\n          @click=${this._handleClick}\n          @blur=${this._handleBlur}\n        />\n        <span part=${partMap({ control: true, checked })}>\n          <span part=${partMap({ indicator: true, checked })}>\n            ${this._themes.theme === 'indigo'\n              ? this._renderIndigo()\n              : this._renderStandard()}\n          </span>\n        </span>\n        <span\n          id=${this._labelId}\n          part=${partMap({ label: true, checked })}\n          ?hidden=${this._hideLabel}\n          ><slot></slot>\n        </span>\n      </label>\n      ${this._renderValidatorContainer()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-checkbox': IgcCheckboxComponent;\n  }\n}\n"]}

package/components/checkbox/switch.js

@@ -9,7 +9,9 @@ import { styles as shared } from './themes/shared/switch/switch.common.css.js';
 import { styles } from './themes/switch.base.css.js';
 import { all } from './themes/switch-themes.js';
 let nextId = 1;
-class IgcSwitchComponent extends IgcCheckboxBaseComponent {
+export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
+    static { this.tagName = 'igc-switch'; }
+    static { this.styles = [styles, shared]; }
     static register() {
         registerComponent(IgcSwitchComponent);
     }
@@ -56,7 +58,4 @@ class IgcSwitchComponent extends IgcCheckboxBaseComponent {
     `;
     }
 }
-IgcSwitchComponent.tagName = 'igc-switch';
-IgcSwitchComponent.styles = [styles, shared];
-export default IgcSwitchComponent;
 //# sourceMappingURL=switch.js.map

package/components/checkbox/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/checkbox/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAEhD,IAAI,MAAM,GAAG,CAAC,CAAC;AAgBf,MAAqB,kBAAmB,SAAQ,wBAAwB;IAK/D,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QAJO,aAAQ,GAAG,UAAU,MAAM,EAAE,EAAE,CAAC;QAChC,aAAQ,GAAG,gBAAgB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAI1D,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACxD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,OAAO,IAAI,CAAA;oBACK,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;;eAE1D,IAAI,CAAC,QAAQ;;iBAEX,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;sBACjB,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;qBACd,IAAI,CAAC,OAAO,CAAC;4BACN,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;mBAChD,IAAI,CAAC,YAAY;kBAClB,IAAI,CAAC,WAAW;;;iBAGjB,OAAO,CAAC;YACb,OAAO,EAAE,IAAI;YACb,OAAO;YACP,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,OAAO;SACxC,CAAC;;uBAEW,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;;eAGzC,IAAI,CAAC,QAAQ;iBACX,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oBAC9B,IAAI,CAAC,UAAU;;;;;KAK9B,CAAC;IACJ,CAAC;;AApDsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AAChC,yBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAFrB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { styles as shared } from './themes/shared/switch/switch.common.css.js';\nimport { styles } from './themes/switch.base.css.js';\nimport { all } from './themes/switch-themes.js';\n\nlet nextId = 1;\n\n/**\n * Similar to a checkbox, a switch controls the state of a single setting on or off.\n *\n * @element igc-switch\n *\n * @slot - The switch label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the switch.\n * @csspart control - The switch input element.\n * @csspart thumb - The position indicator of the switch.\n * @csspart label - The switch label.\n */\nexport default class IgcSwitchComponent extends IgcCheckboxBaseComponent {\n  public static readonly tagName = 'igc-switch';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcSwitchComponent);\n  }\n\n  private readonly _inputId = `switch-${nextId++}`;\n  private readonly _labelId = `switch-label-${this._inputId}`;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n    const checked = this.checked;\n\n    return html`\n      <label part=${partMap({ base: true, checked })} for=${this._inputId}>\n        <input\n          id=${this._inputId}\n          type=\"checkbox\"\n          name=${ifDefined(this.name)}\n          value=${ifDefined(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          .checked=${live(checked)}\n          aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n          @click=${this._handleClick}\n          @blur=${this._handleBlur}\n        />\n        <span\n          part=${partMap({\n            control: true,\n            checked,\n            focused: this._focusRingManager.focused,\n          })}\n        >\n          <span part=${partMap({ thumb: true, checked })}></span>\n        </span>\n        <span\n          id=${this._labelId}\n          part=${partMap({ label: true, checked })}\n          ?hidden=${this._hideLabel}\n        >\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-switch': IgcSwitchComponent;\n  }\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/checkbox/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAEhD,IAAI,MAAM,GAAG,CAAC,CAAC;AAgBf,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,wBAAwB;aAC/C,YAAO,GAAG,YAAY,AAAf,CAAgB;aAChC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QAJO,aAAQ,GAAG,UAAU,MAAM,EAAE,EAAE,CAAC;QAChC,aAAQ,GAAG,gBAAgB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAI1D,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACxD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,OAAO,IAAI,CAAA;oBACK,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;;eAE1D,IAAI,CAAC,QAAQ;;iBAEX,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;sBACjB,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;qBACd,IAAI,CAAC,OAAO,CAAC;4BACN,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;mBAChD,IAAI,CAAC,YAAY;kBAClB,IAAI,CAAC,WAAW;;;iBAGjB,OAAO,CAAC;YACb,OAAO,EAAE,IAAI;YACb,OAAO;YACP,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,OAAO;SACxC,CAAC;;uBAEW,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;;eAGzC,IAAI,CAAC,QAAQ;iBACX,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oBAC9B,IAAI,CAAC,UAAU;;;;;KAK9B,CAAC;IACJ,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { styles as shared } from './themes/shared/switch/switch.common.css.js';\nimport { styles } from './themes/switch.base.css.js';\nimport { all } from './themes/switch-themes.js';\n\nlet nextId = 1;\n\n/**\n * Similar to a checkbox, a switch controls the state of a single setting on or off.\n *\n * @element igc-switch\n *\n * @slot - The switch label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the switch.\n * @csspart control - The switch input element.\n * @csspart thumb - The position indicator of the switch.\n * @csspart label - The switch label.\n */\nexport default class IgcSwitchComponent extends IgcCheckboxBaseComponent {\n  public static readonly tagName = 'igc-switch';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcSwitchComponent);\n  }\n\n  private readonly _inputId = `switch-${nextId++}`;\n  private readonly _labelId = `switch-label-${this._inputId}`;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n    const checked = this.checked;\n\n    return html`\n      <label part=${partMap({ base: true, checked })} for=${this._inputId}>\n        <input\n          id=${this._inputId}\n          type=\"checkbox\"\n          name=${ifDefined(this.name)}\n          value=${ifDefined(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          .checked=${live(checked)}\n          aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n          @click=${this._handleClick}\n          @blur=${this._handleBlur}\n        />\n        <span\n          part=${partMap({\n            control: true,\n            checked,\n            focused: this._focusRingManager.focused,\n          })}\n        >\n          <span part=${partMap({ thumb: true, checked })}></span>\n        </span>\n        <span\n          id=${this._labelId}\n          part=${partMap({ label: true, checked })}\n          ?hidden=${this._hideLabel}\n        >\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-switch': IgcSwitchComponent;\n  }\n}\n"]}

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

@@ -1,3 +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:inline-flex;flex-direction:column;font-family:var(--ig-font-family)}input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=control]{--size: 1.25rem;width:var(--size);height:var(--size);min-width:var(--size);position:relative;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part~=control]::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%, -50%);width:var(--size);height:var(--size);transition:all .15s ease-in}[part~=label]{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;word-wrap:break-all;transition:color .2s ease-in-out}[part~=base]{gap:.5rem}[part~=indicator]{--indicator-size: 1.125rem;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;stroke-linecap:square;stroke-width:var(--mark-stroke, 3);stroke-dasharray:24;stroke-dashoffset:24;fill:none;opacity:0;z-index:1;transform-origin:center}[part~=indicator] svg{width:var(--indicator-size);height:var(--indicator-size)}label{display:flex;align-items:center;cursor:pointer;flex-flow:row nowrap}[part="indicator checked"]{transition:all .2s ease-out;stroke-dashoffset:0;opacity:1}:host([indeterminate]) [part~=indicator]{stroke-dashoffset:41;opacity:1;transform:rotate(45deg) scale(0.45) translateX(-0.25rem)}:host([indeterminate]) [part~=indicator] svg{width:100%;height:100%}:host([disabled]),:host(:disabled){-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;pointer-events:none}:host([label-position=before]) [part~=label]{order:-1}`;
+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:inline-flex;flex-direction:column;font-family:var(--ig-font-family)}input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=control]{--size: 1.25rem;width:var(--size);height:var(--size);min-width:var(--size);position:relative;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part~=control]::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%, -50%);width:var(--size);height:var(--size);transition:all .15s ease-in}[part~=label]{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow-wrap:break-all;transition:color .2s ease-in-out}[part~=base]{gap:.5rem}[part~=indicator]{--indicator-size: 1.125rem;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;stroke-linecap:square;stroke-width:var(--mark-stroke, 3);stroke-dasharray:24;stroke-dashoffset:24;fill:none;opacity:0;z-index:1;transform-origin:center}[part~=indicator] svg{width:var(--indicator-size);height:var(--indicator-size)}label{display:flex;align-items:center;cursor:pointer;flex-flow:row nowrap}[part="indicator checked"]{transition:all .2s ease-out;stroke-dashoffset:0;opacity:1}:host([indeterminate]) [part~=indicator]{stroke-dashoffset:41;opacity:1;transform:rotate(45deg) scale(0.45) translateX(-0.25rem)}:host([indeterminate]) [part~=indicator] svg{width:100%;height:100%}:host([disabled]),:host(:disabled){-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;pointer-events:none}:host([label-position=before]) [part~=label]{order:-1}`;
 //# sourceMappingURL=checkbox.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.base.css.js","sourceRoot":"","sources":["../../../../src/components/checkbox/themes/checkbox.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2pFAA2pF,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:inline-flex;flex-direction:column;font-family:var(--ig-font-family)}input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=control]{--size: 1.25rem;width:var(--size);height:var(--size);min-width:var(--size);position:relative;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part~=control]::after{position:absolute;content:\"\";left:50%;top:50%;transform:translate(-50%, -50%);width:var(--size);height:var(--size);transition:all .15s ease-in}[part~=label]{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;word-wrap:break-all;transition:color .2s ease-in-out}[part~=base]{gap:.5rem}[part~=indicator]{--indicator-size: 1.125rem;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;stroke-linecap:square;stroke-width:var(--mark-stroke, 3);stroke-dasharray:24;stroke-dashoffset:24;fill:none;opacity:0;z-index:1;transform-origin:center}[part~=indicator] svg{width:var(--indicator-size);height:var(--indicator-size)}label{display:flex;align-items:center;cursor:pointer;flex-flow:row nowrap}[part=\"indicator checked\"]{transition:all .2s ease-out;stroke-dashoffset:0;opacity:1}:host([indeterminate]) [part~=indicator]{stroke-dashoffset:41;opacity:1;transform:rotate(45deg) scale(0.45) translateX(-0.25rem)}:host([indeterminate]) [part~=indicator] svg{width:100%;height:100%}:host([disabled]),:host(:disabled){-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;pointer-events:none}:host([label-position=before]) [part~=label]{order:-1}`;\n"]}
+{"version":3,"file":"checkbox.base.css.js","sourceRoot":"","sources":["../../../../src/components/checkbox/themes/checkbox.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+pFAA+pF,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:inline-flex;flex-direction:column;font-family:var(--ig-font-family)}input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=control]{--size: 1.25rem;width:var(--size);height:var(--size);min-width:var(--size);position:relative;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part~=control]::after{position:absolute;content:\"\";left:50%;top:50%;transform:translate(-50%, -50%);width:var(--size);height:var(--size);transition:all .15s ease-in}[part~=label]{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow-wrap:break-all;transition:color .2s ease-in-out}[part~=base]{gap:.5rem}[part~=indicator]{--indicator-size: 1.125rem;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;stroke-linecap:square;stroke-width:var(--mark-stroke, 3);stroke-dasharray:24;stroke-dashoffset:24;fill:none;opacity:0;z-index:1;transform-origin:center}[part~=indicator] svg{width:var(--indicator-size);height:var(--indicator-size)}label{display:flex;align-items:center;cursor:pointer;flex-flow:row nowrap}[part=\"indicator checked\"]{transition:all .2s ease-out;stroke-dashoffset:0;opacity:1}:host([indeterminate]) [part~=indicator]{stroke-dashoffset:41;opacity:1;transform:rotate(45deg) scale(0.45) translateX(-0.25rem)}:host([indeterminate]) [part~=indicator] svg{width:100%;height:100%}:host([disabled]),:host(:disabled){-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;pointer-events:none}:host([label-position=before]) [part~=label]{order:-1}`;\n"]}

package/components/checkbox/themes/switch.base.css.js

@@ -1,3 +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:inline-flex;flex-direction:column;font-family:var(--ig-font-family)}input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=base]{display:flex;flex-flow:row nowrap;align-items:center;cursor:pointer;gap:var(--label-gap)}[part~=control]{display:flex;flex-shrink:0;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part~=thumb]{position:relative;animation-duration:.2s;animation-fill-mode:none}[part~=control],[part~=thumb]{transition:all .2s ease-in-out}[part~=thumb][part~=checked]{animation-duration:.2s;animation-fill-mode:forwards}[part~=label]{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;word-wrap:break-word}:host([disabled]),:host(:disabled){-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;cursor:initial}:host([label-position=before]) [part~=label]{order:-1}@keyframes thumb-on{from{margin-inline-start:var(--thumb-offset)}to{margin-inline-start:calc(var(--size) - var(--thumb-size))}}@keyframes thumb-off{from{margin-inline-start:calc(var(--size) - var(--thumb-size))}to{margin-inline-start:var(--thumb-offset)}}`;
+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:inline-flex;flex-direction:column;font-family:var(--ig-font-family)}input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=base]{display:flex;flex-flow:row nowrap;align-items:center;cursor:pointer;gap:var(--label-gap)}[part~=control]{display:flex;flex-shrink:0;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part~=thumb]{position:relative;animation-duration:.2s;animation-fill-mode:none}[part~=control],[part~=thumb]{transition:all .2s ease-in-out}[part~=thumb][part~=checked]{animation-duration:.2s;animation-fill-mode:forwards}[part~=label]{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow-wrap:break-word}:host([disabled]),:host(:disabled){-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;cursor:initial}:host([label-position=before]) [part~=label]{order:-1}@keyframes thumb-on{from{margin-inline-start:var(--thumb-offset)}to{margin-inline-start:calc(var(--size) - var(--thumb-size))}}@keyframes thumb-off{from{margin-inline-start:calc(var(--size) - var(--thumb-size))}to{margin-inline-start:var(--thumb-offset)}}`;
 //# sourceMappingURL=switch.base.css.js.map

package/components/checkbox/themes/switch.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.base.css.js","sourceRoot":"","sources":["../../../../src/components/checkbox/themes/switch.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qvEAAqvE,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:inline-flex;flex-direction:column;font-family:var(--ig-font-family)}input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=base]{display:flex;flex-flow:row nowrap;align-items:center;cursor:pointer;gap:var(--label-gap)}[part~=control]{display:flex;flex-shrink:0;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part~=thumb]{position:relative;animation-duration:.2s;animation-fill-mode:none}[part~=control],[part~=thumb]{transition:all .2s ease-in-out}[part~=thumb][part~=checked]{animation-duration:.2s;animation-fill-mode:forwards}[part~=label]{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;word-wrap:break-word}:host([disabled]),:host(:disabled){-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;cursor:initial}:host([label-position=before]) [part~=label]{order:-1}@keyframes thumb-on{from{margin-inline-start:var(--thumb-offset)}to{margin-inline-start:calc(var(--size) - var(--thumb-size))}}@keyframes thumb-off{from{margin-inline-start:calc(var(--size) - var(--thumb-size))}to{margin-inline-start:var(--thumb-offset)}}`;\n"]}
+{"version":3,"file":"switch.base.css.js","sourceRoot":"","sources":["../../../../src/components/checkbox/themes/switch.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,yvEAAyvE,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:inline-flex;flex-direction:column;font-family:var(--ig-font-family)}input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}[part~=base]{display:flex;flex-flow:row nowrap;align-items:center;cursor:pointer;gap:var(--label-gap)}[part~=control]{display:flex;flex-shrink:0;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part~=thumb]{position:relative;animation-duration:.2s;animation-fill-mode:none}[part~=control],[part~=thumb]{transition:all .2s ease-in-out}[part~=thumb][part~=checked]{animation-duration:.2s;animation-fill-mode:forwards}[part~=label]{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow-wrap:break-word}:host([disabled]),:host(:disabled){-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;cursor:initial}:host([label-position=before]) [part~=label]{order:-1}@keyframes thumb-on{from{margin-inline-start:var(--thumb-offset)}to{margin-inline-start:calc(var(--size) - var(--thumb-size))}}@keyframes thumb-off{from{margin-inline-start:calc(var(--size) - var(--thumb-size))}to{margin-inline-start:var(--thumb-offset)}}`;\n"]}

package/components/chip/chip.js

@@ -16,7 +16,9 @@ import IgcIconComponent from '../icon/icon.js';
 import { styles } from './themes/chip.base.css.js';
 import { styles as shared } from './themes/shared/chip.common.css.js';
 import { all } from './themes/themes.js';
-class IgcChipComponent extends EventEmitterMixin(LitElement) {
+export default class IgcChipComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-chip'; }
+    static { this.styles = [styles, shared]; }
     static register() {
         registerComponent(IgcChipComponent, IgcIconComponent);
     }
@@ -108,9 +110,6 @@ class IgcChipComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcChipComponent.tagName = 'igc-chip';
-IgcChipComponent.styles = [styles, shared];
-export default IgcChipComponent;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcChipComponent.prototype, "disabled", void 0);