igniteui-webcomponents 6.3.1 → 6.3.3

package/components/chat/themes/dark/chat.material.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--chat-input-border: var(--ig-chat-chat-input-border, var(--ig-gray-200));--code-border: var(--ig-chat-code-border, var(--ig-gray-200));--ig-theme: material}`;
+export const styles = css `:host{--background: var(--ig-chat-background, var(--ig-surface-500));--header-background: var(--ig-chat-header-background, var(--ig-surface-500));--header-color: var(--ig-chat-header-color, var(--ig-surface-500-contrast));--header-border: var(--ig-chat-header-border, var(--ig-transparent-500));--message-background: var(--ig-chat-message-background, var(--ig-gray-200));--message-color: var(--ig-chat-message-color, var(--ig-gray-800));--message-actions-color: var(--ig-chat-message-actions-color, var(--ig-gray-700));--file-background: var(--ig-chat-file-background, var(--ig-gray-900-contrast));--file-icon-color: var(--ig-chat-file-icon-color, var(--ig-gray-500));--file-icon-accent-color: var(--ig-chat-file-icon-accent-color, var(--ig-gray-600));--image-background: var(--ig-chat-image-background, var(--ig-gray-100));--image-border: var(--ig-chat-image-border, var(--ig-gray-300));--image-attachment-icon: var(--ig-chat-image-attachment-icon, var(--ig-gray-900));--progress-indicator-color: var(--ig-chat-progress-indicator-color, var(--ig-secondary-500));--code-background: var(--ig-chat-code-background, var(--ig-gray-50));--ig-theme: material}`;
 //# sourceMappingURL=chat.material.css.js.map

package/components/chat/themes/dark/chat.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat.material.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/dark/chat.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qKAAqK,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--chat-input-border: var(--ig-chat-chat-input-border, var(--ig-gray-200));--code-border: var(--ig-chat-code-border, var(--ig-gray-200));--ig-theme: material}`;\n"]}
+{"version":3,"file":"chat.material.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/dark/chat.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,moCAAmoC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--background: var(--ig-chat-background, var(--ig-surface-500));--header-background: var(--ig-chat-header-background, var(--ig-surface-500));--header-color: var(--ig-chat-header-color, var(--ig-surface-500-contrast));--header-border: var(--ig-chat-header-border, var(--ig-transparent-500));--message-background: var(--ig-chat-message-background, var(--ig-gray-200));--message-color: var(--ig-chat-message-color, var(--ig-gray-800));--message-actions-color: var(--ig-chat-message-actions-color, var(--ig-gray-700));--file-background: var(--ig-chat-file-background, var(--ig-gray-900-contrast));--file-icon-color: var(--ig-chat-file-icon-color, var(--ig-gray-500));--file-icon-accent-color: var(--ig-chat-file-icon-accent-color, var(--ig-gray-600));--image-background: var(--ig-chat-image-background, var(--ig-gray-100));--image-border: var(--ig-chat-image-border, var(--ig-gray-300));--image-attachment-icon: var(--ig-chat-image-attachment-icon, var(--ig-gray-900));--progress-indicator-color: var(--ig-chat-progress-indicator-color, var(--ig-secondary-500));--code-background: var(--ig-chat-code-background, var(--ig-gray-50));--ig-theme: material}`;\n"]}

package/components/chat/themes/dark/chat.shared.css.d.ts

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

package/components/chat/themes/dark/chat.shared.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{color-scheme:dark;--chat-input-border: var(--ig-chat-chat-input-border, var(--ig-gray-200));--code-border: var(--ig-chat-code-border, var(--ig-gray-200))}:host igc-chat-message::part(message-container){--shiki-purple: #b392f0;--shiki-navy: #e1e4e8;--shiki-dark-blue: #9ecbff;--shiki-red: #f97583;--shiki-blue: #79bbff;--shiki-green: #85e89d;--shiki-orange: #ffab70}`;
+//# sourceMappingURL=chat.shared.css.js.map

package/components/chat/themes/dark/chat.shared.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/dark/chat.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qXAAqX,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{color-scheme:dark;--chat-input-border: var(--ig-chat-chat-input-border, var(--ig-gray-200));--code-border: var(--ig-chat-code-border, var(--ig-gray-200))}:host igc-chat-message::part(message-container){--shiki-purple: #b392f0;--shiki-navy: #e1e4e8;--shiki-dark-blue: #9ecbff;--shiki-red: #f97583;--shiki-blue: #79bbff;--shiki-green: #85e89d;--shiki-orange: #ffab70}`;\n"]}

package/components/chat/themes/light/chat.shared.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--background: var(--ig-chat-background, var(--ig-surface-500));--header-background: var(--ig-chat-header-background, var(--ig-surface-500));--header-color: var(--ig-chat-header-color, var(--ig-surface-500-contrast));--header-border: var(--ig-chat-header-border, var(--ig-transparent-500));--message-background: var(--ig-chat-message-background, var(--ig-gray-200));--message-color: var(--ig-chat-message-color, var(--ig-gray-800));--message-actions-color: var(--ig-chat-message-actions-color, var(--ig-gray-700));--file-background: var(--ig-chat-file-background, var(--ig-gray-900-contrast));--file-icon-color: var(--ig-chat-file-icon-color, var(--ig-gray-500));--file-icon-accent-color: var(--ig-chat-file-icon-accent-color, var(--ig-gray-600));--image-background: var(--ig-chat-image-background, var(--ig-gray-100));--image-border: var(--ig-chat-image-border, var(--ig-gray-300));--image-attachment-icon: var(--ig-chat-image-attachment-icon, var(--ig-gray-900));--chat-input-border: var(--ig-chat-chat-input-border, var(--ig-gray-400));--progress-indicator-color: var(--ig-chat-progress-indicator-color, var(--ig-secondary-500));--code-background: var(--ig-chat-code-background, var(--ig-gray-50));--code-border: var(--ig-chat-code-border, var(--ig-gray-300))}`;
+export const styles = css `:host{color-scheme:light;--background: var(--ig-chat-background, var(--ig-surface-500));--header-background: var(--ig-chat-header-background, var(--ig-surface-500));--header-color: var(--ig-chat-header-color, var(--ig-surface-500-contrast));--header-border: var(--ig-chat-header-border, var(--ig-transparent-500));--message-background: var(--ig-chat-message-background, var(--ig-gray-200));--message-color: var(--ig-chat-message-color, var(--ig-gray-800));--message-actions-color: var(--ig-chat-message-actions-color, var(--ig-gray-700));--file-background: var(--ig-chat-file-background, var(--ig-gray-900-contrast));--file-icon-color: var(--ig-chat-file-icon-color, var(--ig-gray-500));--file-icon-accent-color: var(--ig-chat-file-icon-accent-color, var(--ig-gray-600));--image-background: var(--ig-chat-image-background, var(--ig-gray-100));--image-border: var(--ig-chat-image-border, var(--ig-gray-300));--image-attachment-icon: var(--ig-chat-image-attachment-icon, var(--ig-gray-900));--chat-input-border: var(--ig-chat-chat-input-border, var(--ig-gray-400));--progress-indicator-color: var(--ig-chat-progress-indicator-color, var(--ig-secondary-500));--code-background: var(--ig-chat-code-background, var(--ig-gray-50));--code-border: var(--ig-chat-code-border, var(--ig-gray-300))}:host igc-chat-message::part(message-container){--shiki-purple: #6f42c1;--shiki-navy: #24292e;--shiki-dark-blue: #032f62;--shiki-red: #d73a49;--shiki-blue: #005cc5;--shiki-green: #22863a;--shiki-orange: #e36209}`;
 //# sourceMappingURL=chat.shared.css.js.map

package/components/chat/themes/light/chat.shared.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/light/chat.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,svCAAsvC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--background: var(--ig-chat-background, var(--ig-surface-500));--header-background: var(--ig-chat-header-background, var(--ig-surface-500));--header-color: var(--ig-chat-header-color, var(--ig-surface-500-contrast));--header-border: var(--ig-chat-header-border, var(--ig-transparent-500));--message-background: var(--ig-chat-message-background, var(--ig-gray-200));--message-color: var(--ig-chat-message-color, var(--ig-gray-800));--message-actions-color: var(--ig-chat-message-actions-color, var(--ig-gray-700));--file-background: var(--ig-chat-file-background, var(--ig-gray-900-contrast));--file-icon-color: var(--ig-chat-file-icon-color, var(--ig-gray-500));--file-icon-accent-color: var(--ig-chat-file-icon-accent-color, var(--ig-gray-600));--image-background: var(--ig-chat-image-background, var(--ig-gray-100));--image-border: var(--ig-chat-image-border, var(--ig-gray-300));--image-attachment-icon: var(--ig-chat-image-attachment-icon, var(--ig-gray-900));--chat-input-border: var(--ig-chat-chat-input-border, var(--ig-gray-400));--progress-indicator-color: var(--ig-chat-progress-indicator-color, var(--ig-secondary-500));--code-background: var(--ig-chat-code-background, var(--ig-gray-50));--code-border: var(--ig-chat-code-border, var(--ig-gray-300))}`;\n"]}
+{"version":3,"file":"chat.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/light/chat.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,49CAA49C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{color-scheme:light;--background: var(--ig-chat-background, var(--ig-surface-500));--header-background: var(--ig-chat-header-background, var(--ig-surface-500));--header-color: var(--ig-chat-header-color, var(--ig-surface-500-contrast));--header-border: var(--ig-chat-header-border, var(--ig-transparent-500));--message-background: var(--ig-chat-message-background, var(--ig-gray-200));--message-color: var(--ig-chat-message-color, var(--ig-gray-800));--message-actions-color: var(--ig-chat-message-actions-color, var(--ig-gray-700));--file-background: var(--ig-chat-file-background, var(--ig-gray-900-contrast));--file-icon-color: var(--ig-chat-file-icon-color, var(--ig-gray-500));--file-icon-accent-color: var(--ig-chat-file-icon-accent-color, var(--ig-gray-600));--image-background: var(--ig-chat-image-background, var(--ig-gray-100));--image-border: var(--ig-chat-image-border, var(--ig-gray-300));--image-attachment-icon: var(--ig-chat-image-attachment-icon, var(--ig-gray-900));--chat-input-border: var(--ig-chat-chat-input-border, var(--ig-gray-400));--progress-indicator-color: var(--ig-chat-progress-indicator-color, var(--ig-secondary-500));--code-background: var(--ig-chat-code-background, var(--ig-gray-50));--code-border: var(--ig-chat-code-border, var(--ig-gray-300))}:host igc-chat-message::part(message-container){--shiki-purple: #6f42c1;--shiki-navy: #24292e;--shiki-dark-blue: #032f62;--shiki-red: #d73a49;--shiki-blue: #005cc5;--shiki-green: #22863a;--shiki-orange: #e36209}`;\n"]}

package/components/chat/themes/message.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{--igc-chat-message-padding: 0.75rem 1rem;--igc-chat-sent-message-start-margin: auto;--igc-chat-sent-message-end-margin: unset;--igc-chat-message-container-end-margin: auto;display:flex;flex-direction:column;width:100%}[part~=message-container],[part=plain-text]{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}[part~=message-container]{display:flex;margin-inline-end:var(--igc-chat-message-container-end-margin);flex-direction:column;gap:1rem}[part~=message-container] p{margin:0;padding:0}[part~=message-container] a{overflow-wrap:anywhere;color:var(--ig-primary-500)}[part~=message-container] pre,[part~=message-container] code{white-space:pre-wrap;overflow-wrap:break-word;overflow-x:auto;margin-block:unset}[part~=message-header]:empty,[part~=message-attachments]:empty,[part~=message-actions]:empty{display:none}[part~=sent]{margin-inline:var(--igc-chat-sent-message-start-margin, 0) var(--igc-chat-sent-message-end-margin, 0);padding:var(--igc-chat-message-padding);border-radius:1.5rem 1.5rem 0;max-width:36rem;width:-moz-fit-content;width:fit-content}`;
+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{--igc-chat-message-padding: 0.75rem 1rem;--igc-chat-sent-message-start-margin: auto;--igc-chat-sent-message-end-margin: unset;--igc-chat-message-container-end-margin: auto;display:flex;flex-direction:column;width:100%}[part~=message-container],[part=plain-text]{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}[part~=message-container]{display:flex;margin-inline-end:var(--igc-chat-message-container-end-margin);flex-direction:column;gap:1rem}[part~=message-container] p{margin:0;padding:0}[part~=message-container] a{overflow-wrap:anywhere;color:var(--ig-primary-500)}[part~=message-container] pre.shiki{font-size:.875rem;line-height:1.5rem;padding:1rem;border-radius:.25rem;max-height:20rem;max-width:42.5rem;overflow-y:auto}[part~=message-header]:empty,[part~=message-attachments]:empty,[part~=message-actions]:empty,[part~=plain-text]:empty{display:none}[part~=sent]{margin-inline:var(--igc-chat-sent-message-start-margin, 0) var(--igc-chat-sent-message-end-margin, 0);padding:var(--igc-chat-message-padding);border-radius:1.5rem 1.5rem 0;max-width:36rem;width:-moz-fit-content;width:fit-content}`;
 //# sourceMappingURL=message.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"message.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/message.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,41EAA41E,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{--igc-chat-message-padding: 0.75rem 1rem;--igc-chat-sent-message-start-margin: auto;--igc-chat-sent-message-end-margin: unset;--igc-chat-message-container-end-margin: auto;display:flex;flex-direction:column;width:100%}[part~=message-container],[part=plain-text]{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}[part~=message-container]{display:flex;margin-inline-end:var(--igc-chat-message-container-end-margin);flex-direction:column;gap:1rem}[part~=message-container] p{margin:0;padding:0}[part~=message-container] a{overflow-wrap:anywhere;color:var(--ig-primary-500)}[part~=message-container] pre,[part~=message-container] code{white-space:pre-wrap;overflow-wrap:break-word;overflow-x:auto;margin-block:unset}[part~=message-header]:empty,[part~=message-attachments]:empty,[part~=message-actions]:empty{display:none}[part~=sent]{margin-inline:var(--igc-chat-sent-message-start-margin, 0) var(--igc-chat-sent-message-end-margin, 0);padding:var(--igc-chat-message-padding);border-radius:1.5rem 1.5rem 0;max-width:36rem;width:-moz-fit-content;width:fit-content}`;\n"]}
+{"version":3,"file":"message.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/message.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,q4EAAq4E,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{--igc-chat-message-padding: 0.75rem 1rem;--igc-chat-sent-message-start-margin: auto;--igc-chat-sent-message-end-margin: unset;--igc-chat-message-container-end-margin: auto;display:flex;flex-direction:column;width:100%}[part~=message-container],[part=plain-text]{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}[part~=message-container]{display:flex;margin-inline-end:var(--igc-chat-message-container-end-margin);flex-direction:column;gap:1rem}[part~=message-container] p{margin:0;padding:0}[part~=message-container] a{overflow-wrap:anywhere;color:var(--ig-primary-500)}[part~=message-container] pre.shiki{font-size:.875rem;line-height:1.5rem;padding:1rem;border-radius:.25rem;max-height:20rem;max-width:42.5rem;overflow-y:auto}[part~=message-header]:empty,[part~=message-attachments]:empty,[part~=message-actions]:empty,[part~=plain-text]:empty{display:none}[part~=sent]{margin-inline:var(--igc-chat-sent-message-start-margin, 0) var(--igc-chat-sent-message-end-margin, 0);padding:var(--igc-chat-message-padding);border-radius:1.5rem 1.5rem 0;max-width:36rem;width:-moz-fit-content;width:fit-content}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `[part~=sent]{background:var(--message-background)}[part~=message-container]{color:var(--message-color)}[part~=message-actions] igc-icon-button::part(icon){color:var(--message-actions-color)}`;
+export const styles = css `:host{--shiki-bg: var(--code-background)}[part~=sent]{background:var(--message-background)}[part~=message-container]{color:var(--message-color)}[part~=message-container] pre.shiki{border:.0625rem solid var(--code-border)}[part~=message-actions] igc-icon-button::part(icon){color:var(--message-actions-color)}`;
 //# sourceMappingURL=chat-message.common.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/chat/themes/shared/chat-message/chat-message.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gMAAgM,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=sent]{background:var(--message-background)}[part~=message-container]{color:var(--message-color)}[part~=message-actions] igc-icon-button::part(icon){color:var(--message-actions-color)}`;\n"]}
+{"version":3,"file":"chat-message.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/chat/themes/shared/chat-message/chat-message.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,sTAAsT,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--shiki-bg: var(--code-background)}[part~=sent]{background:var(--message-background)}[part~=message-container]{color:var(--message-color)}[part~=message-container] pre.shiki{border:.0625rem solid var(--code-border)}[part~=message-actions] igc-icon-button::part(icon){color:var(--message-actions-color)}`;\n"]}

package/components/chat/themes/themes.js

@@ -3,17 +3,18 @@ import { styles as bootstrapDark } from './dark/chat.bootstrap.css.js';
 import { styles as fluentDark } from './dark/chat.fluent.css.js';
 import { styles as indigoDark } from './dark/chat.indigo.css.js';
 import { styles as materialDark } from './dark/chat.material.css.js';
+import { styles as sharedDark } from './dark/chat.shared.css.js';
 import { styles as bootstrapLight } from './light/chat.bootstrap.css.js';
 import { styles as fluentLight } from './light/chat.fluent.css.js';
 import { styles as indigoLight } from './light/chat.indigo.css.js';
 import { styles as materialLight } from './light/chat.material.css.js';
-import { styles as shared } from './light/chat.shared.css.js';
+import { styles as sharedLight } from './light/chat.shared.css.js';
 import { styles as bootstrap } from './shared/chat.bootstrap.css.js';
 import { styles as fluent } from './shared/chat.fluent.css.js';
 import { styles as indigo } from './shared/chat.indigo.css.js';
 const light = {
     shared: css `
-    ${shared}
+    ${sharedLight}
   `,
     bootstrap: css `
     ${bootstrap} ${bootstrapLight}
@@ -30,7 +31,7 @@ const light = {
 };
 const dark = {
     shared: css `
-    ${shared}
+    ${sharedDark}
   `,
     bootstrap: css `
     ${bootstrap} ${bootstrapDark}

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

@@ -1 +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;AAEvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;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';\n// Shared Styles\nimport { styles as shared } from './light/chat.shared.css.js';\nimport { styles as bootstrap } from './shared/chat.bootstrap.css.js';\nimport { styles as fluent } from './shared/chat.fluent.css.js';\nimport { styles as indigo } from './shared/chat.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"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;AACrE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,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,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;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';\nimport { styles as sharedDark } from './dark/chat.shared.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 sharedLight } from './light/chat.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/chat.bootstrap.css.js';\nimport { styles as fluent } from './shared/chat.fluent.css.js';\nimport { styles as indigo } from './shared/chat.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/date-picker/date-picker.d.ts

@@ -1,5 +1,5 @@
 import { type TemplateResult } from 'lit';
-import { type CalendarHeaderOrientation, type DateRangeDescriptor, type WeekDays } from '../calendar/types.js';
+import type { CalendarHeaderOrientation, DateRangeDescriptor, WeekDays } from '../calendar/types.js';
 import { type IgcCalendarResourceStrings } from '../common/i18n/calendar.resources.js';
 import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
@@ -10,8 +10,8 @@ export interface IgcDatePickerComponentEventMap {
     igcOpened: CustomEvent<void>;
     igcClosing: CustomEvent<void>;
     igcClosed: CustomEvent<void>;
-    igcChange: CustomEvent<Date>;
-    igcInput: CustomEvent<Date>;
+    igcChange: CustomEvent<Date | null>;
+    igcInput: CustomEvent<Date | null>;
 }
 declare const IgcDatePickerComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDatePickerComponentEventMap>> & AbstractConstructor<IgcBaseComboBoxLikeComponent>;
 /**
@@ -94,10 +94,11 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     static readonly tagName = "igc-date-picker";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private static readonly _increment;
-    protected _inputId: string;
-    private readonly _themes;
     protected get __validators(): import("../common/validators.js").Validator<IgcDatePickerComponent>[];
+    private readonly _inputId;
+    private readonly _themes;
+    private readonly _slots;
+    private _oldValue;
     private _activeDate;
     private _min;
     private _max;
@@ -109,11 +110,8 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     protected readonly _rootClickController: import("../common/controllers/root-click.js").RootClickController;
     private readonly _input;
     private readonly _calendar;
-    private readonly _prefixes;
-    private readonly _suffixes;
-    private readonly _actions;
-    private readonly _headerSlotItems;
     private get _isDropDown();
+    private get _isMaterial();
     /**
      * Sets the state of the datepicker dropdown.
      * @attr
@@ -237,7 +235,6 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     weekStart: WeekDays;
     protected _openChange(): void;
     constructor();
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
     private _setDateConstraints;
     private _shouldCloseCalendarDropdown;
     protected _onEscapeKey(): Promise<void>;

package/components/date-picker/date-picker.js

@@ -6,14 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var IgcDatePickerComponent_1;
 import { html, nothing } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
-import { convertToDate } from '../calendar/helpers.js';
-import { DateRangeType, } from '../calendar/types.js';
+import { convertToDate, createDateConstraints } from '../calendar/helpers.js';
 import { addKeybindings, altKey, arrowDown, arrowUp, escapeKey, } from '../common/controllers/key-bindings.js';
 import { addRootClickController } from '../common/controllers/root-click.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
 import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { watch } from '../common/decorators/watch.js';
@@ -24,7 +24,7 @@ import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
 import { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';
 import { createFormValueState } from '../common/mixins/forms/form-value.js';
-import { addSafeEventListener, createCounter, findElementFromEventPath, isEmpty, } from '../common/util.js';
+import { addSafeEventListener, bindIf, equal, findElementFromEventPath, } from '../common/util.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
 import { DateTimeUtil } from '../date-time-input/date-util.js';
 import IgcDialogComponent from '../dialog/dialog.js';
@@ -36,6 +36,8 @@ import { styles } from './themes/date-picker.base.css.js';
 import { styles as shared } from './themes/shared/date-picker.common.css.js';
 import { all } from './themes/themes.js';
 import { datePickerValidators } from './validators.js';
+let nextId = 1;
+const Slots = setSlots('prefix', 'suffix', 'helper-text', 'bad-input', 'value-missing', 'range-overflow', 'range-underflow', 'custom-error', 'invalid', 'title', 'header-date', 'clear-icon', 'calendar-icon', 'calendar-icon-open', 'actions');
 let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
     static { IgcDatePickerComponent_1 = this; }
     static { this.tagName = 'igc-date-picker'; }
@@ -43,13 +45,15 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
     static register() {
         registerComponent(IgcDatePickerComponent_1, IgcCalendarComponent, IgcDateTimeInputComponent, IgcFocusTrapComponent, IgcIconComponent, IgcPopoverComponent, IgcDialogComponent, IgcValidationContainerComponent);
     }
-    static { this._increment = createCounter(); }
     get __validators() {
         return datePickerValidators;
     }
     get _isDropDown() {
         return this.mode === 'dropdown';
     }
+    get _isMaterial() {
+        return this._themes.theme === 'material';
+    }
     set value(value) {
         this._formValue.setValueAndFormState(value);
     }
@@ -100,11 +104,16 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
     }
     _openChange() {
         this._rootClickController.update();
+        if (this.open) {
+            this._oldValue = this.value;
+        }
     }
     constructor() {
         super();
-        this._inputId = `date-picker-${IgcDatePickerComponent_1._increment()}`;
+        this._inputId = `date-picker-${nextId++}`;
         this._themes = addThemingController(this, all);
+        this._slots = addSlotController(this, { slots: Slots });
+        this._oldValue = null;
         this._activeDate = null;
         this._min = null;
         this._max = null;
@@ -138,29 +147,8 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
             .set([altKey, arrowUp], this._onEscapeKey)
             .set(escapeKey, this._onEscapeKey);
     }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        root.addEventListener('slotchange', () => this.requestUpdate());
-        return root;
-    }
     _setDateConstraints() {
-        const dates = [];
-        if (this._min) {
-            dates.push({
-                type: DateRangeType.Before,
-                dateRange: [this._min],
-            });
-        }
-        if (this._max) {
-            dates.push({
-                type: DateRangeType.After,
-                dateRange: [this._max],
-            });
-        }
-        if (!isEmpty(this._disabledDates ?? [])) {
-            dates.push(...this.disabledDates);
-        }
-        this._dateConstraints = isEmpty(dates) ? undefined : dates;
+        this._dateConstraints = createDateConstraints(this.min, this.max, this.disabledDates);
     }
     async _shouldCloseCalendarDropdown() {
         if (!this.keepOpenOnSelect && (await this._hide(true))) {
@@ -176,6 +164,11 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
     _handleFocusOut({ relatedTarget }) {
         if (!this.contains(relatedTarget)) {
             this._handleBlur();
+            const readOnly = !this._isDropDown || this.readOnly || this.nonEditable;
+            if (readOnly && !equal(this.value, this._oldValue)) {
+                this.emitEvent('igcChange', { detail: this.value });
+                this._oldValue = this.value;
+            }
         }
     }
     _handlerCalendarIconSlotPointerDown(event) {
@@ -226,12 +219,14 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
     }
     _handleDialogClosing(event) {
         event.stopPropagation();
+        this._oldValue = this.value;
         this._hide(true);
     }
     _handleDialogClosed(event) {
         event.stopPropagation();
     }
     clear() {
+        this._oldValue = this.value;
         this.value = null;
         this._input?.clear();
     }
@@ -257,7 +252,7 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
           <span
             slot="suffix"
             part="clear-icon"
-            @click=${this.readOnly ? nothing : this.clear}
+            @click=${bindIf(!this.readOnly, this.clear)}
           >
             <slot name="clear-icon">
               <igc-icon
@@ -280,7 +275,7 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
         slot="prefix"
         part=${state}
         @pointerdown=${this._handlerCalendarIconSlotPointerDown}
-        @click=${this.readOnly ? nothing : this.handleAnchorClick}
+        @click=${bindIf(!this.readOnly, this.handleAnchorClick)}
       >
         <slot name=${state}>${defaultIcon}</slot>
       </span>
@@ -290,21 +285,25 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
         if (this._isDropDown) {
             return nothing;
         }
-        const hasHeaderDate = isEmpty(this._headerSlotItems) ? '' : 'header-date';
+        const hasHeaderDate = this._slots.hasAssignedElements('header-date');
         return html `
       <slot name="title" slot="title">
         ${this.resourceStrings.selectDate}
       </slot>
-      <slot name="header-date" slot=${hasHeaderDate}></slot>
+      <slot
+        name="header-date"
+        slot=${bindIf(hasHeaderDate, 'header-date')}
+      ></slot>
     `;
     }
     _renderCalendar(id) {
         const hideHeader = this._isDropDown ? true : this.hideHeader;
+        const isInert = !this.open || this.disabled;
         return html `
       <igc-calendar
         aria-labelledby=${id}
         role="dialog"
-        .inert=${!this.open || this.disabled}
+        .inert=${isInert}
         ?show-week-numbers=${this.showWeekNumbers}
         ?hide-outside-days=${this.hideOutsideDays}
         ?hide-header=${hideHeader}
@@ -329,19 +328,23 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
     `;
     }
     _renderActions() {
-        const hasActions = !isEmpty(this._actions);
-        const slot = this._isDropDown || hasActions ? undefined : 'footer';
+        const hasActions = this._slots.hasAssignedElements('actions');
         return html `
-      <div part="actions" ?hidden=${!hasActions} slot=${ifDefined(slot)}>
+      <div
+        part="actions"
+        ?hidden=${!hasActions}
+        slot=${bindIf(!(this._isDropDown || hasActions), 'footer')}
+      >
         <slot name="actions"></slot>
       </div>
     `;
     }
     _renderPicker(id) {
+        const isDisabled = !this.open || this.disabled;
         return this._isDropDown
             ? html `
           <igc-popover ?open=${this.open} anchor=${id} flip shift>
-            <igc-focus-trap ?disabled=${!this.open || this.disabled}>
+            <igc-focus-trap ?disabled=${isDisabled}>
               ${this._renderCalendar(id)}${this._renderActions()}
             </igc-focus-trap>
           </igc-popover>
@@ -368,7 +371,7 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
           <label
             part="label"
             for=${id}
-            @click=${isDisabled ? nothing : this.handleAnchorClick}
+            @click=${bindIf(!isDisabled, this.handleAnchorClick)}
           >
             ${this.label}
           </label>
@@ -381,14 +384,14 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
     _renderInput(id) {
         const format = DateTimeUtil.predefinedToDateDisplayFormat(this._displayFormat);
         const readOnly = !this._isDropDown || this.readOnly || this.nonEditable;
-        const prefix = isEmpty(this._prefixes) ? undefined : 'prefix';
-        const suffix = isEmpty(this._suffixes) ? undefined : 'suffix';
-        const isMaterial = this._themes.theme === 'material';
+        const hasPrefix = this._slots.hasAssignedElements('prefix');
+        const hasSuffix = this._slots.hasAssignedElements('suffix');
+        const hasClickHandler = !(this._isDropDown || this.readOnly);
         return html `
       <igc-date-time-input
         id=${id}
         aria-haspopup="dialog"
-        label=${ifDefined(isMaterial ? this.label : undefined)}
+        label=${bindIf(this._isMaterial, this.label)}
         input-format=${ifDefined(this._inputFormat)}
         display-format=${ifDefined(format)}
         ?disabled=${this.disabled}
@@ -404,24 +407,22 @@ let IgcDatePickerComponent = class IgcDatePickerComponent extends FormAssociated
         .invalid=${this.invalid}
         @igcChange=${this._handleInputChangeEvent}
         @igcInput=${this._handleInputEvent}
-        @click=${this._isDropDown || this.readOnly
-            ? nothing
-            : this._handleInputClick}
+        @click=${bindIf(hasClickHandler, this._handleInputClick)}
         exportparts="input, label, prefix, suffix"
       >
         ${this._renderCalendarIcon()}
-        <slot name="prefix" slot=${ifDefined(prefix)}></slot>
+        <slot name="prefix" slot=${bindIf(hasPrefix, 'prefix')}></slot>
         ${this._renderClearIcon()}
-        <slot name="suffix" slot=${ifDefined(suffix)}></slot>
+        <slot name="suffix" slot=${bindIf(hasSuffix, 'suffix')}></slot>
       </igc-date-time-input>
     `;
     }
     render() {
         const id = this.id || this._inputId;
-        const isMaterial = this._themes.theme === 'material';
         return html `
-      ${isMaterial ? nothing : this._renderLabel(id)} ${this._renderInput(id)}
-      ${this._renderPicker(id)} ${this._renderHelperText()}
+      ${this._isMaterial ? nothing : this._renderLabel(id)}
+      ${this._renderInput(id)} ${this._renderPicker(id)}
+      ${this._renderHelperText()}
     `;
     }
 };
@@ -431,18 +432,6 @@ __decorate([
 __decorate([
     query(IgcCalendarComponent.tagName)
 ], IgcDatePickerComponent.prototype, "_calendar", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'prefix' })
-], IgcDatePickerComponent.prototype, "_prefixes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'suffix' })
-], IgcDatePickerComponent.prototype, "_suffixes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'actions' })
-], IgcDatePickerComponent.prototype, "_actions", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'header-date' })
-], IgcDatePickerComponent.prototype, "_headerSlotItems", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcDatePickerComponent.prototype, "open", void 0);