@ni/spright-components 6.7.1 → 6.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +52 -9
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3570 -3558
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/chat/conversation/index.d.ts +5 -0
- package/dist/esm/chat/conversation/index.js +11 -0
- package/dist/esm/chat/conversation/index.js.map +1 -1
- package/dist/esm/chat/conversation/styles.js +8 -0
- package/dist/esm/chat/conversation/styles.js.map +1 -1
- package/dist/esm/chat/conversation/template.js +3 -0
- package/dist/esm/chat/conversation/template.js.map +1 -1
- package/dist/esm/chat/input/index.d.ts +6 -0
- package/dist/esm/chat/input/index.js +20 -0
- package/dist/esm/chat/input/index.js.map +1 -1
- package/dist/esm/chat/input/styles.js +1 -1
- package/dist/esm/chat/input/styles.js.map +1 -1
- package/dist/esm/chat/input/template.js +10 -9
- package/dist/esm/chat/input/template.js.map +1 -1
- package/dist/esm/chat/input/testing/chat-input.pageobject.d.ts +9 -5
- package/dist/esm/chat/input/testing/chat-input.pageobject.js +30 -12
- package/dist/esm/chat/input/testing/chat-input.pageobject.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,11 @@ export declare class ChatConversation extends FoundationElement {
|
|
|
13
13
|
inputEmpty: boolean;
|
|
14
14
|
/** @internal */
|
|
15
15
|
readonly slottedInputElements?: HTMLElement[];
|
|
16
|
+
/** @internal */
|
|
17
|
+
toolbarEmpty: boolean;
|
|
18
|
+
/** @internal */
|
|
19
|
+
readonly slottedToolbarElements?: HTMLElement[];
|
|
16
20
|
slottedInputElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
|
|
21
|
+
slottedToolbarElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
|
|
17
22
|
}
|
|
18
23
|
export declare const chatConversationTag = "spright-chat-conversation";
|
|
@@ -13,10 +13,15 @@ export class ChatConversation extends FoundationElement {
|
|
|
13
13
|
this.appearance = ChatConversationAppearance.default;
|
|
14
14
|
/** @internal */
|
|
15
15
|
this.inputEmpty = true;
|
|
16
|
+
/** @internal */
|
|
17
|
+
this.toolbarEmpty = true;
|
|
16
18
|
}
|
|
17
19
|
slottedInputElementsChanged(_prev, next) {
|
|
18
20
|
this.inputEmpty = next === undefined || next.length === 0;
|
|
19
21
|
}
|
|
22
|
+
slottedToolbarElementsChanged(_prev, next) {
|
|
23
|
+
this.toolbarEmpty = next === undefined || next.length === 0;
|
|
24
|
+
}
|
|
20
25
|
}
|
|
21
26
|
__decorate([
|
|
22
27
|
attr
|
|
@@ -27,6 +32,12 @@ __decorate([
|
|
|
27
32
|
__decorate([
|
|
28
33
|
observable
|
|
29
34
|
], ChatConversation.prototype, "slottedInputElements", void 0);
|
|
35
|
+
__decorate([
|
|
36
|
+
observable
|
|
37
|
+
], ChatConversation.prototype, "toolbarEmpty", void 0);
|
|
38
|
+
__decorate([
|
|
39
|
+
observable
|
|
40
|
+
], ChatConversation.prototype, "slottedToolbarElements", void 0);
|
|
30
41
|
const sprightChatConversation = ChatConversation.compose({
|
|
31
42
|
baseName: 'chat-conversation',
|
|
32
43
|
template,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/conversation/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAQrD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,iBAAiB;IAAvD;;QAEW,eAAU,GAAG,0BAA0B,CAAC,OAAO,CAAC;QAEvD,gBAAgB;QAET,eAAU,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/conversation/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAQrD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,iBAAiB;IAAvD;;QAEW,eAAU,GAAG,0BAA0B,CAAC,OAAO,CAAC;QAEvD,gBAAgB;QAET,eAAU,GAAG,IAAI,CAAC;QAMzB,gBAAgB;QAET,iBAAY,GAAG,IAAI,CAAC;IAmB/B,CAAC;IAbU,2BAA2B,CAC9B,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,UAAU,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;IAC9D,CAAC;IAEM,6BAA6B,CAChC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,YAAY,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;IAChE,CAAC;CACJ;AA/BU;IADN,IAAI;oDACkD;AAIhD;IADN,UAAU;oDACc;AAIT;IADf,UAAU;8DAC0C;AAI9C;IADN,UAAU;sDACgB;AAIX;IADf,UAAU;gEAC4C;AAiB3D,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,OAAO,CAAC;IACrD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,SAAS,CAAC;KACrB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,mBAAmB,GAAG,2BAA2B,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { attr, observable } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ChatConversationAppearance } from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'spright-chat-conversation': ChatConversation;\n }\n}\n\n/**\n * A Spright component for displaying a series of chat messages\n */\nexport class ChatConversation extends FoundationElement {\n @attr\n public appearance = ChatConversationAppearance.default;\n\n /** @internal */\n @observable\n public inputEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedInputElements?: HTMLElement[];\n\n /** @internal */\n @observable\n public toolbarEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedToolbarElements?: HTMLElement[];\n\n public slottedInputElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.inputEmpty = next === undefined || next.length === 0;\n }\n\n public slottedToolbarElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.toolbarEmpty = next === undefined || next.length === 0;\n }\n}\n\nconst sprightChatConversation = ChatConversation.compose({\n baseName: 'chat-conversation',\n template,\n styles\n});\n\nDesignSystem.getOrCreate()\n .withPrefix('spright')\n .register(sprightChatConversation());\nexport const chatConversationTag = 'spright-chat-conversation';\n"]}
|
|
@@ -1 +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,WAAW,EACX,sBAAsB,EACtB,aAAa,EACb,eAAe,EAClB,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;;;;sBAIC,0BAA0B;kBAC9B,WAAW,UAAU,0BAA0B
|
|
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,WAAW,EACX,sBAAsB,EACtB,aAAa,EACb,eAAe,EAClB,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;;;;sBAIC,0BAA0B;kBAC9B,WAAW,UAAU,0BAA0B;;;;;;;;;;;;;;;;;;;;;;mBAsB9C,aAAa,IAAI,eAAe,IAAI,aAAa;cACtD,eAAe;sBACP,sBAAsB;;;;;;;;;mBASzB,WAAW,IAAI,eAAe,IAAI,eAAe;cACtD,eAAe;;;;uBAIN,eAAe,QAAQ,eAAe;;CAE5D,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n applicationBackgroundColor,\n borderWidth,\n sectionBackgroundImage,\n mediumPadding,\n standardPadding\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 background: ${applicationBackgroundColor};\n border: ${borderWidth} solid ${applicationBackgroundColor};\n }\n\n :host([appearance='overlay']) {\n background: none;\n border-color: transparent;\n }\n\n .toolbar {\n display: block;\n }\n\n .toolbar.toolbar-empty {\n display: none;\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} ${standardPadding} ${mediumPadding}\n ${standardPadding};\n background: ${sectionBackgroundImage};\n overflow-y: auto;\n }\n\n :host([appearance='overlay']) .messages {\n background: none;\n }\n\n .input {\n padding: ${borderWidth} ${standardPadding} ${standardPadding}\n ${standardPadding};\n }\n\n .input.input-empty {\n padding: 0px ${standardPadding} 0px ${standardPadding};\n }\n`;\n"]}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { html, slotted } from '@ni/fast-element';
|
|
2
2
|
export const template = html `
|
|
3
|
+
<div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
|
|
4
|
+
<slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
|
|
5
|
+
</div>
|
|
3
6
|
<div class="messages"><slot></slot></div>
|
|
4
7
|
<div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
|
|
5
8
|
<slot name="input" ${slotted({ property: 'slottedInputElements' })}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/conversation/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAkB
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/conversation/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAkB;sBACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;2BACvC,OAAO,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC;;;oBAGtD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;yBACnC,OAAO,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;;;CAGrE,CAAC","sourcesContent":["import { html, slotted } from '@ni/fast-element';\nimport type { ChatConversation } from '.';\n\nexport const template = html<ChatConversation>`\n<div class=\"toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}\">\n <slot name=\"toolbar\" ${slotted({ property: 'slottedToolbarElements' })}></slot>\n</div>\n<div class=\"messages\"><slot></slot></div>\n<div class=\"input ${x => (x.inputEmpty ? 'input-empty' : '')}\">\n <slot name=\"input\" ${slotted({ property: 'slottedInputElements' })}>\n </slot>\n</div>\n`;\n"]}
|
|
@@ -10,9 +10,11 @@ declare global {
|
|
|
10
10
|
export declare class ChatInput extends FoundationElement {
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
sendButtonLabel?: string;
|
|
13
|
+
stopButtonLabel?: string;
|
|
13
14
|
value: string;
|
|
14
15
|
tabIndex: number;
|
|
15
16
|
maxLength?: number;
|
|
17
|
+
processing: boolean;
|
|
16
18
|
/**
|
|
17
19
|
* @internal
|
|
18
20
|
*/
|
|
@@ -41,6 +43,10 @@ export declare class ChatInput extends FoundationElement {
|
|
|
41
43
|
* @internal
|
|
42
44
|
*/
|
|
43
45
|
sendButtonClickHandler(): void;
|
|
46
|
+
/**
|
|
47
|
+
* @internal
|
|
48
|
+
*/
|
|
49
|
+
stopButtonClickHandler(): void;
|
|
44
50
|
private shouldDisableSendButton;
|
|
45
51
|
private resetInput;
|
|
46
52
|
}
|
|
@@ -12,6 +12,7 @@ export class ChatInput extends FoundationElement {
|
|
|
12
12
|
super(...arguments);
|
|
13
13
|
this.value = '';
|
|
14
14
|
this.maxLength = -1;
|
|
15
|
+
this.processing = false;
|
|
15
16
|
/**
|
|
16
17
|
* @internal
|
|
17
18
|
*/
|
|
@@ -22,6 +23,9 @@ export class ChatInput extends FoundationElement {
|
|
|
22
23
|
*/
|
|
23
24
|
textAreaKeydownHandler(e) {
|
|
24
25
|
if (e.key === keyEnter && !e.shiftKey) {
|
|
26
|
+
if (this.processing) {
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
25
29
|
this.sendButtonClickHandler();
|
|
26
30
|
return false;
|
|
27
31
|
}
|
|
@@ -64,6 +68,16 @@ export class ChatInput extends FoundationElement {
|
|
|
64
68
|
this.resetInput();
|
|
65
69
|
this.$emit('send', eventDetail);
|
|
66
70
|
}
|
|
71
|
+
/**
|
|
72
|
+
* @internal
|
|
73
|
+
*/
|
|
74
|
+
stopButtonClickHandler() {
|
|
75
|
+
if (!this.processing) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
this.$emit('stop');
|
|
79
|
+
this.textArea?.blur();
|
|
80
|
+
}
|
|
67
81
|
shouldDisableSendButton() {
|
|
68
82
|
return this.textArea.value.length === 0;
|
|
69
83
|
}
|
|
@@ -82,6 +96,9 @@ __decorate([
|
|
|
82
96
|
__decorate([
|
|
83
97
|
attr({ attribute: 'send-button-label' })
|
|
84
98
|
], ChatInput.prototype, "sendButtonLabel", void 0);
|
|
99
|
+
__decorate([
|
|
100
|
+
attr({ attribute: 'stop-button-label' })
|
|
101
|
+
], ChatInput.prototype, "stopButtonLabel", void 0);
|
|
85
102
|
__decorate([
|
|
86
103
|
attr
|
|
87
104
|
], ChatInput.prototype, "value", void 0);
|
|
@@ -91,6 +108,9 @@ __decorate([
|
|
|
91
108
|
__decorate([
|
|
92
109
|
attr({ attribute: 'maxlength', converter: nullableNumberConverter })
|
|
93
110
|
], ChatInput.prototype, "maxLength", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
attr({ attribute: 'processing', mode: 'boolean' })
|
|
113
|
+
], ChatInput.prototype, "processing", void 0);
|
|
94
114
|
__decorate([
|
|
95
115
|
observable
|
|
96
116
|
], ChatInput.prototype, "textArea", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/input/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB;IAAhD;;
|
|
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, nullableNumberConverter, 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({ attribute: 'stop-button-label' })\n public stopButtonLabel?: string;\n\n @attr\n public value = '';\n\n @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n public override tabIndex!: number;\n\n @attr({ attribute: 'maxlength', converter: nullableNumberConverter })\n public maxLength?: number = -1;\n\n @attr({ attribute: 'processing', mode: 'boolean' })\n public processing = false;\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 * @internal\n */\n public textAreaKeydownHandler(e: KeyboardEvent): boolean {\n if (e.key === keyEnter && !e.shiftKey) {\n if (this.processing) {\n return false;\n }\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.resetInput();\n this.$emit('send', eventDetail);\n }\n\n /**\n * @internal\n */\n public stopButtonClickHandler(): void {\n if (!this.processing) {\n return;\n }\n this.$emit('stop');\n this.textArea?.blur();\n }\n\n private shouldDisableSendButton(): boolean {\n return this.textArea!.value.length === 0;\n }\n\n private 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\nconst sprightChatInput = ChatInput.compose({\n baseName: 'chat-input',\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());\nexport const chatInputTag = 'spright-chat-input';\n"]}
|
|
@@ -1 +1 @@
|
|
|
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,EAChB,gBAAgB,EAChB,UAAU,EACb,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;;;;;;mDAM8B,WAAW;;;;;;;;;;4BAUlC,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;sBACjC,mBAAmB;;;;;;4BAMb,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;4BAKV,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;gBAU/B,QAAQ;iBACP,aAAa;;;;;;qCAMO,aAAa;;;;;mBAK/B,aAAa;;;;iBAIf,qBAAqB;;;;;;kBAMpB,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 borderHoverColor,\n smallDelay\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 outline: none;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n .container {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n height: 100%;\n\n background-color: ${applicationBackgroundColor};\n border: ${borderWidth} solid ${popupBorderColor};\n box-shadow: ${elevation2BoxShadow};\n }\n\n .container::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n align-self: center;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:hover) .container::after {\n width: 100%;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:focus-within) .container {\n border-bottom-color: ${borderHoverColor};\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n textarea {\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 .
|
|
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,EAChB,gBAAgB,EAChB,UAAU,EACb,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;;;;;;mDAM8B,WAAW;;;;;;;;;;4BAUlC,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;sBACjC,mBAAmB;;;;;;4BAMb,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;4BAKV,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;gBAU/B,QAAQ;iBACP,aAAa;;;;;;qCAMO,aAAa;;;;;mBAK/B,aAAa;;;;iBAIf,qBAAqB;;;;;;kBAMpB,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 borderHoverColor,\n smallDelay\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 outline: none;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n .container {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n height: 100%;\n\n background-color: ${applicationBackgroundColor};\n border: ${borderWidth} solid ${popupBorderColor};\n box-shadow: ${elevation2BoxShadow};\n }\n\n .container::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n align-self: center;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:hover) .container::after {\n width: 100%;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:focus-within) .container {\n border-bottom-color: ${borderHoverColor};\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n textarea {\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 .action-button {\n align-self: flex-end;\n width: 80px;\n margin: ${mediumPadding};\n }\n`;\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { html, ref } from '@ni/fast-element';
|
|
1
|
+
import { html, ref, when } from '@ni/fast-element';
|
|
2
2
|
import { buttonTag } from '@ni/nimble-components/dist/esm/button';
|
|
3
3
|
import { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';
|
|
4
|
+
import { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';
|
|
4
5
|
export const template = html `
|
|
5
6
|
<div class="container">
|
|
6
7
|
<textarea
|
|
@@ -13,17 +14,17 @@ export const template = html `
|
|
|
13
14
|
@input="${x => x.textAreaInputHandler()}"
|
|
14
15
|
></textarea>
|
|
15
16
|
<${buttonTag}
|
|
16
|
-
class="
|
|
17
|
+
class="action-button"
|
|
17
18
|
appearance="block"
|
|
18
|
-
appearance-variant="accent"
|
|
19
|
-
?disabled=${x => x.disableSendButton}
|
|
20
|
-
@click=${x => x.sendButtonClickHandler()}
|
|
19
|
+
appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
|
|
20
|
+
?disabled=${x => (x.processing ? false : x.disableSendButton)}
|
|
21
|
+
@click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}
|
|
21
22
|
tabindex="${x => x.tabIndex}"
|
|
22
|
-
title=${x => x.sendButtonLabel}
|
|
23
|
+
title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
|
|
23
24
|
content-hidden
|
|
24
25
|
>
|
|
25
|
-
${x => x.sendButtonLabel}
|
|
26
|
-
|
|
27
|
-
</${buttonTag}>
|
|
26
|
+
${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
|
|
27
|
+
${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
|
|
28
|
+
</${buttonTag}>
|
|
28
29
|
</div>`;
|
|
29
30
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/input/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAGrF,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,CAAC,CAAC,QAAQ;qBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;oBACjB,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;;;8BAGc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;oBACpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;iBACpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC;oBAC1E,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;;;UAGjE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;UAC3D,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EACjB,IAAI,CAAA,IAAI,iBAAiB,mBAAmB,iBAAiB,GAAG,EAChE,IAAI,CAAA,IAAI,iBAAiB,mBAAmB,iBAAiB,GAAG,CACnE;QACD,SAAS;OACV,CAAC","sourcesContent":["import { html, ref, when } 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 { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';\nimport type { ChatInput } from '.';\n\nexport const template = html<ChatInput>`\n<div class=\"container\">\n <textarea\n ${ref('textArea')}\n placeholder=\"${x => x.placeholder}\"\n rows=\"1\"\n tabindex=\"${x => x.tabIndex}\"\n maxlength=\"${x => x.maxLength}\"\n @keydown=\"${(x, c) => x.textAreaKeydownHandler(c.event as KeyboardEvent)}\"\n @input=\"${x => x.textAreaInputHandler()}\"\n ></textarea>\n <${buttonTag}\n class=\"action-button\"\n appearance=\"block\"\n appearance-variant=\"${x => (x.processing ? 'primary' : 'accent')}\"\n ?disabled=${x => (x.processing ? false : x.disableSendButton)}\n @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}\n tabindex=\"${x => x.tabIndex}\"\n title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}\n content-hidden\n >\n ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}\n ${when(\n x => x.processing,\n html`<${iconStopSquareTag} slot=\"start\"></${iconStopSquareTag}>`,\n html`<${iconPaperPlaneTag} slot=\"start\"></${iconPaperPlaneTag}>`\n )}\n </${buttonTag}>\n</div>`;\n"]}
|
|
@@ -6,12 +6,16 @@ import type { ChatInput } from '..';
|
|
|
6
6
|
export declare class ChatInputPageObject {
|
|
7
7
|
protected readonly element: ChatInput;
|
|
8
8
|
constructor(element: ChatInput);
|
|
9
|
-
|
|
9
|
+
isButtonEnabled(): boolean;
|
|
10
|
+
isProcessing(): boolean;
|
|
10
11
|
isTextAreaFocused(): boolean;
|
|
11
12
|
clickSendButton(): void;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
clickStopButton(): void;
|
|
14
|
+
getButtonTitle(): string;
|
|
15
|
+
buttonHasSendIcon(): boolean;
|
|
16
|
+
buttonHasStopIcon(): boolean;
|
|
17
|
+
getButtonTextContent(): string;
|
|
18
|
+
getButtonTabIndex(): string | null;
|
|
15
19
|
textAreaHasFocus(): boolean;
|
|
16
20
|
getTextAreaTabIndex(): string | null;
|
|
17
21
|
getTextAreaMaxLength(): number | null;
|
|
@@ -20,6 +24,6 @@ export declare class ChatInputPageObject {
|
|
|
20
24
|
setText(text: string): void;
|
|
21
25
|
pressEnterKey(): Promise<void>;
|
|
22
26
|
pressShiftEnterKey(): Promise<void>;
|
|
23
|
-
private
|
|
27
|
+
private getActionButton;
|
|
24
28
|
private sendEnterKeyEvents;
|
|
25
29
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { keyEnter } from '@ni/fast-web-utilities';
|
|
2
2
|
import { Button } from '@ni/nimble-components/dist/esm/button';
|
|
3
|
+
import { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';
|
|
4
|
+
import { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';
|
|
3
5
|
import { processUpdates, waitForUpdatesAsync } from '@ni/nimble-components/dist/esm/testing/async-helpers';
|
|
4
6
|
import { sendKeyDownEvent } from '@ni/nimble-components/dist/esm/utilities/testing/component';
|
|
5
7
|
/**
|
|
@@ -10,23 +12,39 @@ export class ChatInputPageObject {
|
|
|
10
12
|
constructor(element) {
|
|
11
13
|
this.element = element;
|
|
12
14
|
}
|
|
13
|
-
|
|
14
|
-
return !this.
|
|
15
|
+
isButtonEnabled() {
|
|
16
|
+
return !this.getActionButton().disabled;
|
|
17
|
+
}
|
|
18
|
+
isProcessing() {
|
|
19
|
+
return this.element.processing;
|
|
15
20
|
}
|
|
16
21
|
isTextAreaFocused() {
|
|
17
22
|
return this.element.textArea === this.element.shadowRoot?.activeElement;
|
|
18
23
|
}
|
|
19
24
|
clickSendButton() {
|
|
20
|
-
this.
|
|
25
|
+
if (!this.element.processing) {
|
|
26
|
+
this.getActionButton().click();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
clickStopButton() {
|
|
30
|
+
if (this.element.processing) {
|
|
31
|
+
this.getActionButton().click();
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
getButtonTitle() {
|
|
35
|
+
return this.getActionButton().title;
|
|
36
|
+
}
|
|
37
|
+
buttonHasSendIcon() {
|
|
38
|
+
return this.getActionButton().querySelector(iconPaperPlaneTag) !== null;
|
|
21
39
|
}
|
|
22
|
-
|
|
23
|
-
return this.
|
|
40
|
+
buttonHasStopIcon() {
|
|
41
|
+
return this.getActionButton().querySelector(iconStopSquareTag) !== null;
|
|
24
42
|
}
|
|
25
|
-
|
|
26
|
-
return this.
|
|
43
|
+
getButtonTextContent() {
|
|
44
|
+
return this.getActionButton().textContent?.trim() ?? '';
|
|
27
45
|
}
|
|
28
|
-
|
|
29
|
-
return this.
|
|
46
|
+
getButtonTabIndex() {
|
|
47
|
+
return this.getActionButton().getAttribute('tabindex');
|
|
30
48
|
}
|
|
31
49
|
textAreaHasFocus() {
|
|
32
50
|
return (document.activeElement === this.element
|
|
@@ -61,9 +79,9 @@ export class ChatInputPageObject {
|
|
|
61
79
|
this.element.textArea.focus();
|
|
62
80
|
await this.sendEnterKeyEvents(true);
|
|
63
81
|
}
|
|
64
|
-
|
|
65
|
-
const
|
|
66
|
-
return
|
|
82
|
+
getActionButton() {
|
|
83
|
+
const actionButton = this.element.shadowRoot.querySelector('.action-button');
|
|
84
|
+
return actionButton;
|
|
67
85
|
}
|
|
68
86
|
async sendEnterKeyEvents(shiftKey) {
|
|
69
87
|
const keyDownEvent = await sendKeyDownEvent(this.element.textArea, keyEnter, { shiftKey });
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
1
|
+
{"version":3,"file":"chat-input.pageobject.js","sourceRoot":"","sources":["../../../../../src/chat/input/testing/chat-input.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import { keyEnter } from '@ni/fast-web-utilities';\nimport { Button } from '@ni/nimble-components/dist/esm/button';\nimport { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';\nimport { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';\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 isButtonEnabled(): boolean {\n return !this.getActionButton().disabled;\n }\n\n public isProcessing(): boolean {\n return this.element.processing;\n }\n\n public isTextAreaFocused(): boolean {\n return this.element.textArea === this.element.shadowRoot?.activeElement;\n }\n\n public clickSendButton(): void {\n if (!this.element.processing) {\n this.getActionButton().click();\n }\n }\n\n public clickStopButton(): void {\n if (this.element.processing) {\n this.getActionButton().click();\n }\n }\n\n public getButtonTitle(): string {\n return this.getActionButton().title;\n }\n\n public buttonHasSendIcon(): boolean {\n return this.getActionButton().querySelector(iconPaperPlaneTag) !== null;\n }\n\n public buttonHasStopIcon(): boolean {\n return this.getActionButton().querySelector(iconStopSquareTag) !== null;\n }\n\n public getButtonTextContent(): string {\n return this.getActionButton().textContent?.trim() ?? '';\n }\n\n public getButtonTabIndex(): string | null {\n return this.getActionButton().getAttribute('tabindex');\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 getTextAreaTabIndex(): string | null {\n return this.element.textArea!.getAttribute('tabindex');\n }\n\n public getTextAreaMaxLength(): number | null {\n return this.element.textArea!.maxLength;\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 getActionButton(): Button {\n const actionButton = this.element.shadowRoot!.querySelector<Button>('.action-button')!;\n return actionButton;\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"]}
|