igniteui-webcomponents 6.3.0-alpha.1 → 6.3.0-beta.0

package/components/card/themes/shared/header/card.header.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host ::slotted(igc-avatar){--ig-size: 3}:host [part=header]{gap:.125rem}::slotted([slot=subtitle]){font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block-end:.125rem}::slotted([slot=thumbnail]){margin-inline-end:.5rem}`;
+export const styles = css `:host ::slotted(igc-avatar){--ig-size: 3}:host [part=header]{gap:.125rem}::slotted([slot=subtitle]){font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block-end:max(var(--is-large, 1)*max(0.125rem, -1 * 0.125rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.125rem, -1 * 0.125rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.125rem, -1 * 0.125rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}::slotted([slot=thumbnail]){margin-inline-end: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.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}`;
 //# sourceMappingURL=card.header.indigo.css.js.map

package/components/card/themes/shared/header/card.header.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.header.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/shared/header/card.header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mkBAAmkB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host ::slotted(igc-avatar){--ig-size: 3}:host [part=header]{gap:.125rem}::slotted([slot=subtitle]){font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block-end:.125rem}::slotted([slot=thumbnail]){margin-inline-end:.5rem}`;\n"]}
+{"version":3,"file":"card.header.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/shared/header/card.header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,yxCAAyxC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host ::slotted(igc-avatar){--ig-size: 3}:host [part=header]{gap:.125rem}::slotted([slot=subtitle]){font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block-end:max(var(--is-large, 1)*max(0.125rem, -1 * 0.125rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.125rem, -1 * 0.125rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.125rem, -1 * 0.125rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}::slotted([slot=thumbnail]){margin-inline-end: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.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}`;\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:block;width:100%;height:100%;position:relative}:host section{display:block;position:relative;width:100%;height:inherit;overflow:hidden;outline-style:none;min-height:15rem;min-width:18.75rem}[part~=indicators]{position:absolute;display:flex;justify-content:center;align-items:center;margin:1rem 0;list-style:none;z-index:10;gap:.5rem;padding:.25rem .375rem}[part="label indicators"],[part="label indicators start"]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:1rem 0;min-width:2.875rem}[part~=dot]{position:relative;width:.75rem;height:.75rem;text-indent:-624.9375rem;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * 50%),50%);transition:all .05s ease-out;padding:0;background:initial;cursor:pointer}[part~=dot]::after{content:"";position:absolute;border-radius:inherit;inset:.0625rem}[part~=navigation]{position:absolute;z-index:3;transition:all .15s ease-in}[part~=navigation] igc-icon{--ig-size: 1}igc-button::part(base){width:2.875rem;height:2.875rem;min-width:initial}:host(:not([vertical])),:host([dir=rtl][vertical]){--dir: calc(var(--ig-dir, 1) * 1)}:host([vertical]),:host([dir=rtl]:not([vertical])){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([vertical])) [part~=navigation]{inset-block-start:50%;transform:translateY(-50%)}:host(:not([vertical])) [part="navigation previous"]{inset-inline-start:0;margin-inline-start:1rem}:host(:not([vertical])) [part="navigation next"]{inset-inline-end:0;margin-inline-end:1rem}:host(:not([vertical])) [part="navigation next"],:host(:not([vertical])) [part="navigation previous"]{transform:scaleX(var(--dir)) translateY(-50%)}:host(:not([vertical])) [part~=indicators]{inset-inline-start:50%;inset-block-end:0;transform:translateX(calc(-50% * var(--dir)))}:host(:not([vertical])) [part="indicators start"],:host(:not([vertical])) [part="label indicators start"]{inset-block-end:unset;inset-block-start:0}:host([vertical]) [part~=navigation]{inset-inline-end:0;margin-inline-end:1rem}:host([vertical]) [part~=navigation] igc-icon{transform:rotate(90deg)}:host([vertical]) [part="navigation previous"]{inset-block-start:0;margin-block-start:1rem}:host([vertical]) [part="navigation next"]{inset-block-end:0;margin-block-end:1rem}:host([vertical]) [part~=indicators]{inset-inline-end:0;flex-direction:column;inset-block-start:50%;transform:translateY(-50%);margin-block:0;margin-inline-end:1.8125rem;padding:.375rem .25rem}:host([vertical]) [part="label indicators"]{margin-inline-end:1rem}:host([vertical]) [part="indicators start"],:host([vertical]) [part="label indicators start"]{inset-inline-end:unset;inset-inline-start:0;margin-inline-start:1rem;margin-inline-end:unset}:host([vertical]) [part="label indicators"],:host([vertical]) [part="label indicators start"]{padding:.25rem .375rem}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:block;width:100%;height:100%;position:relative}:host section{display:block;position:relative;width:100%;height:inherit;overflow:hidden;outline-style:none;min-height:15rem;min-width:18.75rem}[part~=indicators]{position:absolute;display:flex;justify-content:center;align-items:center;margin:1rem 0;list-style:none;z-index:10;gap:.5rem;padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) 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.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part="label indicators"],[part="label indicators start"]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:1rem 0;min-width:2.875rem}[part~=dot]{position:relative;width:.75rem;height:.75rem;text-indent:-624.9375rem;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * 50%),50%);transition:all .05s ease-out;padding:0;background:initial;cursor:pointer}[part~=dot]::after{content:"";position:absolute;border-radius:inherit;inset:.0625rem}[part~=navigation]{position:absolute;z-index:3;transition:all .15s ease-in}[part~=navigation] igc-icon{--ig-size: 1}igc-button::part(base){width:2.875rem;height:2.875rem;min-width:initial}:host(:not([vertical])),:host([dir=rtl][vertical]){--dir: calc(var(--ig-dir, 1) * 1)}:host([vertical]),:host([dir=rtl]:not([vertical])){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([vertical])) [part~=navigation]{inset-block-start:50%;transform:translateY(-50%)}:host(:not([vertical])) [part="navigation previous"]{inset-inline-start:0;margin-inline-start:1rem}:host(:not([vertical])) [part="navigation next"]{inset-inline-end:0;margin-inline-end:1rem}:host(:not([vertical])) [part="navigation next"],:host(:not([vertical])) [part="navigation previous"]{transform:scaleX(var(--dir)) translateY(-50%)}:host(:not([vertical])) [part~=indicators]{inset-inline-start:50%;inset-block-end:0;transform:translateX(calc(-50% * var(--dir)))}:host(:not([vertical])) [part="indicators start"],:host(:not([vertical])) [part="label indicators start"]{inset-block-end:unset;inset-block-start:0}:host([vertical]) [part~=navigation]{inset-inline-end:0;margin-inline-end:1rem}:host([vertical]) [part~=navigation] igc-icon{transform:rotate(90deg)}:host([vertical]) [part="navigation previous"]{inset-block-start:0;margin-block-start:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}:host([vertical]) [part="navigation next"]{inset-block-end:0;margin-block-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}:host([vertical]) [part~=indicators]{inset-inline-end:0;flex-direction:column;inset-block-start:50%;transform:translateY(-50%);margin-block:0;margin-inline-end:1.8125rem;padding:max(var(--is-large, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*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([vertical]) [part="label indicators"]{margin-inline-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([vertical]) [part="indicators start"],:host([vertical]) [part="label indicators start"]{inset-inline-end:unset;inset-inline-start:0;margin-inline-start:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline-end:unset}:host([vertical]) [part="label indicators"],:host([vertical]) [part="label indicators start"]{padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) 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.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}`;
 //# sourceMappingURL=carousel.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.base.css.js","sourceRoot":"","sources":["../../../../src/components/carousel/themes/carousel.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ugIAAugI,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:block;width:100%;height:100%;position:relative}:host section{display:block;position:relative;width:100%;height:inherit;overflow:hidden;outline-style:none;min-height:15rem;min-width:18.75rem}[part~=indicators]{position:absolute;display:flex;justify-content:center;align-items:center;margin:1rem 0;list-style:none;z-index:10;gap:.5rem;padding:.25rem .375rem}[part=\"label indicators\"],[part=\"label indicators start\"]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:1rem 0;min-width:2.875rem}[part~=dot]{position:relative;width:.75rem;height:.75rem;text-indent:-624.9375rem;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * 50%),50%);transition:all .05s ease-out;padding:0;background:initial;cursor:pointer}[part~=dot]::after{content:\"\";position:absolute;border-radius:inherit;inset:.0625rem}[part~=navigation]{position:absolute;z-index:3;transition:all .15s ease-in}[part~=navigation] igc-icon{--ig-size: 1}igc-button::part(base){width:2.875rem;height:2.875rem;min-width:initial}:host(:not([vertical])),:host([dir=rtl][vertical]){--dir: calc(var(--ig-dir, 1) * 1)}:host([vertical]),:host([dir=rtl]:not([vertical])){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([vertical])) [part~=navigation]{inset-block-start:50%;transform:translateY(-50%)}:host(:not([vertical])) [part=\"navigation previous\"]{inset-inline-start:0;margin-inline-start:1rem}:host(:not([vertical])) [part=\"navigation next\"]{inset-inline-end:0;margin-inline-end:1rem}:host(:not([vertical])) [part=\"navigation next\"],:host(:not([vertical])) [part=\"navigation previous\"]{transform:scaleX(var(--dir)) translateY(-50%)}:host(:not([vertical])) [part~=indicators]{inset-inline-start:50%;inset-block-end:0;transform:translateX(calc(-50% * var(--dir)))}:host(:not([vertical])) [part=\"indicators start\"],:host(:not([vertical])) [part=\"label indicators start\"]{inset-block-end:unset;inset-block-start:0}:host([vertical]) [part~=navigation]{inset-inline-end:0;margin-inline-end:1rem}:host([vertical]) [part~=navigation] igc-icon{transform:rotate(90deg)}:host([vertical]) [part=\"navigation previous\"]{inset-block-start:0;margin-block-start:1rem}:host([vertical]) [part=\"navigation next\"]{inset-block-end:0;margin-block-end:1rem}:host([vertical]) [part~=indicators]{inset-inline-end:0;flex-direction:column;inset-block-start:50%;transform:translateY(-50%);margin-block:0;margin-inline-end:1.8125rem;padding:.375rem .25rem}:host([vertical]) [part=\"label indicators\"]{margin-inline-end:1rem}:host([vertical]) [part=\"indicators start\"],:host([vertical]) [part=\"label indicators start\"]{inset-inline-end:unset;inset-inline-start:0;margin-inline-start:1rem;margin-inline-end:unset}:host([vertical]) [part=\"label indicators\"],:host([vertical]) [part=\"label indicators start\"]{padding:.25rem .375rem}`;\n"]}
+{"version":3,"file":"carousel.base.css.js","sourceRoot":"","sources":["../../../../src/components/carousel/themes/carousel.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ogPAAogP,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:block;width:100%;height:100%;position:relative}:host section{display:block;position:relative;width:100%;height:inherit;overflow:hidden;outline-style:none;min-height:15rem;min-width:18.75rem}[part~=indicators]{position:absolute;display:flex;justify-content:center;align-items:center;margin:1rem 0;list-style:none;z-index:10;gap:.5rem;padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) 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.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part=\"label indicators\"],[part=\"label indicators start\"]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:1rem 0;min-width:2.875rem}[part~=dot]{position:relative;width:.75rem;height:.75rem;text-indent:-624.9375rem;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * 50%),50%);transition:all .05s ease-out;padding:0;background:initial;cursor:pointer}[part~=dot]::after{content:\"\";position:absolute;border-radius:inherit;inset:.0625rem}[part~=navigation]{position:absolute;z-index:3;transition:all .15s ease-in}[part~=navigation] igc-icon{--ig-size: 1}igc-button::part(base){width:2.875rem;height:2.875rem;min-width:initial}:host(:not([vertical])),:host([dir=rtl][vertical]){--dir: calc(var(--ig-dir, 1) * 1)}:host([vertical]),:host([dir=rtl]:not([vertical])){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([vertical])) [part~=navigation]{inset-block-start:50%;transform:translateY(-50%)}:host(:not([vertical])) [part=\"navigation previous\"]{inset-inline-start:0;margin-inline-start:1rem}:host(:not([vertical])) [part=\"navigation next\"]{inset-inline-end:0;margin-inline-end:1rem}:host(:not([vertical])) [part=\"navigation next\"],:host(:not([vertical])) [part=\"navigation previous\"]{transform:scaleX(var(--dir)) translateY(-50%)}:host(:not([vertical])) [part~=indicators]{inset-inline-start:50%;inset-block-end:0;transform:translateX(calc(-50% * var(--dir)))}:host(:not([vertical])) [part=\"indicators start\"],:host(:not([vertical])) [part=\"label indicators start\"]{inset-block-end:unset;inset-block-start:0}:host([vertical]) [part~=navigation]{inset-inline-end:0;margin-inline-end:1rem}:host([vertical]) [part~=navigation] igc-icon{transform:rotate(90deg)}:host([vertical]) [part=\"navigation previous\"]{inset-block-start:0;margin-block-start:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}:host([vertical]) [part=\"navigation next\"]{inset-block-end:0;margin-block-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}:host([vertical]) [part~=indicators]{inset-inline-end:0;flex-direction:column;inset-block-start:50%;transform:translateY(-50%);margin-block:0;margin-inline-end:1.8125rem;padding:max(var(--is-large, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*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([vertical]) [part=\"label indicators\"]{margin-inline-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([vertical]) [part=\"indicators start\"],:host([vertical]) [part=\"label indicators start\"]{inset-inline-end:unset;inset-inline-start:0;margin-inline-start:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline-end:unset}:host([vertical]) [part=\"label indicators\"],:host([vertical]) [part=\"label indicators start\"]{padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) 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.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}`;\n"]}

package/components/carousel/themes/shared/carousel.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `igc-button::part(base){width:1.75rem;height:1.75rem;border-width:.125rem;padding:initial}igc-button::part(focused),igc-button::part(focused):hover{box-shadow:0 0 0 .1875rem var(--indicator-focus-color)}[part~=navigation] igc-icon{--ig-size: 2}[part~=indicators]{gap:.25rem;padding:.375rem}[part="label indicators"],[part="label indicators start"]{padding:.25rem .375rem;min-width:1.75rem;border-radius:.125rem}[part~=dot]{width:1rem;height:1rem;border:none;transition:none}[part~=dot]::after{width:.5rem;height:.5rem;inset-block-start:50%;inset-inline-start:50%;transform:translateX(calc(-50% * var(--dir))) translateY(-50%)}[part~=dot]:hover{border:.125rem solid var(--indicator-hover-dot-color)}[part~=dot]:hover::after{background:var(--indicator-hover-dot-color)}[part="dot active"]{border:.125rem solid var(--indicator-active-dot-color);box-shadow:0 0 0 .1875rem var(--dot-shadow-color)}[part="dot active"]::after{background:var(--indicator-active-dot-color)}[part="dot active"]:hover{border-color:var(--indicator-active-hover-dot-color)}[part="dot active"]:hover::after{background:var(--indicator-active-hover-dot-color)}:host([vertical]) [part~=indicators]{padding:.375rem}:host([vertical]) [part="label indicators"],:host([vertical]) [part="label indicators start"]{padding:.25rem .375rem}:host([vertical]) [part~=indicators],:host([vertical]) [part="label indicators"]{margin-inline-end:1rem}:host([vertical]) [part="indicators start"],:host([vertical]) [part="label indicators start"]{margin-inline-start:1rem}:host([vertical]) [part~=dot]::after{transform:translateX(calc(50% * var(--dir))) translateY(-50%)}igc-carousel-indicator{min-width:1rem;min-height:1rem}`;
+export const styles = css `igc-button::part(base){width:1.75rem;height:1.75rem;border-width:.125rem;padding:initial}igc-button::part(focused),igc-button::part(focused):hover{box-shadow:0 0 0 .1875rem var(--indicator-focus-color)}[part~=navigation] igc-icon{--ig-size: 2}[part~=indicators]{gap:.25rem;padding:max(var(--is-large, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}[part="label indicators"],[part="label indicators start"]{padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) 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.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));min-width:1.75rem;border-radius:.125rem}[part~=dot]{width:1rem;height:1rem;border:none;transition:none}[part~=dot]::after{width:.5rem;height:.5rem;inset-block-start:50%;inset-inline-start:50%;transform:translateX(calc(-50% * var(--dir))) translateY(-50%)}[part~=dot]:hover{border:.125rem solid var(--indicator-hover-dot-color)}[part~=dot]:hover::after{background:var(--indicator-hover-dot-color)}[part="dot active"]{border:.125rem solid var(--indicator-active-dot-color);box-shadow:0 0 0 .1875rem var(--dot-shadow-color)}[part="dot active"]::after{background:var(--indicator-active-dot-color)}[part="dot active"]:hover{border-color:var(--indicator-active-hover-dot-color)}[part="dot active"]:hover::after{background:var(--indicator-active-hover-dot-color)}:host([vertical]) [part~=indicators]{padding:max(var(--is-large, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}:host([vertical]) [part="label indicators"],:host([vertical]) [part="label indicators start"]{padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) 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.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([vertical]) [part~=indicators],:host([vertical]) [part="label indicators"]{margin-inline-end:1rem}:host([vertical]) [part="indicators start"],:host([vertical]) [part="label indicators start"]{margin-inline-start:1rem}:host([vertical]) [part~=dot]::after{transform:translateX(calc(50% * var(--dir))) translateY(-50%)}igc-carousel-indicator{min-width:1rem;min-height:1rem}`;
 //# sourceMappingURL=carousel.indigo.css.js.map

package/components/carousel/themes/shared/carousel.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/carousel/themes/shared/carousel.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0oDAA0oD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`igc-button::part(base){width:1.75rem;height:1.75rem;border-width:.125rem;padding:initial}igc-button::part(focused),igc-button::part(focused):hover{box-shadow:0 0 0 .1875rem var(--indicator-focus-color)}[part~=navigation] igc-icon{--ig-size: 2}[part~=indicators]{gap:.25rem;padding:.375rem}[part=\"label indicators\"],[part=\"label indicators start\"]{padding:.25rem .375rem;min-width:1.75rem;border-radius:.125rem}[part~=dot]{width:1rem;height:1rem;border:none;transition:none}[part~=dot]::after{width:.5rem;height:.5rem;inset-block-start:50%;inset-inline-start:50%;transform:translateX(calc(-50% * var(--dir))) translateY(-50%)}[part~=dot]:hover{border:.125rem solid var(--indicator-hover-dot-color)}[part~=dot]:hover::after{background:var(--indicator-hover-dot-color)}[part=\"dot active\"]{border:.125rem solid var(--indicator-active-dot-color);box-shadow:0 0 0 .1875rem var(--dot-shadow-color)}[part=\"dot active\"]::after{background:var(--indicator-active-dot-color)}[part=\"dot active\"]:hover{border-color:var(--indicator-active-hover-dot-color)}[part=\"dot active\"]:hover::after{background:var(--indicator-active-hover-dot-color)}:host([vertical]) [part~=indicators]{padding:.375rem}:host([vertical]) [part=\"label indicators\"],:host([vertical]) [part=\"label indicators start\"]{padding:.25rem .375rem}:host([vertical]) [part~=indicators],:host([vertical]) [part=\"label indicators\"]{margin-inline-end:1rem}:host([vertical]) [part=\"indicators start\"],:host([vertical]) [part=\"label indicators start\"]{margin-inline-start:1rem}:host([vertical]) [part~=dot]::after{transform:translateX(calc(50% * var(--dir))) translateY(-50%)}igc-carousel-indicator{min-width:1rem;min-height:1rem}`;\n"]}
+{"version":3,"file":"carousel.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/carousel/themes/shared/carousel.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,svHAAsvH,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`igc-button::part(base){width:1.75rem;height:1.75rem;border-width:.125rem;padding:initial}igc-button::part(focused),igc-button::part(focused):hover{box-shadow:0 0 0 .1875rem var(--indicator-focus-color)}[part~=navigation] igc-icon{--ig-size: 2}[part~=indicators]{gap:.25rem;padding:max(var(--is-large, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}[part=\"label indicators\"],[part=\"label indicators start\"]{padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) 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.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));min-width:1.75rem;border-radius:.125rem}[part~=dot]{width:1rem;height:1rem;border:none;transition:none}[part~=dot]::after{width:.5rem;height:.5rem;inset-block-start:50%;inset-inline-start:50%;transform:translateX(calc(-50% * var(--dir))) translateY(-50%)}[part~=dot]:hover{border:.125rem solid var(--indicator-hover-dot-color)}[part~=dot]:hover::after{background:var(--indicator-hover-dot-color)}[part=\"dot active\"]{border:.125rem solid var(--indicator-active-dot-color);box-shadow:0 0 0 .1875rem var(--dot-shadow-color)}[part=\"dot active\"]::after{background:var(--indicator-active-dot-color)}[part=\"dot active\"]:hover{border-color:var(--indicator-active-hover-dot-color)}[part=\"dot active\"]:hover::after{background:var(--indicator-active-hover-dot-color)}:host([vertical]) [part~=indicators]{padding:max(var(--is-large, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}:host([vertical]) [part=\"label indicators\"],:host([vertical]) [part=\"label indicators start\"]{padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) 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.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([vertical]) [part~=indicators],:host([vertical]) [part=\"label indicators\"]{margin-inline-end:1rem}:host([vertical]) [part=\"indicators start\"],:host([vertical]) [part=\"label indicators start\"]{margin-inline-start:1rem}:host([vertical]) [part~=dot]::after{transform:translateX(calc(50% * var(--dir))) translateY(-50%)}igc-carousel-indicator{min-width:1rem;min-height:1rem}`;\n"]}

package/components/chat/chat-input.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-import IgcIconButtonComponent from '../button/icon-button.js';
 /**
  * A web component that provides the input area for the `igc-chat` interface.
  *
@@ -32,19 +31,56 @@ import IgcIconButtonComponent from '../button/icon-button.js';
 export default class IgcChatInputComponent extends LitElement {
     static readonly tagName = "igc-chat-input";
     static styles: import("lit").CSSResult[];
-    private _chatState;
     static register(): void;
-    private _textInputElement;
-    protected _inputAttachmentsButton: IgcIconButtonComponent;
-    protected acceptedFilesChange(): void;
-    private containerPart;
+    private readonly _state;
+    private readonly _userInputState;
+    private readonly _textInputElement;
+    protected readonly _fileInput: HTMLInputElement;
+    private _parts;
+    private get _acceptedTypes();
+    private readonly _defaults;
     constructor();
     protected firstUpdated(): void;
-    private setupDragAndDrop;
-    private handleDragEnter;
-    private handleDragOver;
-    private handleDragLeave;
-    private handleDrop;
+    private _getRenderer;
+    private _handleKeydown;
+    private _handleFileInputClick;
+    private _handleFocusState;
+    private _handleDragEnter;
+    private _handleDragOver;
+    private _handleDragLeave;
+    private _handleDrop;
+    /**
+     * Handles input text changes.
+     * Updates internal inputValue and emits 'igcInputChange' event.
+     * @param e Input event from the text area
+     */
+    private _handleInput;
+    private _handleFileUpload;
+    /**
+     * Default attachments area template used when no custom template is provided.
+     * Renders the list of input attachments as chips.
+     * @returns TemplateResult containing the attachments area
+     */
+    private renderAttachmentsArea;
+    /**
+     * Default text area template used when no custom template is provided.
+     * Renders a text area for user input.
+     * @returns TemplateResult containing the text area
+     */
+    private _renderTextArea;
+    /**
+     * Default file upload button template used when no custom template is provided.
+     * Renders a file input for attaching files.
+     * @returns TemplateResult containing the file upload button
+     */
+    private _renderFileUploadButton;
+    /**
+     * Default send button template used when no custom template is provided.
+     * Renders a send button that submits the current input value and attachments.
+     * @returns TemplateResult containing the send button
+     */
+    private _renderSendButton;
+    private renderActionsArea;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/chat/chat-input.js

@@ -7,110 +7,224 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { consume } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
 import { query, state } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { until } from 'lit/directives/until.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
-import { chatContext } from '../common/context.js';
-import { addKeybindings } from '../common/controllers/key-bindings.js';
-import { watch } from '../common/decorators/watch.js';
+import { chatContext, chatUserInputContext } from '../common/context.js';
+import { enterKey } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { partMap } from '../common/part-map.js';
+import { bindIf, hasFiles, isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
-import { registerIconFromText } from '../icon/icon.registry.js';
 import IgcTextareaComponent from '../textarea/textarea.js';
 import { styles } from './themes/input.base.css.js';
 import { all } from './themes/input.js';
 import { styles as shared } from './themes/shared/input/input.common.css.js';
-import { attachmentIcon, fileDocumentIcon, fileImageIcon, sendButtonIcon, starIcon, } from './types.js';
+import { getChatAcceptedFiles, getIconName } from './utils.js';
 class IgcChatInputComponent extends LitElement {
     static register() {
         registerComponent(IgcChatInputComponent, IgcTextareaComponent, IgcIconButtonComponent, IgcChipComponent, IgcIconComponent);
     }
-    acceptedFilesChange() {
-        this._chatState.updateAcceptedTypesCache();
+    get _acceptedTypes() {
+        return this._state.acceptedFileTypes;
     }
     constructor() {
         super();
-        this.containerPart = 'input-container';
+        this._parts = { 'input-container': true, dragging: false };
+        this._defaults = Object.freeze({
+            input: () => this._renderTextArea(),
+            inputActions: () => this.renderActionsArea(),
+            inputAttachments: (ctx) => this.renderAttachmentsArea(ctx.param),
+            fileUploadButton: () => this._renderFileUploadButton(),
+            sendButton: () => this._renderSendButton(),
+        });
         addThemingController(this, all);
-        registerIconFromText('attachment', attachmentIcon, 'material');
-        registerIconFromText('send-message', sendButtonIcon, 'material');
-        registerIconFromText('file-document', fileDocumentIcon, 'material');
-        registerIconFromText('file-image', fileImageIcon, 'material');
-        registerIconFromText('star-icon', starIcon, 'material');
     }
     firstUpdated() {
-        this.setupDragAndDrop();
-        this._chatState.updateAcceptedTypesCache();
-        this._chatState.textArea = this._textInputElement;
-        const keybindings = addKeybindings(this, {
-            skip: () => false,
-            ref: this._chatState.textAreaRef,
-        });
-        keybindings.handleEvent = (event) => {
-            this._chatState.handleKeyDown(event);
-        };
+        this._state.updateAcceptedTypesCache();
+        this._state.textArea = this._textInputElement;
+    }
+    _getRenderer(name) {
+        return this._state.options?.renderers
+            ? (this._state.options.renderers[name] ?? this._defaults[name])
+            : this._defaults[name];
     }
-    setupDragAndDrop() {
-        const container = this.shadowRoot?.querySelector(`div[part='input-container']`);
-        if (container) {
-            container.addEventListener('dragenter', this.handleDragEnter.bind(this));
-            container.addEventListener('dragover', this.handleDragOver.bind(this));
-            container.addEventListener('dragleave', this.handleDragLeave.bind(this));
-            container.addEventListener('drop', this.handleDrop.bind(this));
+    _handleKeydown(event) {
+        const isSend = event.key === enterKey && !event.shiftKey;
+        if (isSend) {
+            event.preventDefault();
+            this._state.sendMessage();
         }
+        else {
+            this._state.handleKeyDown(event);
+        }
+    }
+    _handleFileInputClick() {
+        this._fileInput.showPicker();
+    }
+    _handleFocusState(event) {
+        this._state.emitEvent(event.type === 'focus' ? 'igcInputFocus' : 'igcInputBlur');
     }
-    handleDragEnter(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        const files = Array.from(e.dataTransfer?.items || []).filter((item) => item.kind === 'file');
-        const hasValidFiles = files.some((item) => this._chatState.isFileTypeAccepted(item.getAsFile(), item.type));
-        this.containerPart = `input-container ${hasValidFiles ? ' dragging' : ''}`;
-        this._chatState.emitEvent('igcAttachmentDrag');
-    }
-    handleDragOver(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    handleDragLeave(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX;
-        const y = e.clientY;
+    _handleDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);
+        this._parts = { 'input-container': true, dragging: !isEmpty(validFiles) };
+        this._state.emitEvent('igcAttachmentDrag');
+    }
+    _handleDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    _handleDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX;
+        const y = event.clientY;
         if (x <= rect.left ||
             x >= rect.right ||
             y <= rect.top ||
             y >= rect.bottom) {
-            this.containerPart = 'input-container';
+            this._parts = { 'input-container': true, dragging: false };
         }
     }
-    handleDrop(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.containerPart = 'input-container';
-        const files = Array.from(e.dataTransfer?.files || []);
-        if (files.length === 0)
-            return;
-        const validFiles = files.filter((file) => this._chatState.isFileTypeAccepted(file));
-        this._chatState.emitEvent('igcAttachmentDrop');
-        this._chatState.attachFiles(validFiles);
+    _handleDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._parts = { 'input-container': true, dragging: false };
+        const validFiles = getChatAcceptedFiles(event, this._acceptedTypes);
+        this._state.emitEvent('igcAttachmentDrop');
+        this._state.attachFiles(validFiles);
         this.requestUpdate();
     }
+    _handleInput({ detail }) {
+        if (detail === this._state.inputValue)
+            return;
+        this._state.inputValue = detail;
+        this._state.emitEvent('igcInputChange', { detail: { value: detail } });
+    }
+    _handleFileUpload(event) {
+        const input = event.target;
+        if (hasFiles(input)) {
+            this._state.attachFiles(Array.from(input.files));
+        }
+    }
+    renderAttachmentsArea(attachments) {
+        return html `${attachments?.map((attachment, index) => html `
+        <div part="attachment-wrapper" role="listitem">
+          <igc-chip
+            removable
+            @igcRemove=${() => this._state.removeAttachment(index)}
+          >
+            <igc-icon
+              slot="prefix"
+              name=${getIconName(attachment.file?.type ?? attachment.type)}
+            ></igc-icon>
+            <span part="attachment-name">${attachment.name}</span>
+          </igc-chip>
+        </div>
+      `)} `;
+    }
+    _renderTextArea() {
+        return html `
+      <igc-textarea
+        part="text-input"
+        placeholder=${ifDefined(this._state.options?.inputPlaceholder)}
+        resize="auto"
+        rows="1"
+        .value=${this._userInputState?.inputValue}
+        @igcInput=${this._handleInput}
+        @keydown=${this._handleKeydown}
+        @focus=${this._handleFocusState}
+        @blur=${this._handleFocusState}
+      ></igc-textarea>
+    `;
+    }
+    _renderFileUploadButton() {
+        const accepted = this._state.options?.acceptedFiles;
+        const attachmentsDisabled = this._state.options?.disableInputAttachments;
+        return html `${cache(attachmentsDisabled
+            ? nothing
+            : html `
+            <label for="input_attachments" part="upload-button">
+              <igc-icon-button
+                variant="flat"
+                name="attach_file"
+                @click=${this._handleFileInputClick}
+              ></igc-icon-button>
+              <input
+                type="file"
+                id="input_attachments"
+                name="input_attachments"
+                multiple
+                accept=${bindIf(accepted, accepted)}
+                @change=${this._handleFileUpload}
+              />
+            </label>
+          `)}`;
+    }
+    _renderSendButton() {
+        const enabled = this._state.hasInputValue || this._state.hasInputAttachments;
+        return html `
+      <igc-icon-button
+        aria-label="Send message"
+        name="send_message"
+        variant="contained"
+        part="send-button"
+        ?disabled=${!enabled}
+        @click=${this._state.sendMessage}
+      ></igc-icon-button>
+    `;
+    }
+    renderActionsArea() {
+        return html ` ${this._getRenderer('fileUploadButton')({
+            param: undefined,
+            defaults: this._defaults,
+            options: this._state.options,
+        })}
+    ${this._getRenderer('sendButton')({
+            param: undefined,
+            defaults: this._defaults,
+            options: this._state.options,
+        })}`;
+    }
     render() {
-        const templates = this._chatState.mergedTemplates;
+        const partialCtx = {
+            defaults: this._defaults,
+            options: this._state.options,
+        };
         return html `
-      <div part="${this.containerPart}">
-        ${this._chatState.inputAttachments &&
-            this._chatState.inputAttachments.length > 0
+      <div
+        part=${partMap(this._parts)}
+        @dragenter=${this._handleDragEnter}
+        @dragover=${this._handleDragOver}
+        @dragleave=${this._handleDragLeave}
+        @drop=${this._handleDrop}
+      >
+        ${this._state.inputAttachments &&
+            this._state.inputAttachments.length > 0
             ? html ` <div part="attachments" role="list" aria-label="Attachments">
-              ${templates?.textAreaAttachmentsTemplate(this._chatState.inputAttachments)}
+              ${until(this._getRenderer('inputAttachments')({
+                ...partialCtx,
+                param: this._state.inputAttachments,
+            }))}
             </div>`
             : nothing}
         <div part="input-wrapper">
-          ${templates?.textInputTemplate(this._chatState.inputValue ?? '')}
+          ${until(this._getRenderer('input')({
+            ...partialCtx,
+            param: this._state.inputValue,
+        }))}
         </div>
         <div part="buttons-container">
-          ${templates?.textAreaActionsTemplate()}
+          ${until(this._getRenderer('inputActions')({
+            ...partialCtx,
+            param: undefined,
+        }))}
         </div>
       </div>
     `;
@@ -121,17 +235,17 @@ IgcChatInputComponent.styles = [styles, shared];
 export default IgcChatInputComponent;
 __decorate([
     consume({ context: chatContext, subscribe: true })
-], IgcChatInputComponent.prototype, "_chatState", void 0);
+], IgcChatInputComponent.prototype, "_state", void 0);
+__decorate([
+    consume({ context: chatUserInputContext, subscribe: true })
+], IgcChatInputComponent.prototype, "_userInputState", void 0);
 __decorate([
     query(IgcTextareaComponent.tagName)
 ], IgcChatInputComponent.prototype, "_textInputElement", void 0);
 __decorate([
     query('#input_attachments')
-], IgcChatInputComponent.prototype, "_inputAttachmentsButton", void 0);
-__decorate([
-    watch('acceptedFiles', { waitUntilFirstUpdate: true })
-], IgcChatInputComponent.prototype, "acceptedFilesChange", null);
+], IgcChatInputComponent.prototype, "_fileInput", void 0);
 __decorate([
     state()
-], IgcChatInputComponent.prototype, "containerPart", void 0);
+], IgcChatInputComponent.prototype, "_parts", void 0);
 //# sourceMappingURL=chat-input.js.map

package/components/chat/chat-input.js.map

@@ -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 { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport { chatContext } from '../common/context.js';\nimport { addKeybindings } from '../common/controllers/key-bindings.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { registerIconFromText } from '../icon/icon.registry.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 {\n  attachmentIcon,\n  fileDocumentIcon,\n  fileImageIcon,\n  sendButtonIcon,\n  starIcon,\n} from './types.js';\n\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 buttons-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\n  public static override styles = [styles, shared];\n\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState!: ChatState;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcChatInputComponent,\n      IgcTextareaComponent,\n      IgcIconButtonComponent,\n      IgcChipComponent,\n      IgcIconComponent\n    );\n  }\n\n  @query(IgcTextareaComponent.tagName)\n  private _textInputElement!: IgcTextareaComponent;\n\n  @query('#input_attachments')\n  protected _inputAttachmentsButton!: IgcIconButtonComponent;\n\n  // private readonly _textAreaRef = createRef<IgcTextareaComponent>();\n\n  @watch('acceptedFiles', { waitUntilFirstUpdate: true })\n  protected acceptedFilesChange(): void {\n    this._chatState.updateAcceptedTypesCache();\n  }\n\n  @state()\n  private containerPart = 'input-container';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n    registerIconFromText('attachment', attachmentIcon, 'material');\n    registerIconFromText('send-message', sendButtonIcon, 'material');\n    registerIconFromText('file-document', fileDocumentIcon, 'material');\n    registerIconFromText('file-image', fileImageIcon, 'material');\n    registerIconFromText('star-icon', starIcon, 'material');\n  }\n\n  protected override firstUpdated() {\n    this.setupDragAndDrop();\n    this._chatState.updateAcceptedTypesCache();\n    this._chatState.textArea = this._textInputElement;\n\n    // Use keybindings controller to capture all key events\n    // Custom skip function that never skips - this captures ALL key events\n    const keybindings = addKeybindings(this, {\n      skip: () => false, // Never skip any key events\n      ref: this._chatState.textAreaRef,\n    });\n\n    // Override the controller's handleEvent to capture all keys\n    // This is a more direct approach that doesn't require listing specific keys\n    keybindings.handleEvent = (event: KeyboardEvent) => {\n      // Call our handler for every key event\n      this._chatState.handleKeyDown(event);\n    };\n  }\n\n  private setupDragAndDrop() {\n    const container = this.shadowRoot?.querySelector(\n      `div[part='input-container']`\n    ) as HTMLElement;\n    if (container) {\n      container.addEventListener('dragenter', this.handleDragEnter.bind(this));\n      container.addEventListener('dragover', this.handleDragOver.bind(this));\n      container.addEventListener('dragleave', this.handleDragLeave.bind(this));\n      container.addEventListener('drop', this.handleDrop.bind(this));\n    }\n  }\n\n  private handleDragEnter(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const files = Array.from(e.dataTransfer?.items || []).filter(\n      (item) => item.kind === 'file'\n    );\n    const hasValidFiles = files.some((item) =>\n      this._chatState.isFileTypeAccepted(item.getAsFile() as File, item.type)\n    );\n\n    this.containerPart = `input-container ${hasValidFiles ? ' dragging' : ''}`;\n\n    this._chatState.emitEvent('igcAttachmentDrag');\n  }\n\n  private handleDragOver(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private handleDragLeave(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    // Check if we're actually leaving the container\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = e.clientX;\n    const y = e.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      this.containerPart = 'input-container';\n    }\n  }\n\n  private handleDrop(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    this.containerPart = 'input-container';\n\n    const files = Array.from(e.dataTransfer?.files || []);\n    if (files.length === 0) return;\n\n    const validFiles = files.filter((file) =>\n      this._chatState.isFileTypeAccepted(file)\n    );\n\n    this._chatState.emitEvent('igcAttachmentDrop');\n\n    this._chatState.attachFiles(validFiles);\n    this.requestUpdate();\n  }\n\n  protected override render() {\n    const templates = this._chatState.mergedTemplates;\n    return html`\n      <div part=\"${this.containerPart}\">\n        ${this._chatState.inputAttachments &&\n        this._chatState.inputAttachments.length > 0\n          ? html` <div part=\"attachments\" role=\"list\" aria-label=\"Attachments\">\n              ${templates?.textAreaAttachmentsTemplate(\n                this._chatState.inputAttachments\n              )}\n            </div>`\n          : nothing}\n        <div part=\"input-wrapper\">\n          ${templates?.textInputTemplate(this._chatState.inputValue ?? '')}\n        </div>\n        <div part=\"buttons-container\">\n          ${templates?.textAreaActionsTemplate()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-input': IgcChatInputComponent;\n  }\n}\n"]}
+{"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 } from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, hasFiles, isEmpty } 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 { ChatTemplateRenderer, IgcMessageAttachment } from './types.js';\nimport { getChatAcceptedFiles, getIconName } from './utils.js';\n\ntype DefaultInputRenderers = {\n  input: ChatTemplateRenderer<string>;\n  inputActions: ChatTemplateRenderer<void>;\n  inputAttachments: ChatTemplateRenderer<IgcMessageAttachment[]>;\n  fileUploadButton: ChatTemplateRenderer<void>;\n  sendButton: ChatTemplateRenderer<void>;\n};\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 buttons-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  @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  private readonly _defaults: Readonly<DefaultInputRenderers> = Object.freeze({\n    input: () => this._renderTextArea(),\n    inputActions: () => this.renderActionsArea(),\n    inputAttachments: (ctx) => this.renderAttachmentsArea(ctx.param),\n    fileUploadButton: () => this._renderFileUploadButton(),\n    sendButton: () => this._renderSendButton(),\n  });\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override firstUpdated() {\n    this._state.updateAcceptedTypesCache();\n    this._state.textArea = this._textInputElement;\n  }\n\n  private _getRenderer(\n    name: keyof DefaultInputRenderers\n  ): ChatTemplateRenderer<any> {\n    return this._state.options?.renderers\n      ? (this._state.options.renderers[name] ?? this._defaults[name])\n      : this._defaults[name];\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    const isSend = event.key === enterKey && !event.shiftKey;\n\n    if (isSend) {\n      event.preventDefault();\n      this._state.sendMessage();\n    } else {\n      // TODO:\n      this._state.handleKeyDown(event);\n    }\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.attachFiles(validFiles);\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles input text changes.\n   * Updates internal inputValue and emits 'igcInputChange' event.\n   * @param e Input event from the text area\n   */\n  private _handleInput({ detail }: CustomEvent<string>): void {\n    if (detail === this._state.inputValue) return;\n\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.attachFiles(Array.from(input.files!));\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: IgcMessageAttachment[]) {\n    return html`${attachments?.map(\n      (attachment, index) => html`\n        <div part=\"attachment-wrapper\" role=\"listitem\">\n          <igc-chip\n            removable\n            @igcRemove=${() => this._state.removeAttachment(index)}\n          >\n            <igc-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        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  /**\n   * Default file upload button template used when no custom template is provided.\n   * Renders a file input for attaching files.\n   * @returns TemplateResult containing the file upload button\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=\"upload-button\">\n              <igc-icon-button\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                name=\"input_attachments\"\n                multiple\n                accept=${bindIf(accepted, accepted)}\n                @change=${this._handleFileUpload}\n              />\n            </label>\n          `\n    )}`;\n  }\n\n  /**\n   * Default send button template used when no custom template is provided.\n   * Renders a send button that submits the current input value and attachments.\n   * @returns TemplateResult containing the send button\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._state.sendMessage}\n      ></igc-icon-button>\n    `;\n  }\n\n  private renderActionsArea() {\n    return html` ${this._getRenderer('fileUploadButton')({\n      param: undefined,\n      defaults: this._defaults,\n      options: this._state.options,\n    })}\n    ${this._getRenderer('sendButton')({\n      param: undefined,\n      defaults: this._defaults,\n      options: this._state.options,\n    })}`;\n  }\n\n  protected override render() {\n    const partialCtx = {\n      defaults: this._defaults,\n      options: this._state.options,\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.inputAttachments &&\n        this._state.inputAttachments.length > 0\n          ? html` <div part=\"attachments\" role=\"list\" aria-label=\"Attachments\">\n              ${until(\n                this._getRenderer('inputAttachments')({\n                  ...partialCtx,\n                  param: this._state.inputAttachments,\n                })\n              )}\n            </div>`\n          : nothing}\n        <div part=\"input-wrapper\">\n          ${until(\n            this._getRenderer('input')({\n              ...partialCtx,\n              param: this._state.inputValue,\n            })\n          )}\n        </div>\n        <div part=\"buttons-container\">\n          ${until(\n            this._getRenderer('inputActions')({\n              ...partialCtx,\n              param: undefined,\n            })\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-input': IgcChatInputComponent;\n  }\n}\n"]}

package/components/chat/chat-message.d.ts

@@ -25,20 +25,35 @@ export default class IgcChatMessageComponent extends LitElement {
     /**
      * Injected chat state context. Provides message data, user info, and options.
      */
-    private _chatState?;
+    private readonly _state;
+    private readonly _defaults;
     /**
      * The chat message to render.
      */
     message?: IgcMessage;
     constructor();
     protected firstUpdated(): void;
+    private _getRenderer;
+    private _handleMessageActionClick;
+    private _renderHeader;
+    private _renderContent;
+    private _renderActions;
+    private _renderActionButton;
+    private _renderAttachments;
+    /**
+     * Default message template used when no custom template is provided.
+     * Renders the message text, sanitized for security.
+     * @param message The chat message to render
+     * @returns TemplateResult containing the rendered message
+     */
+    private _renderMessage;
     /**
      * Renders the chat message template.
      * - Applies 'sent' CSS class if the message sender matches current user.
      * - Uses markdown rendering if configured.
      * - Renders attachments and custom templates if provided.
      */
-    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {