igniteui-webcomponents 6.4.0-alpha.0 → 6.4.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/animations/player.d.ts +37 -11
- package/animations/player.js +32 -41
- package/animations/player.js.map +1 -1
- package/components/accordion/accordion.d.ts +18 -12
- package/components/accordion/accordion.js +82 -65
- package/components/accordion/accordion.js.map +1 -1
- package/components/badge/badge.d.ts +8 -0
- package/components/badge/badge.js +16 -1
- package/components/badge/badge.js.map +1 -1
- package/components/badge/themes/badge.base.css.js +1 -1
- package/components/badge/themes/badge.base.css.js.map +1 -1
- package/components/badge/themes/dark/badge.indigo.css.js +1 -1
- package/components/badge/themes/dark/badge.indigo.css.js.map +1 -1
- package/components/badge/themes/shared/badge.bootstrap.css.js +1 -1
- package/components/badge/themes/shared/badge.bootstrap.css.js.map +1 -1
- package/components/badge/themes/shared/badge.common.css.js +1 -1
- package/components/badge/themes/shared/badge.common.css.js.map +1 -1
- package/components/badge/themes/shared/badge.fluent.css.d.ts +1 -0
- package/components/badge/themes/shared/badge.fluent.css.js +3 -0
- package/components/badge/themes/shared/badge.fluent.css.js.map +1 -0
- package/components/badge/themes/shared/badge.indigo.css.js +1 -1
- package/components/badge/themes/shared/badge.indigo.css.js.map +1 -1
- package/components/badge/themes/shared/badge.material.css.d.ts +1 -0
- package/components/badge/themes/shared/badge.material.css.js +3 -0
- package/components/badge/themes/shared/badge.material.css.js.map +1 -0
- package/components/badge/themes/themes.js +6 -4
- package/components/badge/themes/themes.js.map +1 -1
- package/components/banner/banner.d.ts +2 -3
- package/components/banner/banner.js +13 -19
- package/components/banner/banner.js.map +1 -1
- package/components/chat/chat-input.d.ts +7 -3
- package/components/chat/chat-input.js +21 -8
- package/components/chat/chat-input.js.map +1 -1
- package/components/chat/chat-message.d.ts +5 -2
- package/components/chat/chat-message.js +18 -10
- package/components/chat/chat-message.js.map +1 -1
- package/components/chat/chat.d.ts +1 -0
- package/components/chat/chat.js +4 -2
- package/components/chat/chat.js.map +1 -1
- package/components/chat/types.d.ts +2 -0
- package/components/chat/types.js.map +1 -1
- package/components/chat/utils.d.ts +13 -2
- package/components/chat/utils.js +36 -14
- package/components/chat/utils.js.map +1 -1
- package/components/checkbox/themes/checkbox.base.css.js +1 -1
- package/components/checkbox/themes/checkbox.base.css.js.map +1 -1
- package/components/checkbox/themes/shared/checkbox/checkbox.fluent.css.js +1 -1
- package/components/checkbox/themes/shared/checkbox/checkbox.fluent.css.js.map +1 -1
- package/components/combo/combo.d.ts +11 -9
- package/components/combo/combo.js +34 -49
- package/components/combo/combo.js.map +1 -1
- package/components/combo/controllers/navigation.d.ts +39 -43
- package/components/combo/controllers/navigation.js +153 -175
- package/components/combo/controllers/navigation.js.map +1 -1
- package/components/combo/themes/shared/combo.bootstrap.css.js +1 -1
- package/components/combo/themes/shared/combo.bootstrap.css.js.map +1 -1
- package/components/combo/themes/shared/combo.common.css.js +1 -1
- package/components/combo/themes/shared/combo.common.css.js.map +1 -1
- package/components/combo/themes/shared/combo.fluent.css.js +1 -1
- package/components/combo/themes/shared/combo.fluent.css.js.map +1 -1
- package/components/combo/themes/shared/combo.indigo.css.js +1 -1
- package/components/combo/themes/shared/combo.indigo.css.js.map +1 -1
- package/components/combo/themes/shared/combo.material.css.js +1 -1
- package/components/combo/themes/shared/combo.material.css.js.map +1 -1
- package/components/date-range-picker/date-range-picker.d.ts +4 -0
- package/components/date-range-picker/date-range-picker.js.map +1 -1
- package/components/dialog/themes/dialog.base.css.js +1 -1
- package/components/dialog/themes/dialog.base.css.js.map +1 -1
- package/components/dialog/themes/shared/dialog.common.css.js +1 -1
- package/components/dialog/themes/shared/dialog.common.css.js.map +1 -1
- package/components/expansion-panel/expansion-panel.d.ts +6 -5
- package/components/expansion-panel/expansion-panel.js +33 -42
- package/components/expansion-panel/expansion-panel.js.map +1 -1
- package/components/input/themes/input.base.css.js +1 -1
- package/components/input/themes/input.base.css.js.map +1 -1
- package/components/mask-input/mask-input-base.js +5 -0
- package/components/mask-input/mask-input-base.js.map +1 -1
- package/components/select/themes/shared/select.common.css.js +1 -1
- package/components/select/themes/shared/select.common.css.js.map +1 -1
- package/components/select/themes/shared/select.fluent.css.js +1 -1
- package/components/select/themes/shared/select.fluent.css.js.map +1 -1
- package/components/select/themes/shared/select.material.css.js +1 -1
- package/components/select/themes/shared/select.material.css.js.map +1 -1
- package/components/stepper/step.d.ts +1 -1
- package/components/stepper/step.js +4 -6
- package/components/stepper/step.js.map +1 -1
- package/components/tooltip/themes/tooltip.base.css.js +1 -1
- package/components/tooltip/themes/tooltip.base.css.js.map +1 -1
- package/components/tooltip/tooltip.d.ts +2 -0
- package/components/tooltip/tooltip.js +9 -2
- package/components/tooltip/tooltip.js.map +1 -1
- package/components/tree/tree-item.js +1 -5
- package/components/tree/tree-item.js.map +1 -1
- package/custom-elements.json +1253 -1063
- package/igniteui-webcomponents.css-data.json +1 -1
- package/igniteui-webcomponents.html-data.json +1 -1
- package/package.json +1 -1
- package/web-types.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/badge.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/badge.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,oqHAAoqH,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part=base]{padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}`;\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host{--elevation: var(--ig-badge-elevation, var(--ig-elevation-0));--background-color: var(--ig-badge-background-color, var(--ig-primary-400));--size: var(--ig-badge-size, max(var(--is-large, 1) * max(1.375rem, -1 * 1.375rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem)));--default-size: var(--ig-badge-default-size, 3);--dot-size: var(--ig-badge-dot-size, max(var(--is-large, 1) * max(0.625rem, -1 * 0.625rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.375rem, -1 * 0.375rem)));--ig-theme: indigo}`;
|
|
2
|
+
export const styles = css `:host{--elevation: var(--ig-badge-elevation, var(--ig-elevation-0));--background-color: var(--ig-badge-background-color, var(--ig-primary-400));--size: var(--ig-badge-size, max(var(--is-large, 1) * max(1.375rem, -1 * 1.375rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem)));--default-size: var(--ig-badge-default-size, 3);--dot-size: var(--ig-badge-dot-size, max(var(--is-large, 1) * max(0.625rem, -1 * 0.625rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.375rem, -1 * 0.375rem)));--ig-theme: indigo}:host([variant=warning]) [part~=base]{color:var(--ig-gray-50)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-gray-50)}`;
|
|
3
3
|
//# sourceMappingURL=badge.indigo.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/dark/badge.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"badge.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/dark/badge.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gxBAAgxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--elevation: var(--ig-badge-elevation, var(--ig-elevation-0));--background-color: var(--ig-badge-background-color, var(--ig-primary-400));--size: var(--ig-badge-size, max(var(--is-large, 1) * max(1.375rem, -1 * 1.375rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem)));--default-size: var(--ig-badge-default-size, 3);--dot-size: var(--ig-badge-dot-size, max(var(--is-large, 1) * max(0.625rem, -1 * 0.625rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.375rem, -1 * 0.375rem)));--ig-theme: indigo}:host([variant=warning]) [part~=base]{color:var(--ig-gray-50)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-gray-50)}`;\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host([
|
|
2
|
+
export const styles = css `:host([variant=danger]) [part~=base]{color:var(--ig-error-100-contrast)}`;
|
|
3
3
|
//# sourceMappingURL=badge.bootstrap.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/shared/badge.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"badge.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/shared/badge.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0EAA0E,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([variant=danger]) [part~=base]{color:var(--ig-error-100-contrast)}`;\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css
|
|
2
|
+
export const styles = css `:host{--component-size: var(--ig-size, var(--default-size));--badge-size: var(--component-size);--_badge-size: var(--size)}:host igc-icon,:host ::slotted(igc-icon){--size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(0.875rem, -1 * 0.875rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));--component-size: var(--badge-size)}[part~=base]{box-shadow:var(--elevation);color:var(--text-color)}::slotted(igc-icon){color:var(--icon-color)}:host([variant=primary]) [part~=base]{background:var(--background-color)}:host([shape=square]:not([dot])) [part~=base]{border-radius:var(--border-radius)}:host([outlined]) [part~=base]{box-shadow:0 0 0 .125rem var(--border-color)}:host([dot]) [part~=base]{--_dot-size: var(--dot-size);min-width:var(--_dot-size);min-height:var(--_dot-size)}:host([dot]) [part~=base] igc-icon,:host([dot]) [part~=base]>*{display:none}`;
|
|
3
3
|
//# sourceMappingURL=badge.common.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.common.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/shared/badge.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"badge.common.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/shared/badge.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,m3BAAm3B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size));--badge-size: var(--component-size);--_badge-size: var(--size)}:host igc-icon,:host ::slotted(igc-icon){--size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(0.875rem, -1 * 0.875rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));--component-size: var(--badge-size)}[part~=base]{box-shadow:var(--elevation);color:var(--text-color)}::slotted(igc-icon){color:var(--icon-color)}:host([variant=primary]) [part~=base]{background:var(--background-color)}:host([shape=square]:not([dot])) [part~=base]{border-radius:var(--border-radius)}:host([outlined]) [part~=base]{box-shadow:0 0 0 .125rem var(--border-color)}:host([dot]) [part~=base]{--_dot-size: var(--dot-size);min-width:var(--_dot-size);min-height:var(--_dot-size)}:host([dot]) [part~=base] igc-icon,:host([dot]) [part~=base]>*{display:none}`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/shared/badge.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mEAAmE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([variant=info]) [part~=base]{background:var(--ig-info-700)}`;\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css
|
|
2
|
+
export const styles = css `:host{--component-size: var(--ig-size, var(--default-size));--badge-size: var(--component-size)}:host igc-icon,:host ::slotted(igc-icon){--size: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.625rem, -1 * 0.625rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem))}:host(:not(:empty,[dot])) [part=base]{padding-inline:max(var(--is-large, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=success]) [part~=base]{background:var(--ig-success-700)}:host([variant=warning]) [part~=base]{color:var(--ig-gray-900)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-gray-900)}[part~=base]{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);font-size:max(var(--is-large, 1)*max(var(--ig-button-font-size), -1 * var(--ig-button-font-size)),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem),var(--is-small, 1)*max(0.5625rem, -1 * 0.5625rem));line-height:max(var(--is-large, 1)*max(var(--ig-button-line-height), -1 * var(--ig-button-line-height)),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem))}`;
|
|
3
3
|
//# sourceMappingURL=badge.indigo.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/shared/badge.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"badge.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/shared/badge.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4wDAA4wD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--component-size: var(--ig-size, var(--default-size));--badge-size: var(--component-size)}:host igc-icon,:host ::slotted(igc-icon){--size: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.625rem, -1 * 0.625rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem))}:host(:not(:empty,[dot])) [part=base]{padding-inline:max(var(--is-large, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=success]) [part~=base]{background:var(--ig-success-700)}:host([variant=warning]) [part~=base]{color:var(--ig-gray-900)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-gray-900)}[part~=base]{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);font-size:max(var(--is-large, 1)*max(var(--ig-button-font-size), -1 * var(--ig-button-font-size)),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem),var(--is-small, 1)*max(0.5625rem, -1 * 0.5625rem));line-height:max(var(--is-large, 1)*max(var(--ig-button-line-height), -1 * var(--ig-button-line-height)),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem))}`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `:host([variant=danger]) [part~=base]{background:var(--ig-error-700)}:host([variant=success]) [part~=base]{background:var(--ig-success-900)}:host([variant=info]) [part~=base]{background:var(--ig-info-800)}`;
|
|
3
|
+
//# sourceMappingURL=badge.material.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.material.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/shared/badge.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8MAA8M,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([variant=danger]) [part~=base]{background:var(--ig-error-700)}:host([variant=success]) [part~=base]{background:var(--ig-success-900)}:host([variant=info]) [part~=base]{background:var(--ig-info-800)}`;\n"]}
|
|
@@ -9,7 +9,9 @@ import { styles as indigoLight } from './light/badge.indigo.css.js';
|
|
|
9
9
|
import { styles as materialLight } from './light/badge.material.css.js';
|
|
10
10
|
import { styles as shared } from './light/badge.shared.css.js';
|
|
11
11
|
import { styles as bootstrap } from './shared/badge.bootstrap.css.js';
|
|
12
|
+
import { styles as fluent } from './shared/badge.fluent.css.js';
|
|
12
13
|
import { styles as indigo } from './shared/badge.indigo.css.js';
|
|
14
|
+
import { styles as material } from './shared/badge.material.css.js';
|
|
13
15
|
const light = {
|
|
14
16
|
shared: css `
|
|
15
17
|
${shared}
|
|
@@ -18,10 +20,10 @@ const light = {
|
|
|
18
20
|
${bootstrap} ${bootstrapLight}
|
|
19
21
|
`,
|
|
20
22
|
material: css `
|
|
21
|
-
${materialLight}
|
|
23
|
+
${material} ${materialLight}
|
|
22
24
|
`,
|
|
23
25
|
fluent: css `
|
|
24
|
-
${fluentLight}
|
|
26
|
+
${fluent} ${fluentLight}
|
|
25
27
|
`,
|
|
26
28
|
indigo: css `
|
|
27
29
|
${indigo} ${indigoLight}
|
|
@@ -35,10 +37,10 @@ const dark = {
|
|
|
35
37
|
${bootstrap} ${bootstrapDark}
|
|
36
38
|
`,
|
|
37
39
|
material: css `
|
|
38
|
-
${materialDark}
|
|
40
|
+
${material} ${materialDark}
|
|
39
41
|
`,
|
|
40
42
|
fluent: css `
|
|
41
|
-
${fluentDark}
|
|
43
|
+
${fluent} ${fluentDark}
|
|
42
44
|
`,
|
|
43
45
|
indigo: css `
|
|
44
46
|
${indigo} ${indigoDark}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAEpE,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,QAAQ,IAAI,aAAa;GAC5B;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,QAAQ,IAAI,YAAY;GAC3B;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/badge.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/badge.fluent.css.js';\nimport { styles as indigoDark } from './dark/badge.indigo.css.js';\nimport { styles as materialDark } from './dark/badge.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/badge.bootstrap.css.js';\nimport { styles as fluentLight } from './light/badge.fluent.css.js';\nimport { styles as indigoLight } from './light/badge.indigo.css.js';\nimport { styles as materialLight } from './light/badge.material.css.js';\nimport { styles as shared } from './light/badge.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/badge.bootstrap.css.js';\nimport { styles as fluent } from './shared/badge.fluent.css.js';\nimport { styles as indigo } from './shared/badge.indigo.css.js';\nimport { styles as material } from './shared/badge.material.css.js';\n\nconst light = {\n shared: css`\n ${shared}\n `,\n bootstrap: css`\n ${bootstrap} ${bootstrapLight}\n `,\n material: css`\n ${material} ${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 ${material} ${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"]}
|
|
@@ -29,21 +29,20 @@ export default class IgcBannerComponent extends IgcBannerComponent_base {
|
|
|
29
29
|
static styles: import("lit").CSSResult[];
|
|
30
30
|
static register(): void;
|
|
31
31
|
private readonly _bannerRef;
|
|
32
|
-
private readonly
|
|
32
|
+
private readonly _player;
|
|
33
33
|
/**
|
|
34
34
|
* Determines whether the banner is being shown/hidden.
|
|
35
35
|
* @attr
|
|
36
36
|
*/
|
|
37
37
|
open: boolean;
|
|
38
38
|
constructor();
|
|
39
|
+
private _handleClick;
|
|
39
40
|
/** Shows the banner if not already shown. Returns `true` when the animation has completed. */
|
|
40
41
|
show(): Promise<boolean>;
|
|
41
42
|
/** Hides the banner if not already hidden. Returns `true` when the animation has completed. */
|
|
42
43
|
hide(): Promise<boolean>;
|
|
43
44
|
/** Toggles between shown/hidden state. Returns `true` when the animation has completed. */
|
|
44
45
|
toggle(): Promise<boolean>;
|
|
45
|
-
private toggleAnimation;
|
|
46
|
-
private handleClick;
|
|
47
46
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
48
47
|
}
|
|
49
48
|
declare global {
|
|
@@ -12,6 +12,7 @@ import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
|
|
|
12
12
|
import { addThemingController } from '../../theming/theming-controller.js';
|
|
13
13
|
import IgcButtonComponent from '../button/button.js';
|
|
14
14
|
import { addInternalsController } from '../common/controllers/internals.js';
|
|
15
|
+
import { addSlotController, setSlots } from '../common/controllers/slot.js';
|
|
15
16
|
import { registerComponent } from '../common/definitions/register.js';
|
|
16
17
|
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
|
|
17
18
|
import { styles } from './themes/banner.base.css.js';
|
|
@@ -25,9 +26,10 @@ export default class IgcBannerComponent extends EventEmitterMixin(LitElement) {
|
|
|
25
26
|
constructor() {
|
|
26
27
|
super();
|
|
27
28
|
this._bannerRef = createRef();
|
|
28
|
-
this.
|
|
29
|
+
this._player = addAnimationController(this, this._bannerRef);
|
|
29
30
|
this.open = false;
|
|
30
31
|
addThemingController(this, all);
|
|
32
|
+
addSlotController(this, { slots: setSlots('prefix', 'actions') });
|
|
31
33
|
addInternalsController(this, {
|
|
32
34
|
initialARIA: {
|
|
33
35
|
role: 'status',
|
|
@@ -35,37 +37,29 @@ export default class IgcBannerComponent extends EventEmitterMixin(LitElement) {
|
|
|
35
37
|
},
|
|
36
38
|
});
|
|
37
39
|
}
|
|
40
|
+
async _handleClick() {
|
|
41
|
+
if (this.emitEvent('igcClosing', { cancelable: true })) {
|
|
42
|
+
await this.hide();
|
|
43
|
+
this.emitEvent('igcClosed');
|
|
44
|
+
}
|
|
45
|
+
}
|
|
38
46
|
async show() {
|
|
39
47
|
if (this.open) {
|
|
40
48
|
return false;
|
|
41
49
|
}
|
|
42
50
|
this.open = true;
|
|
43
|
-
return
|
|
51
|
+
return this._player.playExclusive(growVerIn());
|
|
44
52
|
}
|
|
45
53
|
async hide() {
|
|
46
54
|
if (!this.open) {
|
|
47
55
|
return false;
|
|
48
56
|
}
|
|
49
|
-
await this.
|
|
57
|
+
await this._player.playExclusive(growVerOut());
|
|
50
58
|
this.open = false;
|
|
51
59
|
return true;
|
|
52
60
|
}
|
|
53
61
|
async toggle() {
|
|
54
|
-
return this.open ?
|
|
55
|
-
}
|
|
56
|
-
async toggleAnimation(dir) {
|
|
57
|
-
const animation = dir === 'open' ? growVerIn : growVerOut;
|
|
58
|
-
const [_, event] = await Promise.all([
|
|
59
|
-
this._animationPlayer.stopAll(),
|
|
60
|
-
this._animationPlayer.play(animation()),
|
|
61
|
-
]);
|
|
62
|
-
return event.type === 'finish';
|
|
63
|
-
}
|
|
64
|
-
async handleClick() {
|
|
65
|
-
if (this.emitEvent('igcClosing', { cancelable: true })) {
|
|
66
|
-
await this.hide();
|
|
67
|
-
this.emitEvent('igcClosed');
|
|
68
|
-
}
|
|
62
|
+
return this.open ? this.hide() : this.show();
|
|
69
63
|
}
|
|
70
64
|
render() {
|
|
71
65
|
return html `
|
|
@@ -84,7 +78,7 @@ export default class IgcBannerComponent extends EventEmitterMixin(LitElement) {
|
|
|
84
78
|
<igc-button
|
|
85
79
|
type="button"
|
|
86
80
|
variant="flat"
|
|
87
|
-
@click=${this.
|
|
81
|
+
@click=${this._handleClick}
|
|
88
82
|
>OK</igc-button
|
|
89
83
|
>
|
|
90
84
|
</slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/banner.base.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcBannerComponentEventMap {\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\n/**\n * The `igc-banner` component displays important and concise message(s) for a user to address, that is specific to a page or feature.\n *\n * @element igc-banner\n *\n * @slot - Renders the text content of the banner message.\n * @slot prefix - Renders additional content at the start of the message block.\n * @slot actions - Renders any action elements.\n *\n * @fires igcClosing - Emitted before closing the banner - when a user interacts (click) with the default action of the banner.\n * @fires igcClosed - Emitted after the banner is closed - when a user interacts (click) with the default action of the banner.\n *\n * @csspart base - The base wrapper of the banner component.\n * @csspart spacer - The inner wrapper that sets the space around the banner.\n * @csspart message - The part that holds the text and the illustration.\n * @csspart illustration - The part that holds the banner icon/illustration.\n * @csspart content - The part that holds the banner text content.\n * @csspart actions - The part that holds the banner action buttons.\n */\n\nexport default class IgcBannerComponent extends EventEmitterMixin<\n IgcBannerComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-banner';\n public static styles = [styles];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcBannerComponent, IgcButtonComponent);\n }\n\n private readonly _bannerRef = createRef<HTMLElement>();\n private readonly _player = addAnimationController(this, this._bannerRef);\n\n /**\n * Determines whether the banner is being shown/hidden.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n constructor() {\n super();\n\n addThemingController(this, all);\n addSlotController(this, { slots: setSlots('prefix', 'actions') });\n addInternalsController(this, {\n initialARIA: {\n role: 'status',\n ariaLive: 'polite',\n },\n });\n }\n\n private async _handleClick(): Promise<void> {\n if (this.emitEvent('igcClosing', { cancelable: true })) {\n await this.hide();\n this.emitEvent('igcClosed');\n }\n }\n\n /** Shows the banner if not already shown. Returns `true` when the animation has completed. */\n public async show(): Promise<boolean> {\n if (this.open) {\n return false;\n }\n\n this.open = true;\n return this._player.playExclusive(growVerIn());\n }\n\n /** Hides the banner if not already hidden. Returns `true` when the animation has completed. */\n public async hide(): Promise<boolean> {\n if (!this.open) {\n return false;\n }\n\n await this._player.playExclusive(growVerOut());\n this.open = false;\n return true;\n }\n\n /** Toggles between shown/hidden state. Returns `true` when the animation has completed. */\n public async toggle(): Promise<boolean> {\n return this.open ? this.hide() : this.show();\n }\n\n protected override render() {\n return html`\n <div ${ref(this._bannerRef)} part=\"base\" .inert=${!this.open}>\n <div part=\"spacer\">\n <div part=\"message\">\n <div part=\"illustration\">\n <slot name=\"prefix\"></slot>\n </div>\n <div part=\"content\">\n <slot></slot>\n </div>\n </div>\n <div part=\"actions\">\n <slot name=\"actions\">\n <igc-button\n type=\"button\"\n variant=\"flat\"\n @click=${this._handleClick}\n >OK</igc-button\n >\n </slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-banner': IgcBannerComponent;\n }\n}\n"]}
|
|
@@ -36,15 +36,19 @@ export default class IgcChatInputComponent extends LitElement {
|
|
|
36
36
|
private _userIsTyping;
|
|
37
37
|
private _userLastTypeTime;
|
|
38
38
|
private _typingTimeout;
|
|
39
|
-
private readonly
|
|
39
|
+
private readonly _adoptedStyles;
|
|
40
|
+
private readonly _stateChanged;
|
|
41
|
+
private readonly _stateConsumer;
|
|
40
42
|
private readonly _userInputState;
|
|
41
|
-
private readonly _textInputElement
|
|
42
|
-
protected readonly _fileInput
|
|
43
|
+
private readonly _textInputElement?;
|
|
44
|
+
protected readonly _fileInput?: HTMLInputElement;
|
|
43
45
|
private _parts;
|
|
46
|
+
private get _state();
|
|
44
47
|
private get _acceptedTypes();
|
|
45
48
|
constructor();
|
|
46
49
|
/** @internal */
|
|
47
50
|
focusInput(): void;
|
|
51
|
+
private _adoptPageStyles;
|
|
48
52
|
private _getRenderer;
|
|
49
53
|
private _sendMessage;
|
|
50
54
|
private _setTypingStateAndEmit;
|
|
@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
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;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { consume } from '@lit/context';
|
|
7
|
+
import { ContextConsumer, consume } from '@lit/context';
|
|
8
8
|
import { html, LitElement, nothing } from 'lit';
|
|
9
9
|
import { query, state } from 'lit/decorators.js';
|
|
10
10
|
import { cache } from 'lit/directives/cache.js';
|
|
@@ -23,13 +23,16 @@ import IgcTextareaComponent from '../textarea/textarea.js';
|
|
|
23
23
|
import { styles } from './themes/input.base.css.js';
|
|
24
24
|
import { all } from './themes/input.js';
|
|
25
25
|
import { styles as shared } from './themes/shared/input/input.common.css.js';
|
|
26
|
-
import { getChatAcceptedFiles, getIconName } from './utils.js';
|
|
26
|
+
import { addAdoptedStylesController, getChatAcceptedFiles, getIconName, } from './utils.js';
|
|
27
27
|
export default class IgcChatInputComponent extends LitElement {
|
|
28
28
|
static { this.tagName = 'igc-chat-input'; }
|
|
29
29
|
static { this.styles = [styles, shared]; }
|
|
30
30
|
static register() {
|
|
31
31
|
registerComponent(IgcChatInputComponent, IgcTextareaComponent, IgcIconButtonComponent, IgcChipComponent, IgcIconComponent);
|
|
32
32
|
}
|
|
33
|
+
get _state() {
|
|
34
|
+
return this._stateConsumer.value;
|
|
35
|
+
}
|
|
33
36
|
get _acceptedTypes() {
|
|
34
37
|
return this._state.acceptedFileTypes;
|
|
35
38
|
}
|
|
@@ -47,11 +50,24 @@ export default class IgcChatInputComponent extends LitElement {
|
|
|
47
50
|
this._userIsTyping = false;
|
|
48
51
|
this._userLastTypeTime = Date.now();
|
|
49
52
|
this._typingTimeout = 0;
|
|
53
|
+
this._adoptedStyles = addAdoptedStylesController(this);
|
|
54
|
+
this._stateChanged = () => {
|
|
55
|
+
this._adoptedStyles.shouldAdoptStyles(!!this._state.options?.adoptRootStyles &&
|
|
56
|
+
!this._adoptedStyles.hasAdoptedStyles);
|
|
57
|
+
};
|
|
58
|
+
this._stateConsumer = new ContextConsumer(this, {
|
|
59
|
+
context: chatContext,
|
|
60
|
+
callback: this._stateChanged,
|
|
61
|
+
subscribe: true,
|
|
62
|
+
});
|
|
50
63
|
this._parts = { 'input-container': true, dragging: false };
|
|
51
|
-
addThemingController(this, all);
|
|
64
|
+
addThemingController(this, all, { themeChange: this._adoptPageStyles });
|
|
52
65
|
}
|
|
53
66
|
focusInput() {
|
|
54
|
-
this._textInputElement
|
|
67
|
+
this._textInputElement?.focus();
|
|
68
|
+
}
|
|
69
|
+
_adoptPageStyles() {
|
|
70
|
+
this._adoptedStyles.shouldAdoptStyles(this._adoptedStyles.hasAdoptedStyles);
|
|
55
71
|
}
|
|
56
72
|
_getRenderer(name) {
|
|
57
73
|
return this._state.options?.renderers
|
|
@@ -110,7 +126,7 @@ export default class IgcChatInputComponent extends LitElement {
|
|
|
110
126
|
}, delay);
|
|
111
127
|
}
|
|
112
128
|
_handleFileInputClick() {
|
|
113
|
-
this._fileInput
|
|
129
|
+
this._fileInput?.showPicker();
|
|
114
130
|
}
|
|
115
131
|
_handleFocusState(event) {
|
|
116
132
|
this._state.emitEvent(event.type === 'focus' ? 'igcInputFocus' : 'igcInputBlur');
|
|
@@ -279,9 +295,6 @@ export default class IgcChatInputComponent extends LitElement {
|
|
|
279
295
|
`;
|
|
280
296
|
}
|
|
281
297
|
}
|
|
282
|
-
__decorate([
|
|
283
|
-
consume({ context: chatContext, subscribe: true })
|
|
284
|
-
], IgcChatInputComponent.prototype, "_state", void 0);
|
|
285
298
|
__decorate([
|
|
286
299
|
consume({ context: chatUserInputContext, subscribe: true })
|
|
287
300
|
], IgcChatInputComponent.prototype, "_userInputState", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-input.js","sourceRoot":"","sources":["../../../src/components/chat/chat-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { query, state } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport { chatContext, chatUserInputContext } from '../common/context.js';\nimport { enterKey, tabKey } from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, hasFiles, isEmpty, trimmedHtml } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcTextareaComponent from '../textarea/textarea.js';\nimport type { ChatState } from './chat-state.js';\nimport { styles } from './themes/input.base.css.js';\nimport { all } from './themes/input.js';\nimport { styles as shared } from './themes/shared/input/input.common.css.js';\nimport type {\n ChatInputRenderContext,\n ChatRenderContext,\n ChatTemplateRenderer,\n IgcChatMessageAttachment,\n} from './types.js';\nimport { getChatAcceptedFiles, getIconName } from './utils.js';\n\ntype DefaultInputRenderers = {\n input: ChatTemplateRenderer<ChatInputRenderContext>;\n inputActions: ChatTemplateRenderer<ChatRenderContext>;\n inputActionsEnd: ChatTemplateRenderer<ChatRenderContext>;\n inputActionsStart: ChatTemplateRenderer<ChatRenderContext>;\n inputAttachments: ChatTemplateRenderer<ChatInputRenderContext>;\n fileUploadButton: ChatTemplateRenderer<ChatRenderContext>;\n sendButton: ChatTemplateRenderer<ChatRenderContext>;\n};\n\n/* blazorSuppress */\n/**\n * A web component that provides the input area for the `igc-chat` interface.\n *\n * It supports:\n * - Text input with automatic resizing\n * - Sending messages on Enter key (with Shift+Enter for newlines)\n * - File attachments via file picker or drag-and-drop\n * - Customizable templates for send button, attachments, and text input\n * - Emits various chat-related events (typing, input focus/blur, attachment drop, etc.)\n *\n * @element igc-chat-input\n *\n * @slot - Default unnamed slot for rendering inside the component\n * @fires igcTypingChange - Fired when the user starts/stops typing\n * @fires igcInputFocus - Fired when the input area receives focus\n * @fires igcInputBlur - Fired when the input area loses focus\n * @fires igcAttachmentDrag - Fired when dragging a file over the input\n * @fires igcAttachmentDrop - Fired when a file is dropped into the input\n * @fires igcChange - Fired when file input changes (delegated from `<igc-file-input>`)\n *\n * @csspart input-container - Container for the input section\n * @csspart input-wrapper - Wrapper around the text input\n * @csspart text-input - The `<igc-textarea>` component\n * @csspart actions-container - Container for file upload/send buttons\n * @csspart send-button - The send icon button\n * @csspart attachments - Container for rendering attachments\n * @csspart attachment-wrapper - Wrapper for individual attachment\n * @csspart attachment-name - Display name of an attachment\n */\nexport default class IgcChatInputComponent extends LitElement {\n public static readonly tagName = 'igc-chat-input';\n public static override styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(\n IgcChatInputComponent,\n IgcTextareaComponent,\n IgcIconButtonComponent,\n IgcChipComponent,\n IgcIconComponent\n );\n }\n\n private readonly _defaults: Readonly<DefaultInputRenderers> = Object.freeze({\n fileUploadButton: () => this._renderFileUploadButton(),\n input: () => this._renderTextArea(),\n inputActions: () => this._renderActionsArea(),\n inputActionsEnd: () => nothing,\n inputActionsStart: () => nothing,\n inputAttachments: (ctx) => this._renderAttachmentsArea(ctx.attachments),\n sendButton: () => this._renderSendButton(),\n });\n\n private _userIsTyping = false;\n private _userLastTypeTime = Date.now();\n private _typingTimeout = 0;\n\n @consume({ context: chatContext, subscribe: true })\n private readonly _state!: ChatState;\n\n @consume({ context: chatUserInputContext, subscribe: true })\n private readonly _userInputState!: ChatState;\n\n @query(IgcTextareaComponent.tagName)\n private readonly _textInputElement!: IgcTextareaComponent;\n\n @query('#input_attachments')\n protected readonly _fileInput!: HTMLInputElement;\n\n @state()\n private _parts = { 'input-container': true, dragging: false };\n\n private get _acceptedTypes() {\n return this._state.acceptedFileTypes;\n }\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n /** @internal */\n public focusInput(): void {\n this._textInputElement.focus();\n }\n\n private _getRenderer<U extends keyof DefaultInputRenderers>(\n name: U\n ): DefaultInputRenderers[U] {\n return this._state.options?.renderers\n ? ((this._state.options.renderers[name] ??\n this._defaults[name]) as DefaultInputRenderers[U])\n : this._defaults[name];\n }\n\n private async _sendMessage(): Promise<void> {\n if (\n !this._userInputState.hasInputValue &&\n !this._userInputState.hasInputAttachments\n ) {\n return;\n }\n\n this._userInputState.addMessageWithEvent({\n text: this._userInputState.inputValue,\n attachments: this._userInputState.inputAttachments,\n });\n\n this.style.height = 'auto';\n\n await this._userInputState.host.updateComplete;\n this.focusInput();\n }\n\n private _setTypingStateAndEmit(state: boolean): void {\n this._userIsTyping = state;\n this._userInputState.emitUserTypingState(state);\n }\n\n private _handleAttachmentRemoved(attachment: IgcChatMessageAttachment): void {\n const current = this._userInputState.inputAttachments;\n\n if (this._state.emitAttachmentRemoved(attachment)) {\n this._state.inputAttachments = current.toSpliced(\n current.indexOf(attachment),\n 1\n );\n }\n }\n\n private _handleKeydown(event: KeyboardEvent): void {\n this._userLastTypeTime = Date.now();\n const isEnterKey = event.key.toLowerCase() === enterKey.toLowerCase();\n const isTab = event.key.toLocaleLowerCase() === tabKey.toLowerCase();\n\n if (isTab && !this._userIsTyping) {\n return;\n }\n\n if (isEnterKey && !event.shiftKey) {\n event.preventDefault();\n this._sendMessage();\n\n if (this._userIsTyping) {\n clearTimeout(this._typingTimeout);\n this._setTypingStateAndEmit(false);\n }\n\n return;\n }\n\n clearTimeout(this._typingTimeout);\n const delay = this._state.stopTypingDelay;\n\n if (!this._userIsTyping) {\n this._setTypingStateAndEmit(true);\n }\n\n this._typingTimeout = setTimeout(() => {\n if (this._userIsTyping && this._userLastTypeTime + delay <= Date.now()) {\n this._setTypingStateAndEmit(false);\n }\n }, delay);\n }\n\n private _handleFileInputClick(): void {\n this._fileInput.showPicker();\n }\n\n private _handleFocusState(event: FocusEvent): void {\n this._state.emitEvent(\n event.type === 'focus' ? 'igcInputFocus' : 'igcInputBlur'\n );\n }\n\n private _handleDragEnter(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);\n this._parts = { 'input-container': true, dragging: !isEmpty(validFiles) };\n this._state.emitEvent('igcAttachmentDrag');\n }\n\n private _handleDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n }\n\n private _handleDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n // Check if we're actually leaving the container\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n const x = event.clientX;\n const y = event.clientY;\n\n if (\n x <= rect.left ||\n x >= rect.right ||\n y <= rect.top ||\n y >= rect.bottom\n ) {\n this._parts = { 'input-container': true, dragging: false };\n }\n }\n\n private _handleDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this._parts = { 'input-container': true, dragging: false };\n\n const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);\n this._state.emitEvent('igcAttachmentDrop');\n this._state.attachFilesWithEvent(validFiles);\n this.requestUpdate();\n }\n\n private _handleInput({ detail }: CustomEvent<string>): void {\n this._state.inputValue = detail;\n this._state.emitEvent('igcInputChange', { detail: { value: detail } });\n }\n\n private _handleFileUpload(event: Event): void {\n const input = event.target as HTMLInputElement;\n\n if (hasFiles(input)) {\n this._state.attachFilesWithEvent(Array.from(input.files!));\n }\n }\n\n /**\n * Default attachments area template used when no custom template is provided.\n * Renders the list of input attachments as chips.\n * @returns TemplateResult containing the attachments area\n */\n private _renderAttachmentsArea(attachments: IgcChatMessageAttachment[]) {\n return html`${attachments?.map(\n (attachment) => html`\n <div part=\"attachment-wrapper\" role=\"listitem\">\n <igc-chip\n removable\n @igcRemove=${() => this._handleAttachmentRemoved(attachment)}\n >\n <igc-icon\n part=\"attachment-icon\"\n slot=\"prefix\"\n name=${getIconName(attachment.file?.type ?? attachment.type)}\n ></igc-icon>\n <span part=\"attachment-name\">${attachment.name}</span>\n </igc-chip>\n </div>\n `\n )} `;\n }\n\n /**\n * Default text area template used when no custom template is provided.\n * Renders a text area for user input.\n * @returns TemplateResult containing the text area\n */\n private _renderTextArea() {\n return html`\n <igc-textarea\n part=\"text-input\"\n aria-label=\"Chat text input\"\n placeholder=${ifDefined(this._state.options?.inputPlaceholder)}\n resize=\"auto\"\n rows=\"1\"\n .value=${this._userInputState?.inputValue}\n @igcInput=${this._handleInput}\n @keydown=${this._handleKeydown}\n @focus=${this._handleFocusState}\n @blur=${this._handleFocusState}\n ></igc-textarea>\n `;\n }\n\n private _renderFileUploadButton() {\n const accepted = this._state.options?.acceptedFiles;\n const attachmentsDisabled = this._state.options?.disableInputAttachments;\n\n return html`${cache(\n attachmentsDisabled\n ? nothing\n : html`\n <label for=\"input_attachments\" part=\"file-upload\">\n <igc-icon-button\n aria-label=\"Attach files\"\n variant=\"flat\"\n name=\"attach_file\"\n @click=${this._handleFileInputClick}\n ></igc-icon-button>\n <input\n type=\"file\"\n id=\"input_attachments\"\n tabindex=\"-1\"\n name=\"input_attachments\"\n aria-label=\"Upload button\"\n multiple\n accept=${bindIf(accepted, accepted)}\n @change=${this._handleFileUpload}\n />\n </label>\n `\n )}`;\n }\n\n private _renderSendButton() {\n const enabled =\n this._state.hasInputValue || this._state.hasInputAttachments;\n\n return html`\n <igc-icon-button\n aria-label=\"Send message\"\n name=\"send_message\"\n variant=\"contained\"\n part=\"send-button\"\n ?disabled=${!enabled}\n @click=${this._sendMessage}\n ></igc-icon-button>\n `;\n }\n\n private _renderActionsArea() {\n const ctx: ChatRenderContext = { instance: this._state.host };\n\n return trimmedHtml`\n <div part=\"file-upload-container\">\n ${this._getRenderer('fileUploadButton')(ctx)}\n </div>\n <div part=\"input-actions-start\">\n ${this._getRenderer('inputActionsStart')(ctx)}\n </div>\n <div part=\"send-button-container\">${this._getRenderer('sendButton')(ctx)}</div>\n <div part=\"input-actions-end\">\n ${this._getRenderer('inputActionsEnd')(ctx)}\n </div>\n `;\n }\n\n protected override render() {\n const ctx: ChatRenderContext = { instance: this._state.host };\n\n const inputCtx: ChatInputRenderContext = {\n ...ctx,\n attachments: this._state.inputAttachments,\n value: this._state.inputValue,\n };\n\n return html`\n <div\n part=${partMap(this._parts)}\n @dragenter=${this._handleDragEnter}\n @dragover=${this._handleDragOver}\n @dragleave=${this._handleDragLeave}\n @drop=${this._handleDrop}\n >\n ${this._state.hasInputAttachments\n ? html`\n <div part=\"attachments\" role=\"list\" aria-label=\"Attachments\">\n ${until(this._getRenderer('inputAttachments')(inputCtx))}\n </div>\n `\n : nothing}\n\n <div part=\"input-wrapper\">\n ${until(this._getRenderer('input')(inputCtx))}\n </div>\n\n <div part=\"actions-container\">\n ${until(this._getRenderer('inputActions')(ctx))}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-chat-input': IgcChatInputComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"chat-input.js","sourceRoot":"","sources":["../../../src/components/chat/chat-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextConsumer, consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { query, state } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport { chatContext, chatUserInputContext } from '../common/context.js';\nimport { enterKey, tabKey } from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, hasFiles, isEmpty, trimmedHtml } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcTextareaComponent from '../textarea/textarea.js';\nimport type { ChatState } from './chat-state.js';\nimport { styles } from './themes/input.base.css.js';\nimport { all } from './themes/input.js';\nimport { styles as shared } from './themes/shared/input/input.common.css.js';\nimport type {\n ChatInputRenderContext,\n ChatRenderContext,\n ChatTemplateRenderer,\n IgcChatMessageAttachment,\n} from './types.js';\nimport {\n addAdoptedStylesController,\n type ChatAcceptedFileTypes,\n getChatAcceptedFiles,\n getIconName,\n} from './utils.js';\n\ntype DefaultInputRenderers = {\n input: ChatTemplateRenderer<ChatInputRenderContext>;\n inputActions: ChatTemplateRenderer<ChatRenderContext>;\n inputActionsEnd: ChatTemplateRenderer<ChatRenderContext>;\n inputActionsStart: ChatTemplateRenderer<ChatRenderContext>;\n inputAttachments: ChatTemplateRenderer<ChatInputRenderContext>;\n fileUploadButton: ChatTemplateRenderer<ChatRenderContext>;\n sendButton: ChatTemplateRenderer<ChatRenderContext>;\n};\n\n/* blazorSuppress */\n/**\n * A web component that provides the input area for the `igc-chat` interface.\n *\n * It supports:\n * - Text input with automatic resizing\n * - Sending messages on Enter key (with Shift+Enter for newlines)\n * - File attachments via file picker or drag-and-drop\n * - Customizable templates for send button, attachments, and text input\n * - Emits various chat-related events (typing, input focus/blur, attachment drop, etc.)\n *\n * @element igc-chat-input\n *\n * @slot - Default unnamed slot for rendering inside the component\n * @fires igcTypingChange - Fired when the user starts/stops typing\n * @fires igcInputFocus - Fired when the input area receives focus\n * @fires igcInputBlur - Fired when the input area loses focus\n * @fires igcAttachmentDrag - Fired when dragging a file over the input\n * @fires igcAttachmentDrop - Fired when a file is dropped into the input\n * @fires igcChange - Fired when file input changes (delegated from `<igc-file-input>`)\n *\n * @csspart input-container - Container for the input section\n * @csspart input-wrapper - Wrapper around the text input\n * @csspart text-input - The `<igc-textarea>` component\n * @csspart actions-container - Container for file upload/send buttons\n * @csspart send-button - The send icon button\n * @csspart attachments - Container for rendering attachments\n * @csspart attachment-wrapper - Wrapper for individual attachment\n * @csspart attachment-name - Display name of an attachment\n */\nexport default class IgcChatInputComponent extends LitElement {\n public static readonly tagName = 'igc-chat-input';\n public static override styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(\n IgcChatInputComponent,\n IgcTextareaComponent,\n IgcIconButtonComponent,\n IgcChipComponent,\n IgcIconComponent\n );\n }\n\n private readonly _defaults: Readonly<DefaultInputRenderers> = Object.freeze({\n fileUploadButton: () => this._renderFileUploadButton(),\n input: () => this._renderTextArea(),\n inputActions: () => this._renderActionsArea(),\n inputActionsEnd: () => nothing,\n inputActionsStart: () => nothing,\n inputAttachments: (ctx) => this._renderAttachmentsArea(ctx.attachments),\n sendButton: () => this._renderSendButton(),\n });\n\n private _userIsTyping = false;\n private _userLastTypeTime = Date.now();\n private _typingTimeout = 0;\n\n private readonly _adoptedStyles = addAdoptedStylesController(this);\n\n private readonly _stateChanged = () => {\n this._adoptedStyles.shouldAdoptStyles(\n !!this._state.options?.adoptRootStyles &&\n !this._adoptedStyles.hasAdoptedStyles\n );\n };\n\n private readonly _stateConsumer = new ContextConsumer(this, {\n context: chatContext,\n callback: this._stateChanged,\n subscribe: true,\n });\n\n @consume({ context: chatUserInputContext, subscribe: true })\n private readonly _userInputState!: ChatState;\n\n @query(IgcTextareaComponent.tagName)\n private readonly _textInputElement?: IgcTextareaComponent;\n\n @query('#input_attachments')\n protected readonly _fileInput?: HTMLInputElement;\n\n @state()\n private _parts = { 'input-container': true, dragging: false };\n\n private get _state(): ChatState {\n return this._stateConsumer.value!;\n }\n\n private get _acceptedTypes(): ChatAcceptedFileTypes | null {\n return this._state.acceptedFileTypes;\n }\n\n constructor() {\n super();\n addThemingController(this, all, { themeChange: this._adoptPageStyles });\n }\n\n /** @internal */\n public focusInput(): void {\n this._textInputElement?.focus();\n }\n\n private _adoptPageStyles(): void {\n this._adoptedStyles.shouldAdoptStyles(this._adoptedStyles.hasAdoptedStyles);\n }\n\n private _getRenderer<U extends keyof DefaultInputRenderers>(\n name: U\n ): DefaultInputRenderers[U] {\n return this._state.options?.renderers\n ? ((this._state.options.renderers[name] ??\n this._defaults[name]) as DefaultInputRenderers[U])\n : this._defaults[name];\n }\n\n private async _sendMessage(): Promise<void> {\n if (\n !this._userInputState.hasInputValue &&\n !this._userInputState.hasInputAttachments\n ) {\n return;\n }\n\n this._userInputState.addMessageWithEvent({\n text: this._userInputState.inputValue,\n attachments: this._userInputState.inputAttachments,\n });\n\n this.style.height = 'auto';\n\n await this._userInputState.host.updateComplete;\n this.focusInput();\n }\n\n private _setTypingStateAndEmit(state: boolean): void {\n this._userIsTyping = state;\n this._userInputState.emitUserTypingState(state);\n }\n\n private _handleAttachmentRemoved(attachment: IgcChatMessageAttachment): void {\n const current = this._userInputState.inputAttachments;\n\n if (this._state.emitAttachmentRemoved(attachment)) {\n this._state.inputAttachments = current.toSpliced(\n current.indexOf(attachment),\n 1\n );\n }\n }\n\n private _handleKeydown(event: KeyboardEvent): void {\n this._userLastTypeTime = Date.now();\n const isEnterKey = event.key.toLowerCase() === enterKey.toLowerCase();\n const isTab = event.key.toLocaleLowerCase() === tabKey.toLowerCase();\n\n if (isTab && !this._userIsTyping) {\n return;\n }\n\n if (isEnterKey && !event.shiftKey) {\n event.preventDefault();\n this._sendMessage();\n\n if (this._userIsTyping) {\n clearTimeout(this._typingTimeout);\n this._setTypingStateAndEmit(false);\n }\n\n return;\n }\n\n clearTimeout(this._typingTimeout);\n const delay = this._state.stopTypingDelay;\n\n if (!this._userIsTyping) {\n this._setTypingStateAndEmit(true);\n }\n\n this._typingTimeout = setTimeout(() => {\n if (this._userIsTyping && this._userLastTypeTime + delay <= Date.now()) {\n this._setTypingStateAndEmit(false);\n }\n }, delay);\n }\n\n private _handleFileInputClick(): void {\n this._fileInput?.showPicker();\n }\n\n private _handleFocusState(event: FocusEvent): void {\n this._state.emitEvent(\n event.type === 'focus' ? 'igcInputFocus' : 'igcInputBlur'\n );\n }\n\n private _handleDragEnter(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);\n this._parts = { 'input-container': true, dragging: !isEmpty(validFiles) };\n this._state.emitEvent('igcAttachmentDrag');\n }\n\n private _handleDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n }\n\n private _handleDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n // Check if we're actually leaving the container\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n const x = event.clientX;\n const y = event.clientY;\n\n if (\n x <= rect.left ||\n x >= rect.right ||\n y <= rect.top ||\n y >= rect.bottom\n ) {\n this._parts = { 'input-container': true, dragging: false };\n }\n }\n\n private _handleDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this._parts = { 'input-container': true, dragging: false };\n\n const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);\n this._state.emitEvent('igcAttachmentDrop');\n this._state.attachFilesWithEvent(validFiles);\n this.requestUpdate();\n }\n\n private _handleInput({ detail }: CustomEvent<string>): void {\n this._state.inputValue = detail;\n this._state.emitEvent('igcInputChange', { detail: { value: detail } });\n }\n\n private _handleFileUpload(event: Event): void {\n const input = event.target as HTMLInputElement;\n\n if (hasFiles(input)) {\n this._state.attachFilesWithEvent(Array.from(input.files!));\n }\n }\n\n /**\n * Default attachments area template used when no custom template is provided.\n * Renders the list of input attachments as chips.\n * @returns TemplateResult containing the attachments area\n */\n private _renderAttachmentsArea(attachments: IgcChatMessageAttachment[]) {\n return html`${attachments?.map(\n (attachment) => html`\n <div part=\"attachment-wrapper\" role=\"listitem\">\n <igc-chip\n removable\n @igcRemove=${() => this._handleAttachmentRemoved(attachment)}\n >\n <igc-icon\n part=\"attachment-icon\"\n slot=\"prefix\"\n name=${getIconName(attachment.file?.type ?? attachment.type)}\n ></igc-icon>\n <span part=\"attachment-name\">${attachment.name}</span>\n </igc-chip>\n </div>\n `\n )} `;\n }\n\n /**\n * Default text area template used when no custom template is provided.\n * Renders a text area for user input.\n * @returns TemplateResult containing the text area\n */\n private _renderTextArea() {\n return html`\n <igc-textarea\n part=\"text-input\"\n aria-label=\"Chat text input\"\n placeholder=${ifDefined(this._state.options?.inputPlaceholder)}\n resize=\"auto\"\n rows=\"1\"\n .value=${this._userInputState?.inputValue}\n @igcInput=${this._handleInput}\n @keydown=${this._handleKeydown}\n @focus=${this._handleFocusState}\n @blur=${this._handleFocusState}\n ></igc-textarea>\n `;\n }\n\n private _renderFileUploadButton() {\n const accepted = this._state.options?.acceptedFiles;\n const attachmentsDisabled = this._state.options?.disableInputAttachments;\n\n return html`${cache(\n attachmentsDisabled\n ? nothing\n : html`\n <label for=\"input_attachments\" part=\"file-upload\">\n <igc-icon-button\n aria-label=\"Attach files\"\n variant=\"flat\"\n name=\"attach_file\"\n @click=${this._handleFileInputClick}\n ></igc-icon-button>\n <input\n type=\"file\"\n id=\"input_attachments\"\n tabindex=\"-1\"\n name=\"input_attachments\"\n aria-label=\"Upload button\"\n multiple\n accept=${bindIf(accepted, accepted)}\n @change=${this._handleFileUpload}\n />\n </label>\n `\n )}`;\n }\n\n private _renderSendButton() {\n const enabled =\n this._state.hasInputValue || this._state.hasInputAttachments;\n\n return html`\n <igc-icon-button\n aria-label=\"Send message\"\n name=\"send_message\"\n variant=\"contained\"\n part=\"send-button\"\n ?disabled=${!enabled}\n @click=${this._sendMessage}\n ></igc-icon-button>\n `;\n }\n\n private _renderActionsArea() {\n const ctx: ChatRenderContext = { instance: this._state.host };\n\n return trimmedHtml`\n <div part=\"file-upload-container\">\n ${this._getRenderer('fileUploadButton')(ctx)}\n </div>\n <div part=\"input-actions-start\">\n ${this._getRenderer('inputActionsStart')(ctx)}\n </div>\n <div part=\"send-button-container\">${this._getRenderer('sendButton')(ctx)}</div>\n <div part=\"input-actions-end\">\n ${this._getRenderer('inputActionsEnd')(ctx)}\n </div>\n `;\n }\n\n protected override render() {\n const ctx: ChatRenderContext = { instance: this._state.host };\n\n const inputCtx: ChatInputRenderContext = {\n ...ctx,\n attachments: this._state.inputAttachments,\n value: this._state.inputValue,\n };\n\n return html`\n <div\n part=${partMap(this._parts)}\n @dragenter=${this._handleDragEnter}\n @dragover=${this._handleDragOver}\n @dragleave=${this._handleDragLeave}\n @drop=${this._handleDrop}\n >\n ${this._state.hasInputAttachments\n ? html`\n <div part=\"attachments\" role=\"list\" aria-label=\"Attachments\">\n ${until(this._getRenderer('inputAttachments')(inputCtx))}\n </div>\n `\n : nothing}\n\n <div part=\"input-wrapper\">\n ${until(this._getRenderer('input')(inputCtx))}\n </div>\n\n <div part=\"actions-container\">\n ${until(this._getRenderer('inputActions')(ctx))}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-chat-input': IgcChatInputComponent;\n }\n}\n"]}
|
|
@@ -21,14 +21,17 @@ export default class IgcChatMessageComponent extends LitElement {
|
|
|
21
21
|
static readonly tagName = "igc-chat-message";
|
|
22
22
|
static styles: import("lit").CSSResult[];
|
|
23
23
|
static register(): void;
|
|
24
|
+
private readonly _adoptedStyles;
|
|
24
25
|
private readonly _defaults;
|
|
25
|
-
private readonly
|
|
26
|
+
private readonly _stateChanged;
|
|
27
|
+
private readonly _stateConsumer;
|
|
28
|
+
private get _state();
|
|
26
29
|
/**
|
|
27
30
|
* The chat message to render.
|
|
28
31
|
*/
|
|
29
32
|
message: IgcChatMessage;
|
|
30
33
|
constructor();
|
|
31
|
-
|
|
34
|
+
private _adoptPageStyles;
|
|
32
35
|
private _getRenderer;
|
|
33
36
|
private _handleCopy;
|
|
34
37
|
private _handleMessageActionClick;
|
|
@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
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;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import {
|
|
7
|
+
import { ContextConsumer } from '@lit/context';
|
|
8
8
|
import { html, LitElement, nothing } from 'lit';
|
|
9
9
|
import { property } from 'lit/decorators.js';
|
|
10
10
|
import { cache } from 'lit/directives/cache.js';
|
|
@@ -19,7 +19,7 @@ import IgcMessageAttachmentsComponent from './message-attachments.js';
|
|
|
19
19
|
import { styles } from './themes/message.base.css.js';
|
|
20
20
|
import { all } from './themes/message.js';
|
|
21
21
|
import { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';
|
|
22
|
-
import {
|
|
22
|
+
import { addAdoptedStylesController } from './utils.js';
|
|
23
23
|
const LIKE_INACTIVE = 'thumb_up_inactive';
|
|
24
24
|
const LIKE_ACTIVE = 'thumb_up_active';
|
|
25
25
|
const DISLIKE_INACTIVE = 'thumb_down_inactive';
|
|
@@ -32,20 +32,31 @@ export default class IgcChatMessageComponent extends LitElement {
|
|
|
32
32
|
static register() {
|
|
33
33
|
registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcIconButtonComponent);
|
|
34
34
|
}
|
|
35
|
+
get _state() {
|
|
36
|
+
return this._stateConsumer.value;
|
|
37
|
+
}
|
|
35
38
|
constructor() {
|
|
36
39
|
super();
|
|
40
|
+
this._adoptedStyles = addAdoptedStylesController(this);
|
|
37
41
|
this._defaults = Object.freeze({
|
|
38
42
|
messageHeader: () => this._renderHeader(),
|
|
39
43
|
messageContent: () => this._renderContent(),
|
|
40
44
|
messageAttachments: () => this._renderAttachments(),
|
|
41
45
|
messageActions: () => this._renderActions(),
|
|
42
46
|
});
|
|
43
|
-
|
|
47
|
+
this._stateChanged = () => {
|
|
48
|
+
this._adoptedStyles.shouldAdoptStyles(!!this._state.options?.adoptRootStyles &&
|
|
49
|
+
!this._adoptedStyles.hasAdoptedStyles);
|
|
50
|
+
};
|
|
51
|
+
this._stateConsumer = new ContextConsumer(this, {
|
|
52
|
+
context: chatContext,
|
|
53
|
+
callback: this._stateChanged,
|
|
54
|
+
subscribe: true,
|
|
55
|
+
});
|
|
56
|
+
addThemingController(this, all, { themeChange: this._adoptPageStyles });
|
|
44
57
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
chatMessageAdoptPageStyles(this);
|
|
48
|
-
}
|
|
58
|
+
_adoptPageStyles() {
|
|
59
|
+
this._adoptedStyles.shouldAdoptStyles(this._adoptedStyles.hasAdoptedStyles);
|
|
49
60
|
}
|
|
50
61
|
_getRenderer(name) {
|
|
51
62
|
return this._state.options?.renderers
|
|
@@ -203,9 +214,6 @@ export default class IgcChatMessageComponent extends LitElement {
|
|
|
203
214
|
`;
|
|
204
215
|
}
|
|
205
216
|
}
|
|
206
|
-
__decorate([
|
|
207
|
-
consume({ context: chatContext, subscribe: true })
|
|
208
|
-
], IgcChatMessageComponent.prototype, "_state", void 0);
|
|
209
217
|
__decorate([
|
|
210
218
|
property({ attribute: false })
|
|
211
219
|
], IgcChatMessageComponent.prototype, "message", void 0);
|