@ni/spright-components 5.4.2 → 5.5.0

package/dist/esm/all-components.d.ts

@@ -5,5 +5,6 @@
  */
 import '@ni/nimble-components/dist/esm/all-components';
 import './chat/conversation';
+import './chat/input';
 import './chat/message';
 import './rectangle';

package/dist/esm/all-components.js

@@ -5,6 +5,7 @@
  */
 import '@ni/nimble-components/dist/esm/all-components';
 import './chat/conversation';
+import './chat/input';
 import './chat/message';
 import './rectangle';
 //# sourceMappingURL=all-components.js.map

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+CAA+C,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC","sourcesContent":["/**\n * Import of all the web components available in Spright AND Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/nimble-components/dist/esm/all-components';\n\nimport './chat/conversation';\nimport './chat/message';\nimport './rectangle';\n"]}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+CAA+C,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC","sourcesContent":["/**\n * Import of all the web components available in Spright AND Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/nimble-components/dist/esm/all-components';\n\nimport './chat/conversation';\nimport './chat/input';\nimport './chat/message';\nimport './rectangle';\n"]}

package/dist/esm/chat/conversation/styles.js

@@ -6,6 +6,12 @@ export const styles = css `
 
     :host {
         flex-direction: column;
+    }
+
+    .messages {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
         justify-content: flex-start;
         row-gap: 32px;
         padding: ${mediumPadding};

package/dist/esm/chat/conversation/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/conversation/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,aAAa,EAChB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;mBAMF,aAAa;sBACV,0BAA0B;;;CAG/C,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    applicationBackgroundColor,\n    mediumPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        flex-direction: column;\n        justify-content: flex-start;\n        row-gap: 32px;\n        padding: ${mediumPadding};\n        background: ${applicationBackgroundColor};\n        overflow-y: auto;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/conversation/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,aAAa,EAChB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;mBAYF,aAAa;sBACV,0BAA0B;;;CAG/C,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    applicationBackgroundColor,\n    mediumPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        flex-direction: column;\n    }\n\n    .messages {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        row-gap: 32px;\n        padding: ${mediumPadding};\n        background: ${applicationBackgroundColor};\n        overflow-y: auto;\n    }\n`;\n"]}

package/dist/esm/chat/conversation/template.js

@@ -1,6 +1,8 @@
 import { html } from '@ni/fast-element';
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
-export const template = html `<slot></slot>`;
+export const template = html `
+<div class="messages"><slot></slot></div>
+<div class="input"><slot name="input"></slot></div>`;
 /* eslint-enable @typescript-eslint/indent */
 //# sourceMappingURL=template.js.map

package/dist/esm/chat/conversation/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/conversation/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAkB,eAAe,CAAC;AAC9D,6CAA6C","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { ChatConversation } from '.';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template = html<ChatConversation>`<slot></slot>`;\n/* eslint-enable @typescript-eslint/indent */\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/conversation/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAkB;;oDAEM,CAAC;AACrD,6CAA6C","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { ChatConversation } from '.';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template = html<ChatConversation>`\n<div class=\"messages\"><slot></slot></div>\n<div class=\"input\"><slot name=\"input\"></slot></div>`;\n/* eslint-enable @typescript-eslint/indent */\n"]}

package/dist/esm/chat/input/index.d.ts

@@ -0,0 +1,48 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-input': ChatInput;
+    }
+}
+/**
+ * A Spright component for composing and sending a chat message
+ */
+export declare class ChatInput extends FoundationElement {
+    placeholder?: string;
+    sendButtonLabel?: string;
+    value: string;
+    /**
+     * @internal
+     */
+    textArea?: HTMLTextAreaElement;
+    /**
+     * @internal
+     */
+    disableSendButton: boolean;
+    /**
+     * Clears the text input and gives it focus.
+     */
+    resetInput(): void;
+    /**
+     * @internal
+     */
+    textAreaKeydownHandler(e: KeyboardEvent): boolean;
+    /**
+     * @internal
+     */
+    textAreaInputHandler(): void;
+    /**
+     * @internal
+     */
+    valueChanged(): void;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    sendButtonClickHandler(): void;
+    private shouldDisableSendButton;
+}
+export declare const chatInputTag = "spright-chat-input";

package/dist/esm/chat/input/index.js

@@ -0,0 +1,102 @@
+import { __decorate } from "tslib";
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { keyEnter } from '@ni/fast-web-utilities';
+import { attr, observable } from '@ni/fast-element';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Spright component for composing and sending a chat message
+ */
+export class ChatInput extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        /**
+         * @internal
+         */
+        this.disableSendButton = true;
+    }
+    /**
+     * Clears the text input and gives it focus.
+     */
+    resetInput() {
+        this.value = '';
+        this.disableSendButton = true;
+        if (this.textArea) {
+            this.textArea.value = '';
+            this.textArea.focus();
+        }
+    }
+    /**
+     * @internal
+     */
+    textAreaKeydownHandler(e) {
+        if (e.key === keyEnter && !e.shiftKey) {
+            this.sendButtonClickHandler();
+            return false;
+        }
+        return true;
+    }
+    /**
+     * @internal
+     */
+    textAreaInputHandler() {
+        this.value = this.textArea.value;
+        this.disableSendButton = this.shouldDisableSendButton();
+    }
+    /**
+     * @internal
+     */
+    valueChanged() {
+        if (this.textArea) {
+            this.textArea.value = this.value;
+            this.disableSendButton = this.shouldDisableSendButton();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.textArea.value = this.value;
+        this.disableSendButton = this.shouldDisableSendButton();
+    }
+    /**
+     * @internal
+     */
+    sendButtonClickHandler() {
+        if (this.shouldDisableSendButton()) {
+            return;
+        }
+        const eventDetail = {
+            text: this.textArea.value
+        };
+        this.$emit('send', eventDetail);
+    }
+    shouldDisableSendButton() {
+        return this.textArea.value.length === 0;
+    }
+}
+__decorate([
+    attr
+], ChatInput.prototype, "placeholder", void 0);
+__decorate([
+    attr({ attribute: 'send-button-label' })
+], ChatInput.prototype, "sendButtonLabel", void 0);
+__decorate([
+    attr
+], ChatInput.prototype, "value", void 0);
+__decorate([
+    observable
+], ChatInput.prototype, "textArea", void 0);
+__decorate([
+    observable
+], ChatInput.prototype, "disableSendButton", void 0);
+const sprightChatInput = ChatInput.compose({
+    baseName: 'chat-input',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());
+export const chatInputTag = 'spright-chat-input';
+//# sourceMappingURL=index.js.map

package/dist/esm/chat/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/input/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { keyEnter } from '@ni/fast-web-utilities';\nimport { attr, observable } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ChatInputSendEventDetail } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-input': ChatInput;\n    }\n}\n\n/**\n * A Spright component for composing and sending a chat message\n */\nexport class ChatInput extends FoundationElement {\n    @attr\n    public placeholder?: string;\n\n    @attr({ attribute: 'send-button-label' })\n    public sendButtonLabel?: string;\n\n    @attr\n    public value = '';\n\n    /**\n     * @internal\n     */\n    @observable\n    public textArea?: HTMLTextAreaElement;\n\n    /**\n     * @internal\n     */\n    @observable\n    public disableSendButton = true;\n\n    /**\n     * Clears the text input and gives it focus.\n     */\n    public resetInput(): void {\n        this.value = '';\n        this.disableSendButton = true;\n        if (this.textArea) {\n            this.textArea.value = '';\n            this.textArea.focus();\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public textAreaKeydownHandler(e: KeyboardEvent): boolean {\n        if (e.key === keyEnter && !e.shiftKey) {\n            this.sendButtonClickHandler();\n            return false;\n        }\n        return true;\n    }\n\n    /**\n     * @internal\n     */\n    public textAreaInputHandler(): void {\n        this.value = this.textArea!.value;\n        this.disableSendButton = this.shouldDisableSendButton();\n    }\n\n    /**\n     * @internal\n     */\n    public valueChanged(): void {\n        if (this.textArea) {\n            this.textArea.value = this.value;\n            this.disableSendButton = this.shouldDisableSendButton();\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.textArea!.value = this.value;\n        this.disableSendButton = this.shouldDisableSendButton();\n    }\n\n    /**\n     * @internal\n     */\n    public sendButtonClickHandler(): void {\n        if (this.shouldDisableSendButton()) {\n            return;\n        }\n        const eventDetail: ChatInputSendEventDetail = {\n            text: this.textArea!.value\n        };\n        this.$emit('send', eventDetail);\n    }\n\n    private shouldDisableSendButton(): boolean {\n        return this.textArea!.value.length === 0;\n    }\n}\n\nconst sprightChatInput = ChatInput.compose({\n    baseName: 'chat-input',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());\nexport const chatInputTag = 'spright-chat-input';\n"]}

package/dist/esm/chat/input/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/chat/input/styles.js

@@ -0,0 +1,54 @@
+import { css } from '@ni/fast-element';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, controlLabelFontColor, elevation2BoxShadow, mediumPadding, popupBorderColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        width: 100%;
+        height: auto;
+    }
+
+    .container {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr auto;
+        width: 100%;
+        height: 100%;
+
+        background-color: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${popupBorderColor};
+        box-shadow: ${elevation2BoxShadow};
+    }
+
+    textarea {
+        grid-row: 1;
+        grid-column: 1 / 3;
+
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        background-color: transparent;
+
+        width: 100%;
+        resize: none;
+        height: auto;
+        max-height: calc(6lh + 2 * ${mediumPadding});
+        field-sizing: content;
+
+        border-width: 0px;
+        outline: none;
+        padding: ${mediumPadding};
+    }
+
+    textarea::placeholder {
+        color: ${controlLabelFontColor};
+    }
+
+    .send-button {
+        grid-row: 2;
+        grid-column: 2;
+        width: 80px;
+        margin: ${mediumPadding};
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/chat/input/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EACnB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;4BAcO,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;sBACjC,mBAAmB;;;;;;;gBAOzB,QAAQ;iBACP,aAAa;;;;;;qCAMO,aAAa;;;;;mBAK/B,aAAa;;;;iBAIf,qBAAqB;;;;;;;kBAOpB,aAAa;;CAE9B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    borderWidth,\n    controlLabelFontColor,\n    elevation2BoxShadow,\n    mediumPadding,\n    popupBorderColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        width: 100%;\n        height: auto;\n    }\n\n    .container {\n        display: grid;\n        grid-template-rows: auto 1fr;\n        grid-template-columns: 1fr auto;\n        width: 100%;\n        height: 100%;\n\n        background-color: ${applicationBackgroundColor};\n        border: ${borderWidth} solid ${popupBorderColor};\n        box-shadow: ${elevation2BoxShadow};\n    }\n\n    textarea {\n        grid-row: 1;\n        grid-column: 1 / 3;\n\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        background-color: transparent;\n\n        width: 100%;\n        resize: none;\n        height: auto;\n        max-height: calc(6lh + 2 * ${mediumPadding});\n        field-sizing: content;\n\n        border-width: 0px;\n        outline: none;\n        padding: ${mediumPadding};\n    }\n\n    textarea::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .send-button {\n        grid-row: 2;\n        grid-column: 2;\n        width: 80px;\n        margin: ${mediumPadding};\n    }\n`;\n"]}

package/dist/esm/chat/input/template.d.ts

@@ -0,0 +1,2 @@
+import type { ChatInput } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<ChatInput, any>;

package/dist/esm/chat/input/template.js

@@ -0,0 +1,29 @@
+import { html, ref } from '@ni/fast-element';
+import { buttonTag } from '@ni/nimble-components/dist/esm/button';
+import { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = html `
+<div class="container">
+    <textarea
+        ${ref('textArea')}
+        placeholder="${x => x.placeholder}"
+        rows="1"
+        @keydown="${(x, c) => x.textAreaKeydownHandler(c.event)}"
+        @input="${x => x.textAreaInputHandler()}"
+    ></textarea>
+    <${buttonTag}
+        class="send-button"
+        appearance="block"
+        appearance-variant="accent"
+        ?disabled=${x => x.disableSendButton}
+        @click=${x => x.sendButtonClickHandler()}
+        title=${x => x.sendButtonLabel}
+        content-hidden
+    >
+        ${x => x.sendButtonLabel}
+        <${iconPaperPlaneTag} slot="start"><${iconPaperPlaneTag}/>
+    </${buttonTag}>    
+</div>`;
+/* eslint-enable @typescript-eslint/indent */
+//# sourceMappingURL=template.js.map

package/dist/esm/chat/input/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/input/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAGrF,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;;UAG7B,GAAG,CAAC,UAAU,CAAC;uBACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;;oBAErB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAC9D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;;OAExC,SAAS;;;;oBAII,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;iBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,EAAE;gBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;UAG5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;WACrB,iBAAiB,kBAAkB,iBAAiB;QACvD,SAAS;OACV,CAAC;AACR,6CAA6C","sourcesContent":["import { html, ref } from '@ni/fast-element';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';\nimport type { ChatInput } from '.';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template = html<ChatInput>`\n<div class=\"container\">\n    <textarea\n        ${ref('textArea')}\n        placeholder=\"${x => x.placeholder}\"\n        rows=\"1\"\n        @keydown=\"${(x, c) => x.textAreaKeydownHandler(c.event as KeyboardEvent)}\"\n        @input=\"${x => x.textAreaInputHandler()}\"\n    ></textarea>\n    <${buttonTag}\n        class=\"send-button\"\n        appearance=\"block\"\n        appearance-variant=\"accent\"\n        ?disabled=${x => x.disableSendButton}\n        @click=${x => x.sendButtonClickHandler()}\n        title=${x => x.sendButtonLabel}\n        content-hidden\n    >\n        ${x => x.sendButtonLabel}\n        <${iconPaperPlaneTag} slot=\"start\"><${iconPaperPlaneTag}/>\n    </${buttonTag}>    \n</div>`;\n/* eslint-enable @typescript-eslint/indent */\n"]}

package/dist/esm/chat/input/testing/chat-input.pageobject.d.ts

@@ -0,0 +1,21 @@
+import type { ChatInput } from '..';
+/**
+ * Page object for the `spright-chat-input` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export declare class ChatInputPageObject {
+    protected readonly element: ChatInput;
+    constructor(element: ChatInput);
+    isSendButtonEnabled(): boolean;
+    clickSendButton(): void;
+    getSendButtonTitle(): string;
+    getSendButtonTextContent(): string;
+    textAreaHasFocus(): boolean;
+    getPlaceholder(): string;
+    getRenderedText(): string;
+    setText(text: string): void;
+    pressEnterKey(): Promise<void>;
+    pressShiftEnterKey(): Promise<void>;
+    private getSendButton;
+    private sendEnterKeyEvents;
+}

package/dist/esm/chat/input/testing/chat-input.pageobject.js

@@ -0,0 +1,65 @@
+import { keyEnter } from '@ni/fast-web-utilities';
+import { Button } from '@ni/nimble-components/dist/esm/button';
+import { processUpdates, waitForUpdatesAsync } from '@ni/nimble-components/dist/esm/testing/async-helpers';
+import { sendKeyDownEvent } from '@ni/nimble-components/dist/esm/utilities/testing/component';
+/**
+ * Page object for the `spright-chat-input` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export class ChatInputPageObject {
+    constructor(element) {
+        this.element = element;
+    }
+    isSendButtonEnabled() {
+        return !this.getSendButton().disabled;
+    }
+    clickSendButton() {
+        this.getSendButton().click();
+    }
+    getSendButtonTitle() {
+        return this.getSendButton().title;
+    }
+    getSendButtonTextContent() {
+        return this.getSendButton().textContent?.trim() ?? '';
+    }
+    textAreaHasFocus() {
+        return (document.activeElement === this.element
+            && this.element.shadowRoot?.activeElement === this.element.textArea);
+    }
+    getPlaceholder() {
+        if (this.element.textArea.value) {
+            throw Error('Placeholder not visible');
+        }
+        return this.element.textArea.placeholder;
+    }
+    getRenderedText() {
+        return this.element.textArea.value;
+    }
+    setText(text) {
+        this.element.textArea.focus();
+        this.element.textArea.value = text;
+        this.element.textAreaInputHandler();
+        processUpdates();
+    }
+    async pressEnterKey() {
+        this.element.textArea.focus();
+        await this.sendEnterKeyEvents(false);
+    }
+    async pressShiftEnterKey() {
+        this.element.textArea.focus();
+        await this.sendEnterKeyEvents(true);
+    }
+    getSendButton() {
+        const sendButton = this.element.shadowRoot.querySelector('.send-button');
+        return sendButton;
+    }
+    async sendEnterKeyEvents(shiftKey) {
+        const keyDownEvent = await sendKeyDownEvent(this.element.textArea, keyEnter, { shiftKey });
+        if (!keyDownEvent.defaultPrevented) {
+            this.element.textArea.value += '\n';
+            this.element.textArea.dispatchEvent(new InputEvent('input'));
+        }
+        await waitForUpdatesAsync();
+    }
+}
+//# sourceMappingURL=chat-input.pageobject.js.map

package/dist/esm/chat/input/testing/chat-input.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-input.pageobject.js","sourceRoot":"","sources":["../../../../../src/chat/input/testing/chat-input.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EACH,cAAc,EACd,mBAAmB,EACtB,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4DAA4D,CAAC;AAG9F;;;GAGG;AACH,MAAM,OAAO,mBAAmB;IAC5B,YAAsC,OAAkB;QAAlB,YAAO,GAAP,OAAO,CAAW;IAAG,CAAC;IAErD,mBAAmB;QACtB,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC;IAC1C,CAAC;IAEM,eAAe;QAClB,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC;IACjC,CAAC;IAEM,kBAAkB;QACrB,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IACtC,CAAC;IAEM,wBAAwB;QAC3B,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC1D,CAAC;IAEM,gBAAgB;QACnB,OAAO,CACH,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,OAAO;eACpC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,KAAK,IAAI,CAAC,OAAO,CAAC,QAAQ,CACtE,CAAC;IACN,CAAC;IAEM,cAAc;QACjB,IAAI,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,KAAK,EAAE,CAAC;YAC/B,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC3C,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,WAAW,CAAC;IAC9C,CAAC;IAEM,eAAe;QAClB,OAAO,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,OAAO,CAAC,IAAY;QACvB,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,KAAK,GAAG,IAAI,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC;QACpC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEM,KAAK,CAAC,aAAa;QACtB,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAEM,KAAK,CAAC,kBAAkB;QAC3B,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAEO,aAAa;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAS,cAAc,CAAE,CAAC;QACnF,OAAO,UAAU,CAAC;IACtB,CAAC;IAEO,KAAK,CAAC,kBAAkB,CAAC,QAAiB;QAC9C,MAAM,YAAY,GAAG,MAAM,gBAAgB,CACvC,IAAI,CAAC,OAAO,CAAC,QAAS,EACtB,QAAQ,EACR,EAAE,QAAQ,EAAE,CACf,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;YACjC,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,KAAK,IAAI,IAAI,CAAC;YACrC,IAAI,CAAC,OAAO,CAAC,QAAS,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;QAClE,CAAC;QAED,MAAM,mBAAmB,EAAE,CAAC;IAChC,CAAC;CACJ","sourcesContent":["import { keyEnter } from '@ni/fast-web-utilities';\nimport { Button } from '@ni/nimble-components/dist/esm/button';\nimport {\n    processUpdates,\n    waitForUpdatesAsync\n} from '@ni/nimble-components/dist/esm/testing/async-helpers';\nimport { sendKeyDownEvent } from '@ni/nimble-components/dist/esm/utilities/testing/component';\nimport type { ChatInput } from '..';\n\n/**\n * Page object for the `spright-chat-input` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class ChatInputPageObject {\n    public constructor(protected readonly element: ChatInput) {}\n\n    public isSendButtonEnabled(): boolean {\n        return !this.getSendButton().disabled;\n    }\n\n    public clickSendButton(): void {\n        this.getSendButton().click();\n    }\n\n    public getSendButtonTitle(): string {\n        return this.getSendButton().title;\n    }\n\n    public getSendButtonTextContent(): string {\n        return this.getSendButton().textContent?.trim() ?? '';\n    }\n\n    public textAreaHasFocus(): boolean {\n        return (\n            document.activeElement === this.element\n            && this.element.shadowRoot?.activeElement === this.element.textArea\n        );\n    }\n\n    public getPlaceholder(): string {\n        if (this.element.textArea!.value) {\n            throw Error('Placeholder not visible');\n        }\n        return this.element.textArea!.placeholder;\n    }\n\n    public getRenderedText(): string {\n        return this.element.textArea!.value;\n    }\n\n    public setText(text: string): void {\n        this.element.textArea!.focus();\n        this.element.textArea!.value = text;\n        this.element.textAreaInputHandler();\n        processUpdates();\n    }\n\n    public async pressEnterKey(): Promise<void> {\n        this.element.textArea!.focus();\n        await this.sendEnterKeyEvents(false);\n    }\n\n    public async pressShiftEnterKey(): Promise<void> {\n        this.element.textArea!.focus();\n        await this.sendEnterKeyEvents(true);\n    }\n\n    private getSendButton(): Button {\n        const sendButton = this.element.shadowRoot!.querySelector<Button>('.send-button')!;\n        return sendButton;\n    }\n\n    private async sendEnterKeyEvents(shiftKey: boolean): Promise<void> {\n        const keyDownEvent = await sendKeyDownEvent(\n            this.element.textArea!,\n            keyEnter,\n            { shiftKey }\n        );\n        if (!keyDownEvent.defaultPrevented) {\n            this.element.textArea!.value += '\\n';\n            this.element.textArea!.dispatchEvent(new InputEvent('input'));\n        }\n\n        await waitForUpdatesAsync();\n    }\n}\n"]}

package/dist/esm/chat/input/types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The type of the detail associated with the `send`
+ * event on the chat input.
+ */
+export interface ChatInputSendEventDetail {
+    text: string;
+}

package/dist/esm/chat/input/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/chat/input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/chat/input/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * The type of the detail associated with the `send`\n * event on the chat input.\n */\nexport interface ChatInputSendEventDetail {\n    text: string;\n}\n"]}

package/dist/esm/chat/message/index.d.ts

@@ -20,7 +20,7 @@ export declare class ChatMessage extends FoundationElement {
      * @remarks
      * HTML Attribute: message-type
      */
-    readonly messageType: ChatMessageType;
+    messageType: ChatMessageType;
     /** @internal */
     footerActionsIsEmpty: boolean;
     /** @internal */

package/dist/esm/chat/message/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/message/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACH,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EAGX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAc1C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACI;;;;;WAKG;QAEa,gBAAW,GAAoB,eAAe,CAAC,MAAM,CAAC;QAEtE,gBAAgB;QAET,yBAAoB,GAAG,IAAI,CAAC;IAYvC,CAAC;IANU,mCAAmC,CACtC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC;IAC9C,CAAC;CACJ;AAhBmB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACkC;AAI/D;IADN,UAAU;yDACwB;AAInB;IADf,UAAU;iEACkD;AASjE,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC3C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport {\n    applyMixins,\n    DesignSystem,\n    FoundationElement,\n    StartEnd,\n    type FoundationElementDefinition,\n    type StartEndOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ChatMessageType } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message': ChatMessage;\n    }\n}\n\n/**\n * SprightChatMessage configuration options\n * @public\n */\nexport type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;\n\n/**\n * A Spright component for displaying a chat message\n */\nexport class ChatMessage extends FoundationElement {\n    /**\n     * @public\n     * The message type of this message in the chat conversation\n     * @remarks\n     * HTML Attribute: message-type\n     */\n    @attr({ attribute: 'message-type' })\n    public readonly messageType: ChatMessageType = ChatMessageType.system;\n\n    /** @internal */\n    @observable\n    public footerActionsIsEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedFooterActionsElements?: HTMLElement[];\n\n    public slottedFooterActionsElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.footerActionsIsEmpty = !next?.length;\n    }\n}\napplyMixins(ChatMessage, StartEnd);\n\nconst sprightChatMessage = ChatMessage.compose({\n    baseName: 'chat-message',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());\nexport const chatMessageTag = 'spright-chat-message';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/message/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACH,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EAGX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAc1C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACI;;;;;WAKG;QAEI,gBAAW,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE7D,gBAAgB;QAET,yBAAoB,GAAG,IAAI,CAAC;IAYvC,CAAC;IANU,mCAAmC,CACtC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC;IAC9C,CAAC;CACJ;AAhBU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACyB;AAItD;IADN,UAAU;yDACwB;AAInB;IADf,UAAU;iEACkD;AASjE,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC3C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport {\n    applyMixins,\n    DesignSystem,\n    FoundationElement,\n    StartEnd,\n    type FoundationElementDefinition,\n    type StartEndOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ChatMessageType } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message': ChatMessage;\n    }\n}\n\n/**\n * SprightChatMessage configuration options\n * @public\n */\nexport type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;\n\n/**\n * A Spright component for displaying a chat message\n */\nexport class ChatMessage extends FoundationElement {\n    /**\n     * @public\n     * The message type of this message in the chat conversation\n     * @remarks\n     * HTML Attribute: message-type\n     */\n    @attr({ attribute: 'message-type' })\n    public messageType: ChatMessageType = ChatMessageType.system;\n\n    /** @internal */\n    @observable\n    public footerActionsIsEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedFooterActionsElements?: HTMLElement[];\n\n    public slottedFooterActionsElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.footerActionsIsEmpty = !next?.length;\n    }\n}\napplyMixins(ChatMessage, StartEnd);\n\nconst sprightChatMessage = ChatMessage.compose({\n    baseName: 'chat-message',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());\nexport const chatMessageTag = 'spright-chat-message';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-components",
-  "version": "5.4.2",
+  "version": "5.5.0",
   "description": "NI Spright Components",
   "scripts": {
     "build": "npm run build-components && npm run bundle-components",
@@ -50,7 +50,8 @@
   "dependencies": {
     "@ni/fast-element": "^10.0.0",
     "@ni/fast-foundation": "^10.0.0",
-    "@ni/nimble-components": "^33.11.0",
+    "@ni/fast-web-utilities": "^10.0.0",
+    "@ni/nimble-components": "^33.11.1",
     "tslib": "^2.2.0"
   },
   "devDependencies": {