igniteui-webcomponents 6.1.2 → 6.3.0-alpha.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAErE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/chat.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/chat.fluent.css.js';\nimport { styles as indigoDark } from './dark/chat.indigo.css.js';\nimport { styles as materialDark } from './dark/chat.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/chat.bootstrap.css.js';\nimport { styles as fluentLight } from './light/chat.fluent.css.js';\nimport { styles as indigoLight } from './light/chat.indigo.css.js';\nimport { styles as materialLight } from './light/chat.material.css.js';\nimport { styles as shared } from './light/chat.shared.css.js';\n\nconst light = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/chat/types.d.ts

@@ -0,0 +1,190 @@
+import type { TemplateResult } from 'lit';
+/**
+ * Represents a single chat message in the conversation.
+ */
+export interface IgcMessage {
+    /**
+     * A unique identifier for the message.
+     */
+    id: string;
+    /**
+     * The textual content of the message.
+     */
+    text: string;
+    /**
+     * The identifier or name of the sender of the message.
+     */
+    sender: string;
+    /**
+     * The timestamp indicating when the message was sent.
+     */
+    timestamp: Date;
+    /**
+     * Optional list of attachments associated with the message,
+     * such as images, files, or links.
+     */
+    attachments?: IgcMessageAttachment[];
+}
+/**
+ * Represents an attachment associated with a chat message.
+ */
+export interface IgcMessageAttachment {
+    /**
+     * A unique identifier for the attachment.
+     */
+    id: string;
+    /**
+     * The display name of the attachment (e.g. file name).
+     */
+    name: string;
+    /**
+     * The URL from which the attachment can be downloaded or viewed.
+     * Typically used for attachments stored on a server or CDN.
+     */
+    url?: string;
+    /**
+     * The actual File object, if the attachment was provided locally (e.g. via upload).
+     */
+    file?: File;
+    /**
+     * The MIME type or a custom type identifier for the attachment (e.g. "image/png", "pdf", "audio").
+     */
+    type?: string;
+    /**
+     * Optional URL to a thumbnail preview of the attachment (e.g. for images or videos).
+     */
+    thumbnail?: string;
+}
+/**
+ * A function type used to render a group of attachments in a chat message.
+ *
+ * This allows consumers to customize how message attachments are displayed
+ * (e.g. rendering thumbnails, file icons, or download links).
+ *
+ * @param {IgcMessageAttachment[]} attachments - The list of attachments to render.
+ * @returns {unknown} A custom rendered representation of the attachments.
+ */
+export type AttachmentTemplate = (attachments: IgcMessageAttachment[]) => unknown;
+/**
+ * A function type used to render a single chat message.
+ *
+ * This allows consumers to fully customize the display of a message,
+ * including its text, sender info, timestamp, and any attachments.
+ *
+ * @param {IgcMessage} message - The chat message to render.
+ * @returns {unknown} A custom rendered representation of the message.
+ */
+export type MessageTemplate = (message: IgcMessage) => unknown;
+/**
+ * Configuration options for customizing the behavior and appearance of the chat component.
+ */
+export type IgcChatOptions = {
+    /**
+     * The ID of the current user. Used to differentiate between incoming and outgoing messages.
+     */
+    currentUserId?: string;
+    /**
+     * If `true`, prevents the chat from automatically scrolling to the latest message.
+     */
+    disableAutoScroll?: boolean;
+    /**
+     * If `true`, disables the ability to upload and send attachments.
+     * Defaults to `false`.
+     */
+    disableAttachments?: boolean;
+    /**
+     * Indicates whether the other user is currently typing or composing a message.
+     */
+    isComposing?: boolean;
+    /**
+     * The accepted files that could be attached.
+     * Defines the file types as a list of comma-separated values (e.g. "image/*,.pdf") that the file input should accept.
+     */
+    acceptedFiles?: string;
+    /**
+     * Optional header text to display at the top of the chat component.
+     */
+    headerText?: string;
+    /**
+     * Optional placeholder text for the chat input area.
+     * Provides a hint to the user about what they can type (e.g. "Type a message...").
+     */
+    inputPlaceholder?: string;
+    /**
+     * Suggested text snippets or quick replies that can be shown as user-selectable options.
+     */
+    suggestions?: string[];
+    /**
+     * Controls the position of the chat suggestions within the component layout.
+     *
+     * - `"below-input"`: Renders suggestions below the chat input area.
+     * - `"below-messages"`: Renders suggestions below the chat messages area.
+     *
+     * Default is `"below-messages"`.
+     */
+    suggestionsPosition?: 'below-input' | 'below-messages';
+    /**
+     * A set of template override functions used to customize rendering of messages, attachments, etc.
+     */
+    templates?: IgcChatTemplates;
+    markdownRenderer?: (text: string) => TemplateResult;
+};
+/**
+ * A collection of template functions used to customize different parts of the chat component.
+ * Each template allows you to override the rendering of a specific part of the component.
+ */
+export type IgcChatTemplates = {
+    /**
+     * Template for rendering an attachment in a message.
+     */
+    attachmentTemplate?: MessageTemplate;
+    /**
+     * Template for rendering a custom header above the attachment in a message.
+     */
+    attachmentHeaderTemplate?: MessageTemplate;
+    /**
+     * Template for rendering custom action buttons or controls related to an attachment
+     * (e.g. download, preview, delete).
+     */
+    attachmentActionsTemplate?: MessageTemplate;
+    /**
+     * Template for rendering the main content of an attachment, such as a thumbnail or file preview.
+     */
+    attachmentContentTemplate?: MessageTemplate;
+    /**
+     * Template for rendering a single chat message.
+     * Use this to customize message layout, formatting, or metadata.
+     */
+    messageTemplate?: MessageTemplate;
+    /**
+     * Template for rendering message-specific actions such as edit, delete, reply, etc.
+     */
+    messageActionsTemplate?: MessageTemplate;
+    /**
+     * Template used to show an indicator when the other user is typing (e.g. “User is typing...”).
+     */
+    composingIndicatorTemplate?: unknown;
+    /**
+     * Template for customizing the text input element (usually a `<textarea>` or `<input>`).
+     *
+     * @param text - The current value of the text input.
+     * @returns {unknown} A custom rendered representation of the text input.
+     */
+    textInputTemplate?: (text: string) => unknown;
+    /**
+     * Template for rendering additional controls in the message input area,
+     * such as send buttons, emoji pickers, or voice recorders.
+     */
+    textAreaActionsTemplate?: unknown;
+    /**
+     * Template for rendering attachments that are currently queued for sending (in the input area).
+     */
+    textAreaAttachmentsTemplate?: AttachmentTemplate;
+};
+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":"AAqNA,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/**\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/**\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 * A function type used to render a group of attachments in a chat message.\n *\n * This allows consumers to customize how message attachments are displayed\n * (e.g. rendering thumbnails, file icons, or download links).\n *\n * @param {IgcMessageAttachment[]} attachments - The list of attachments to render.\n * @returns {unknown} A custom rendered representation of the attachments.\n */\nexport type AttachmentTemplate = (\n  attachments: IgcMessageAttachment[]\n) => unknown;\n\n/**\n * A function type used to render a single chat message.\n *\n * This allows consumers to fully customize the display of a message,\n * including its text, sender info, timestamp, and any attachments.\n *\n * @param {IgcMessage} message - The chat message to render.\n * @returns {unknown} A custom rendered representation of the message.\n */\nexport type MessageTemplate = (message: IgcMessage) => unknown;\n\n// export type MarkdownRenderer = (text: string) => TemplateResult;\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  disableAttachments?: boolean;\n  /**\n   * Indicates whether the other user is currently typing or composing a message.\n   */\n  isComposing?: 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  /**\n   * A set of template override functions used to customize rendering of messages, attachments, etc.\n   */\n  templates?: IgcChatTemplates;\n  markdownRenderer?: (text: string) => TemplateResult; //TODO: Remove when highlighter is implemented\n};\n\n/**\n * A collection of template functions used to customize different parts of the chat component.\n * Each template allows you to override the rendering of a specific part of the component.\n */\nexport type IgcChatTemplates = {\n  /**\n   * Template for rendering an attachment in a message.\n   */\n  attachmentTemplate?: MessageTemplate;\n\n  /**\n   * Template for rendering a custom header above the attachment in a message.\n   */\n  attachmentHeaderTemplate?: MessageTemplate;\n\n  /**\n   * Template for rendering custom action buttons or controls related to an attachment\n   * (e.g. download, preview, delete).\n   */\n  attachmentActionsTemplate?: MessageTemplate;\n\n  /**\n   * Template for rendering the main content of an attachment, such as a thumbnail or file preview.\n   */\n  attachmentContentTemplate?: MessageTemplate;\n\n  /**\n   * Template for rendering a single chat message.\n   * Use this to customize message layout, formatting, or metadata.\n   */\n  messageTemplate?: MessageTemplate;\n\n  /**\n   * Template for rendering message-specific actions such as edit, delete, reply, etc.\n   */\n  messageActionsTemplate?: MessageTemplate;\n\n  /**\n   * Template used to show an indicator when the other user is typing (e.g. “User is typing...”).\n   */\n  composingIndicatorTemplate?: unknown;\n\n  /**\n   * Template for customizing the text input element (usually a `<textarea>` or `<input>`).\n   *\n   * @param text - The current value of the text input.\n   * @returns {unknown} A custom rendered representation of the text input.\n   */\n  textInputTemplate?: (text: string) => unknown;\n\n  /**\n   * Template for rendering additional controls in the message input area,\n   * such as send buttons, emoji pickers, or voice recorders.\n   */\n  textAreaActionsTemplate?: unknown;\n\n  /**\n   * Template for rendering attachments that are currently queued for sending (in the input area).\n   */\n  textAreaAttachmentsTemplate?: AttachmentTemplate;\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,5 @@
 import { LitElement } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
-import { type FormValueOf } from '../common/mixins/forms/form-value.js';
 import type { ToggleLabelPosition } from '../types.js';
 export interface IgcCheckboxChangeEventArgs {
     checked: boolean;
@@ -14,11 +13,11 @@ 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 readonly _slots: import("../common/controllers/slot.js").SlotController<"invalid" | "[default]" | "helper-text" | "value-missing" | "custom-error">;
     protected readonly _focusRingManager: import("../common/controllers/focus-ring.js").KeyboardFocusRingController;
-    protected readonly _formValue: FormValueOf<boolean>;
+    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<boolean>;
     protected _value: string;
     protected readonly _input: HTMLInputElement;
-    protected readonly _label: Array<Node>;
     protected _hideLabel: boolean;
     /**
      * The value attribute of the control.
@@ -37,14 +36,13 @@ export declare class IgcCheckboxBaseComponent extends IgcCheckboxBaseComponent_b
      * @attr label-position
      */
     labelPosition: ToggleLabelPosition;
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
     /** Simulates a click on the control. */
     click(): void;
     /** Sets focus on the control. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the control. */
     blur(): void;
+    protected _handleSlotChange(): void;
     protected _handleClick(event: PointerEvent): void;
-    protected _handleFocus(): void;
 }
 export {};

package/components/checkbox/checkbox-base.js

@@ -5,23 +5,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement } from 'lit';
-import { property, query, queryAssignedNodes, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import { createFormValueState, defaultBooleanTransformers, } from '../common/mixins/forms/form-value.js';
-import { isEmpty } from '../common/util.js';
+import { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { checkBoxValidators } from './validators.js';
 let IgcCheckboxBaseComponent = class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitterMixin(LitElement)) {
     constructor() {
         super(...arguments);
+        this._slots = addSlotController(this, {
+            slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),
+            onChange: this._handleSlotChange,
+        });
         this._focusRingManager = addKeyboardFocusRing(this);
         this._formValue = createFormValueState(this, {
             initialValue: false,
-            transformers: defaultBooleanTransformers,
+            transformers: FormValueBooleanTransformers,
         });
-        this._hideLabel = false;
+        this._hideLabel = true;
         this.labelPosition = 'after';
     }
     get __validators() {
@@ -30,7 +35,7 @@ let IgcCheckboxBaseComponent = class IgcCheckboxBaseComponent extends FormAssoci
     set value(value) {
         this._value = value;
         if (this.checked) {
-            this._setFormValue(this._value || 'on');
+            this._formValue.setValueAndFormState(this.checked);
         }
     }
     get value() {
@@ -38,19 +43,10 @@ let IgcCheckboxBaseComponent = class IgcCheckboxBaseComponent extends FormAssoci
     }
     set checked(value) {
         this._formValue.setValueAndFormState(value);
-        this._validate();
     }
     get checked() {
         return this._formValue.value;
     }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        this._hideLabel = isEmpty(this._label);
-        root.addEventListener('slotchange', () => {
-            this._hideLabel = isEmpty(this._label);
-        });
-        return root;
-    }
     click() {
         this._input.click();
     }
@@ -60,23 +56,21 @@ let IgcCheckboxBaseComponent = class IgcCheckboxBaseComponent extends FormAssoci
     blur() {
         this._input.blur();
     }
+    _handleSlotChange() {
+        this._hideLabel = !this._slots.hasAssignedNodes('[default]');
+    }
     _handleClick(event) {
         event.stopPropagation();
+        this._setTouchedState();
         this.checked = !this.checked;
         this.emitEvent('igcChange', {
             detail: { checked: this.checked, value: this.value },
         });
     }
-    _handleFocus() {
-        this._dirty = true;
-    }
 };
 __decorate([
     query('input', true)
 ], IgcCheckboxBaseComponent.prototype, "_input", void 0);
-__decorate([
-    queryAssignedNodes({ flatten: true })
-], IgcCheckboxBaseComponent.prototype, "_label", void 0);
 __decorate([
     state()
 ], IgcCheckboxBaseComponent.prototype, "_hideLabel", void 0);

package/components/checkbox/checkbox-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property, query, queryAssignedNodes, state } from 'lit/decorators.js';\n\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport {\n  createFormValueState,\n  defaultBooleanTransformers,\n  type FormValueOf,\n} from '../common/mixins/forms/form-value.js';\nimport { isEmpty } from '../common/util.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport { checkBoxValidators } from './validators.js';\n\nexport interface IgcCheckboxChangeEventArgs {\n  checked: boolean;\n  value?: string;\n}\n\nexport interface IgcCheckboxComponentEventMap {\n  igcChange: CustomEvent<IgcCheckboxChangeEventArgs>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n@blazorDeepImport\nexport class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixin(\n  EventEmitterMixin<IgcCheckboxComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  )\n) {\n  protected override get __validators() {\n    return checkBoxValidators;\n  }\n\n  protected readonly _focusRingManager = addKeyboardFocusRing(this);\n  protected override readonly _formValue: FormValueOf<boolean> =\n    createFormValueState(this, {\n      initialValue: false,\n      transformers: defaultBooleanTransformers,\n    });\n  protected _value!: string;\n\n  @query('input', true)\n  protected readonly _input!: HTMLInputElement;\n\n  @queryAssignedNodes({ flatten: true })\n  protected readonly _label!: Array<Node>;\n\n  @state()\n  protected _hideLabel = false;\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    this._value = value;\n    if (this.checked) {\n      this._setFormValue(this._value || 'on');\n    }\n  }\n\n  public get value(): string {\n    return this._value;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n  /**\n   * The checked state of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public set checked(value: boolean) {\n    this._formValue.setValueAndFormState(value);\n    this._validate();\n  }\n\n  public get checked(): boolean {\n    return this._formValue.value;\n  }\n\n  /**\n   * The label position of the control.\n   * @attr label-position\n   */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: ToggleLabelPosition = 'after';\n\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    this._hideLabel = isEmpty(this._label);\n\n    root.addEventListener('slotchange', () => {\n      this._hideLabel = isEmpty(this._label);\n    });\n\n    return root;\n  }\n\n  /** Simulates a click on the control. */\n  public override click(): void {\n    this._input.click();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the control. */\n  public override focus(options?: FocusOptions): void {\n    this._input.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the control. */\n  public override blur(): void {\n    this._input.blur();\n  }\n\n  protected _handleClick(event: PointerEvent): void {\n    event.stopPropagation();\n\n    this.checked = !this.checked;\n    this.emitEvent('igcChange', {\n      detail: { checked: this.checked, value: this.value },\n    });\n  }\n\n  protected _handleFocus(): void {\n    this._dirty = true;\n  }\n}\n"]}
+{"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport { checkBoxValidators } from './validators.js';\n\nexport interface IgcCheckboxChangeEventArgs {\n  checked: boolean;\n  value?: string;\n}\n\nexport interface IgcCheckboxComponentEventMap {\n  igcChange: CustomEvent<IgcCheckboxChangeEventArgs>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n@blazorDeepImport\nexport class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixin(\n  EventEmitterMixin<IgcCheckboxComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  )\n) {\n  protected override get __validators() {\n    return checkBoxValidators;\n  }\n\n  protected readonly _slots = addSlotController(this, {\n    slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n    onChange: this._handleSlotChange,\n  });\n\n  protected readonly _focusRingManager = addKeyboardFocusRing(this);\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: false,\n    transformers: FormValueBooleanTransformers,\n  });\n  protected _value!: string;\n\n  @query('input', true)\n  protected readonly _input!: HTMLInputElement;\n\n  @state()\n  protected _hideLabel = true;\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    this._value = value;\n    if (this.checked) {\n      this._formValue.setValueAndFormState(this.checked);\n    }\n  }\n\n  public get value(): string {\n    return this._value;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n  /**\n   * The checked state of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public set checked(value: boolean) {\n    this._formValue.setValueAndFormState(value);\n  }\n\n  public get checked(): boolean {\n    return this._formValue.value;\n  }\n\n  /**\n   * The label position of the control.\n   * @attr label-position\n   */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: ToggleLabelPosition = 'after';\n\n  /** Simulates a click on the control. */\n  public override click(): void {\n    this._input.click();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the control. */\n  public override focus(options?: FocusOptions): void {\n    this._input.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the control. */\n  public override blur(): void {\n    this._input.blur();\n  }\n\n  protected _handleSlotChange(): void {\n    this._hideLabel = !this._slots.hasAssignedNodes('[default]');\n  }\n\n  protected _handleClick(event: PointerEvent): void {\n    event.stopPropagation();\n\n    this._setTouchedState();\n    this.checked = !this.checked;\n    this.emitEvent('igcChange', {\n      detail: { checked: this.checked, value: this.value },\n    });\n  }\n}\n"]}

package/components/checkbox/checkbox.d.ts

@@ -22,7 +22,6 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
     static readonly tagName = "igc-checkbox";
     protected static styles: import("lit").CSSResult[];
     static register(): void;
-    private static readonly increment;
     private readonly _themes;
     private readonly _inputId;
     private readonly _labelId;
@@ -32,9 +31,9 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
      */
     indeterminate: boolean;
     protected _handleClick(event: PointerEvent): void;
-    protected renderValidatorContainer(): TemplateResult;
-    protected renderStandard(): TemplateResult<1>;
-    protected renderIndigo(): TemplateResult<1>;
+    protected _renderValidatorContainer(): TemplateResult;
+    protected _renderStandard(): TemplateResult<1>;
+    protected _renderIndigo(): TemplateResult<1>;
     protected render(): TemplateResult<1>;
 }
 declare global {

package/components/checkbox/checkbox.js

@@ -4,24 +4,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter } from '../common/util.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcCheckboxBaseComponent } from './checkbox-base.js';
 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 {
     constructor() {
         super(...arguments);
         this._themes = addThemingController(this, all);
-        this._inputId = `checkbox-${IgcCheckboxComponent.increment()}`;
+        this._inputId = `checkbox-${nextId++}`;
         this._labelId = `checkbox-label-${this._inputId}`;
         this.indeterminate = false;
     }
@@ -32,17 +32,17 @@ class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
         this.indeterminate = false;
         super._handleClick(event);
     }
-    renderValidatorContainer() {
+    _renderValidatorContainer() {
         return IgcValidationContainerComponent.create(this);
     }
-    renderStandard() {
+    _renderStandard() {
         return html `
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path d="M4.1,12.7 9,17.6 20.3,6.3" />
       </svg>
     `;
     }
-    renderIndigo() {
+    _renderIndigo() {
         return html `
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <rect width="18" height="4" x="3" y="10" rx="1.85" />
@@ -54,6 +54,9 @@ class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
     }
     render() {
         const labelledBy = this.getAttribute('aria-labelledby');
+        const describedBy = this._slots.hasAssignedElements('helper-text')
+            ? 'helper-text'
+            : nothing;
         const checked = this.checked;
         return html `
       <label
@@ -69,37 +72,35 @@ class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
           type="checkbox"
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
-          .required=${this.required}
-          .disabled=${this.disabled}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
           .checked=${live(checked)}
           .indeterminate=${live(this.indeterminate)}
-          aria-checked=${this.indeterminate && !checked ? 'mixed' : checked}
-          aria-disabled=${this.disabled ? 'true' : 'false'}
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
+          aria-describedby=${describedBy}
           @click=${this._handleClick}
-          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
         />
         <span part=${partMap({ control: true, checked })}>
           <span part=${partMap({ indicator: true, checked })}>
             ${this._themes.theme === 'indigo'
-            ? this.renderIndigo()
-            : this.renderStandard()}
+            ? this._renderIndigo()
+            : this._renderStandard()}
           </span>
         </span>
         <span
-          .hidden=${this._hideLabel}
-          part=${partMap({ label: true, checked })}
           id=${this._labelId}
+          part=${partMap({ label: true, checked })}
+          ?hidden=${this._hideLabel}
           ><slot></slot>
         </span>
       </label>
-      ${this.renderValidatorContainer()}
+      ${this._renderValidatorContainer()}
     `;
     }
 }
 IgcCheckboxComponent.tagName = 'igc-checkbox';
 IgcCheckboxComponent.styles = [styles, shared];
-IgcCheckboxComponent.increment = createCounter();
 export default IgcCheckboxComponent;
 __decorate([
     property({ type: Boolean, reflect: true })

package/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, 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';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { createCounter } from '../common/util.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\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 static readonly increment = createCounter();\n\n  private readonly _themes = addThemingController(this, all);\n\n  private readonly _inputId = `checkbox-${IgcCheckboxComponent.increment()}`;\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 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-checked=${this.indeterminate && !checked ? 'mixed' : checked}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n          @click=${this._handleClick}\n          @focus=${this._handleFocus}\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          .hidden=${this._hideLabel}\n          part=${partMap({ label: true, checked })}\n          id=${this._labelId}\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.d.ts

@@ -17,7 +17,6 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
     static readonly tagName = "igc-switch";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private static readonly increment;
     private readonly _inputId;
     private readonly _labelId;
     constructor();

package/components/checkbox/switch.js

@@ -4,18 +4,18 @@ import { live } from 'lit/directives/live.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter } from '../common/util.js';
 import { IgcCheckboxBaseComponent } from './checkbox-base.js';
 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 {
     static register() {
         registerComponent(IgcSwitchComponent);
     }
     constructor() {
         super();
-        this._inputId = `switch-${IgcSwitchComponent.increment()}`;
+        this._inputId = `switch-${nextId++}`;
         this._labelId = `switch-label-${this._inputId}`;
         addThemingController(this, all);
     }
@@ -29,14 +29,12 @@ class IgcSwitchComponent extends IgcCheckboxBaseComponent {
           type="checkbox"
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
-          .required=${this.required}
-          .disabled=${this.disabled}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
           .checked=${live(checked)}
-          aria-checked=${checked ? 'true' : 'false'}
-          aria-disabled=${this.disabled ? 'true' : 'false'}
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
           @click=${this._handleClick}
-          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
         />
         <span
           part=${partMap({
@@ -48,9 +46,9 @@ class IgcSwitchComponent extends IgcCheckboxBaseComponent {
           <span part=${partMap({ thumb: true, checked })}></span>
         </span>
         <span
-          .hidden=${this._hideLabel}
-          part=${partMap({ label: true, checked })}
           id=${this._labelId}
+          part=${partMap({ label: true, checked })}
+          ?hidden=${this._hideLabel}
         >
           <slot></slot>
         </span>
@@ -60,6 +58,5 @@ class IgcSwitchComponent extends IgcCheckboxBaseComponent {
 }
 IgcSwitchComponent.tagName = 'igc-switch';
 IgcSwitchComponent.styles = [styles, shared];
-IgcSwitchComponent.increment = createCounter();
 export default IgcSwitchComponent;
 //# sourceMappingURL=switch.js.map