@ni/spright-components 6.14.3 → 6.15.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 +310 -134
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +5001 -4954
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +41 -0
- package/dist/custom-elements.md +1 -0
- 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 +20 -1
- 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 +2 -0
- package/dist/esm/chat/input/index.js +16 -0
- package/dist/esm/chat/input/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -134,6 +134,30 @@
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
]
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"kind": "method",
|
|
140
|
+
"name": "slottedEndElementsChanged",
|
|
141
|
+
"privacy": "public",
|
|
142
|
+
"return": {
|
|
143
|
+
"type": {
|
|
144
|
+
"text": "void"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"parameters": [
|
|
148
|
+
{
|
|
149
|
+
"name": "_prev",
|
|
150
|
+
"type": {
|
|
151
|
+
"text": "HTMLElement[] | undefined"
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"name": "next",
|
|
156
|
+
"type": {
|
|
157
|
+
"text": "HTMLElement[] | undefined"
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
]
|
|
137
161
|
}
|
|
138
162
|
],
|
|
139
163
|
"attributes": [
|
|
@@ -210,6 +234,13 @@
|
|
|
210
234
|
"description": "A Spright component for composing and sending a chat message",
|
|
211
235
|
"name": "ChatInput",
|
|
212
236
|
"members": [
|
|
237
|
+
{
|
|
238
|
+
"kind": "field",
|
|
239
|
+
"name": "fieldSizingSupported",
|
|
240
|
+
"privacy": "private",
|
|
241
|
+
"static": true,
|
|
242
|
+
"readonly": true
|
|
243
|
+
},
|
|
213
244
|
{
|
|
214
245
|
"kind": "field",
|
|
215
246
|
"name": "placeholder",
|
|
@@ -335,6 +366,16 @@
|
|
|
335
366
|
}
|
|
336
367
|
}
|
|
337
368
|
},
|
|
369
|
+
{
|
|
370
|
+
"kind": "method",
|
|
371
|
+
"name": "adjustTextAreaHeight",
|
|
372
|
+
"privacy": "private",
|
|
373
|
+
"return": {
|
|
374
|
+
"type": {
|
|
375
|
+
"text": "void"
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
},
|
|
338
379
|
{
|
|
339
380
|
"kind": "method",
|
|
340
381
|
"name": "updateScrollbarWidth",
|
package/dist/custom-elements.md
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
| `slottedInputElementsChanged` | public | | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` | |
|
|
30
30
|
| `slottedToolbarElementsChanged` | public | | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` | |
|
|
31
31
|
| `slottedStartElementsChanged` | public | | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` | |
|
|
32
|
+
| `slottedEndElementsChanged` | public | | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` | |
|
|
32
33
|
|
|
33
34
|
### Attributes
|
|
34
35
|
|
|
@@ -21,8 +21,13 @@ export declare class ChatConversation extends FoundationElement {
|
|
|
21
21
|
startEmpty: boolean;
|
|
22
22
|
/** @internal */
|
|
23
23
|
readonly slottedStartElements?: HTMLElement[];
|
|
24
|
+
/** @internal */
|
|
25
|
+
endEmpty: boolean;
|
|
26
|
+
/** @internal */
|
|
27
|
+
readonly slottedEndElements?: HTMLElement[];
|
|
24
28
|
slottedInputElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
|
|
25
29
|
slottedToolbarElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
|
|
26
30
|
slottedStartElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
|
|
31
|
+
slottedEndElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
|
|
27
32
|
}
|
|
28
33
|
export declare const chatConversationTag = "spright-chat-conversation";
|
|
@@ -17,6 +17,8 @@ export class ChatConversation extends FoundationElement {
|
|
|
17
17
|
this.toolbarEmpty = true;
|
|
18
18
|
/** @internal */
|
|
19
19
|
this.startEmpty = true;
|
|
20
|
+
/** @internal */
|
|
21
|
+
this.endEmpty = true;
|
|
20
22
|
}
|
|
21
23
|
slottedInputElementsChanged(_prev, next) {
|
|
22
24
|
this.inputEmpty = next === undefined || next.length === 0;
|
|
@@ -27,6 +29,9 @@ export class ChatConversation extends FoundationElement {
|
|
|
27
29
|
slottedStartElementsChanged(_prev, next) {
|
|
28
30
|
this.startEmpty = next === undefined || next.length === 0;
|
|
29
31
|
}
|
|
32
|
+
slottedEndElementsChanged(_prev, next) {
|
|
33
|
+
this.endEmpty = next === undefined || next.length === 0;
|
|
34
|
+
}
|
|
30
35
|
}
|
|
31
36
|
__decorate([
|
|
32
37
|
attr
|
|
@@ -49,6 +54,12 @@ __decorate([
|
|
|
49
54
|
__decorate([
|
|
50
55
|
observable
|
|
51
56
|
], ChatConversation.prototype, "slottedStartElements", void 0);
|
|
57
|
+
__decorate([
|
|
58
|
+
observable
|
|
59
|
+
], ChatConversation.prototype, "endEmpty", void 0);
|
|
60
|
+
__decorate([
|
|
61
|
+
observable
|
|
62
|
+
], ChatConversation.prototype, "slottedEndElements", void 0);
|
|
52
63
|
const sprightChatConversation = ChatConversation.compose({
|
|
53
64
|
baseName: 'chat-conversation',
|
|
54
65
|
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;QAMzB,gBAAgB;QAET,iBAAY,GAAG,IAAI,CAAC;QAM3B,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;QAM3B,gBAAgB;QAET,eAAU,GAAG,IAAI,CAAC;QAMzB,gBAAgB;QAET,aAAQ,GAAG,IAAI,CAAC;IAiC3B,CAAC;IA3BU,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;IAEM,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,yBAAyB,CAC5B,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;IAC5D,CAAC;CACJ;AA7DU;IADN,IAAI;oDACkD;AAIhD;IADN,UAAU;oDACc;AAIT;IADf,UAAU;8DAC0C;AAI9C;IADN,UAAU;sDACgB;AAIX;IADf,UAAU;gEAC4C;AAIhD;IADN,UAAU;oDACc;AAIT;IADf,UAAU;8DAC0C;AAI9C;IADN,UAAU;kDACY;AAIP;IADf,UAAU;4DACwC;AA+BvD,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 /** @internal */\n @observable\n public startEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedStartElements?: HTMLElement[];\n\n /** @internal */\n @observable\n public endEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedEndElements?: 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 public slottedStartElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.startEmpty = next === undefined || next.length === 0;\n }\n\n public slottedEndElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.endEmpty = 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,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
2
|
-
import { applicationBackgroundColor, borderWidth, sectionBackgroundImage, mediumPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
2
|
+
import { applicationBackgroundColor, borderWidth, dividerBackgroundColor, sectionBackgroundImage, mediumPadding, standardPadding, controlLabelFont, placeholderFontColor, linkFont, linkFontColor, } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
3
3
|
import { display } from '../../utilities/style/display';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('flex')}
|
|
@@ -29,6 +29,25 @@ export const styles = css `
|
|
|
29
29
|
display: none;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
.end {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-wrap: wrap;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
padding: 2px ${standardPadding};
|
|
37
|
+
border-top: ${borderWidth} solid ${dividerBackgroundColor};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.end.end-empty {
|
|
41
|
+
display: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
::slotted([slot="end"]) {
|
|
45
|
+
color: ${placeholderFontColor};
|
|
46
|
+
font: ${controlLabelFont};
|
|
47
|
+
${linkFont.cssCustomProperty}: ${controlLabelFont};
|
|
48
|
+
${linkFontColor.cssCustomProperty}: ${placeholderFontColor};
|
|
49
|
+
}
|
|
50
|
+
|
|
32
51
|
.messages {
|
|
33
52
|
flex: 1;
|
|
34
53
|
display: flex;
|
|
@@ -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,
|
|
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,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,QAAQ,EACR,aAAa,GAChB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2BzB,eAAe;sBAChB,WAAW,UAAU,sBAAsB;;;;;;;;iBAQhD,oBAAoB;gBACrB,gBAAgB;UACtB,QAAQ,CAAC,iBAAiB,KAAK,gBAAgB;UAC/C,aAAa,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;mBAS/C,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 dividerBackgroundColor,\n sectionBackgroundImage,\n mediumPadding,\n standardPadding,\n controlLabelFont,\n placeholderFontColor,\n linkFont,\n linkFontColor,\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 }\n\n :host([appearance='overlay']) {\n background: none;\n }\n\n .toolbar {\n display: block;\n }\n\n .toolbar.toolbar-empty {\n display: none;\n }\n\n .start {\n display: block;\n }\n\n .start.start-empty {\n display: none;\n }\n\n .end {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n padding: 2px ${standardPadding};\n border-top: ${borderWidth} solid ${dividerBackgroundColor};\n }\n\n .end.end-empty {\n display: none;\n }\n\n ::slotted([slot=\"end\"]) {\n color: ${placeholderFontColor};\n font: ${controlLabelFont};\n ${linkFont.cssCustomProperty}: ${controlLabelFont};\n ${linkFontColor.cssCustomProperty}: ${placeholderFontColor};\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"]}
|
|
@@ -11,5 +11,8 @@ export const template = html `
|
|
|
11
11
|
<slot name="input" ${slotted({ property: 'slottedInputElements' })}>
|
|
12
12
|
</slot>
|
|
13
13
|
</div>
|
|
14
|
+
<div class="end ${x => (x.endEmpty ? 'end-empty' : '')}">
|
|
15
|
+
<slot name="end" ${slotted({ property: 'slottedEndElements' })}></slot>
|
|
16
|
+
</div>
|
|
14
17
|
`;
|
|
15
18
|
//# sourceMappingURL=template.js.map
|
|
@@ -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;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;;oBAEtD,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;;;oBAGlD,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;;;
|
|
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;;oBAEtD,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;;;oBAGlD,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;;;kBAGpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;uBAC/B,OAAO,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;;CAEjE,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=\"start ${x => (x.startEmpty ? 'start-empty' : '')}\">\n <slot name=\"start\" ${slotted({ property: 'slottedStartElements' })}></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<div class=\"end ${x => (x.endEmpty ? 'end-empty' : '')}\">\n <slot name=\"end\" ${slotted({ property: 'slottedEndElements' })}></slot>\n</div>\n`;\n"]}
|
|
@@ -18,6 +18,7 @@ declare const ChatInput_base: (abstract new (...args: any[]) => {
|
|
|
18
18
|
* A Spright component for composing and sending a chat message
|
|
19
19
|
*/
|
|
20
20
|
export declare class ChatInput extends ChatInput_base {
|
|
21
|
+
private static readonly fieldSizingSupported;
|
|
21
22
|
placeholder?: string;
|
|
22
23
|
sendButtonLabel?: string;
|
|
23
24
|
stopButtonLabel?: string;
|
|
@@ -78,6 +79,7 @@ export declare class ChatInput extends ChatInput_base {
|
|
|
78
79
|
private resetInput;
|
|
79
80
|
private onResize;
|
|
80
81
|
private queueUpdateScrollbarWidth;
|
|
82
|
+
private adjustTextAreaHeight;
|
|
81
83
|
private updateScrollbarWidth;
|
|
82
84
|
}
|
|
83
85
|
export declare const chatInputTag = "spright-chat-input";
|
|
@@ -46,6 +46,7 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
|
|
|
46
46
|
textAreaInputHandler() {
|
|
47
47
|
this.value = this.textArea.value;
|
|
48
48
|
this.isInputEmpty = this.shouldDisableSendButton();
|
|
49
|
+
this.adjustTextAreaHeight();
|
|
49
50
|
this.queueUpdateScrollbarWidth();
|
|
50
51
|
}
|
|
51
52
|
// If a property can affect whether a scrollbar is visible, we need to
|
|
@@ -67,6 +68,7 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
|
|
|
67
68
|
if (this.textArea) {
|
|
68
69
|
this.textArea.value = this.value;
|
|
69
70
|
this.isInputEmpty = this.shouldDisableSendButton();
|
|
71
|
+
this.adjustTextAreaHeight();
|
|
70
72
|
this.queueUpdateScrollbarWidth();
|
|
71
73
|
}
|
|
72
74
|
}
|
|
@@ -77,6 +79,7 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
|
|
|
77
79
|
super.connectedCallback();
|
|
78
80
|
this.textArea.value = this.value;
|
|
79
81
|
this.isInputEmpty = this.shouldDisableSendButton();
|
|
82
|
+
this.adjustTextAreaHeight();
|
|
80
83
|
this.resizeObserver = new ResizeObserver(() => this.onResize());
|
|
81
84
|
this.resizeObserver.observe(this);
|
|
82
85
|
}
|
|
@@ -118,10 +121,12 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
|
|
|
118
121
|
this.isInputEmpty = true;
|
|
119
122
|
if (this.textArea) {
|
|
120
123
|
this.textArea.value = '';
|
|
124
|
+
this.adjustTextAreaHeight();
|
|
121
125
|
this.textArea.focus();
|
|
122
126
|
}
|
|
123
127
|
}
|
|
124
128
|
onResize() {
|
|
129
|
+
this.adjustTextAreaHeight();
|
|
125
130
|
this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
|
|
126
131
|
}
|
|
127
132
|
queueUpdateScrollbarWidth() {
|
|
@@ -133,11 +138,22 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
|
|
|
133
138
|
DOM.queueUpdate(() => this.updateScrollbarWidth());
|
|
134
139
|
}
|
|
135
140
|
}
|
|
141
|
+
// Workaround for browsers that do not support the CSS property `field-sizing: content`
|
|
142
|
+
// See https://github.com/ni/nimble/issues/2902
|
|
143
|
+
adjustTextAreaHeight() {
|
|
144
|
+
if (ChatInput.fieldSizingSupported || !this.textArea) {
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
const textArea = this.textArea;
|
|
148
|
+
textArea.style.height = 'auto';
|
|
149
|
+
textArea.style.height = `${textArea.scrollHeight}px`;
|
|
150
|
+
}
|
|
136
151
|
updateScrollbarWidth() {
|
|
137
152
|
this.updateScrollbarWidthQueued = false;
|
|
138
153
|
this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
|
|
139
154
|
}
|
|
140
155
|
}
|
|
156
|
+
ChatInput.fieldSizingSupported = CSS.supports('field-sizing', 'content');
|
|
141
157
|
__decorate([
|
|
142
158
|
attr
|
|
143
159
|
], ChatInput.prototype, "placeholder", void 0);
|
|
@@ -1 +1 @@
|
|
|
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, DOM } from '@ni/fast-element';\nimport { mixinErrorPattern } from '@ni/nimble-components/dist/esm/patterns/error/types';\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 mixinErrorPattern(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 @attr({ attribute: 'send-disabled', mode: 'boolean' })\n public sendDisabled = false;\n\n /**\n * @internal\n */\n @observable\n public textArea?: HTMLTextAreaElement;\n\n /**\n * Tracks whether the send button should be disabled based on input value\n * @internal\n */\n @observable\n public isInputEmpty = true;\n\n /**\n * The width of the vertical scrollbar, if displayed.\n * @internal\n */\n @observable\n public scrollbarWidth = -1;\n\n private resizeObserver?: ResizeObserver;\n private updateScrollbarWidthQueued = false;\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.isInputEmpty = this.shouldDisableSendButton();\n this.queueUpdateScrollbarWidth();\n }\n\n // If a property can affect whether a scrollbar is visible, we need to\n // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n // properties that affect size (e.g. height, width, cols, rows), because\n // we already have a ResizeObserver handling those changes. Also,\n // a change to errorVisible cannot cause scrollbar visibility to change,\n // because we always reserve space for the error icon.\n\n /**\n * @internal\n */\n public placeholderChanged(): void {\n this.queueUpdateScrollbarWidth();\n }\n\n /**\n * @internal\n */\n public valueChanged(): void {\n if (this.textArea) {\n this.textArea.value = this.value;\n this.isInputEmpty = this.shouldDisableSendButton();\n this.queueUpdateScrollbarWidth();\n }\n }\n\n /**\n * @internal\n */\n public override connectedCallback(): void {\n super.connectedCallback();\n this.textArea!.value = this.value;\n this.isInputEmpty = this.shouldDisableSendButton();\n this.resizeObserver = new ResizeObserver(() => this.onResize());\n this.resizeObserver.observe(this);\n }\n\n /**\n * @internal\n */\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\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.isInputEmpty = true;\n if (this.textArea) {\n this.textArea.value = '';\n this.textArea.focus();\n }\n }\n\n private onResize(): void {\n this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n }\n\n private queueUpdateScrollbarWidth(): void {\n if (!this.$fastController.isConnected) {\n return;\n }\n if (!this.updateScrollbarWidthQueued) {\n this.updateScrollbarWidthQueued = true;\n DOM.queueUpdate(() => this.updateScrollbarWidth());\n }\n }\n\n private updateScrollbarWidth(): void {\n this.updateScrollbarWidthQueued = false;\n this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\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
|
+
{"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, DOM } from '@ni/fast-element';\nimport { mixinErrorPattern } from '@ni/nimble-components/dist/esm/patterns/error/types';\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 mixinErrorPattern(FoundationElement) {\n private static readonly fieldSizingSupported = CSS.supports(\n 'field-sizing',\n 'content'\n );\n\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 @attr({ attribute: 'send-disabled', mode: 'boolean' })\n public sendDisabled = false;\n\n /**\n * @internal\n */\n @observable\n public textArea?: HTMLTextAreaElement;\n\n /**\n * Tracks whether the send button should be disabled based on input value\n * @internal\n */\n @observable\n public isInputEmpty = true;\n\n /**\n * The width of the vertical scrollbar, if displayed.\n * @internal\n */\n @observable\n public scrollbarWidth = -1;\n\n private resizeObserver?: ResizeObserver;\n private updateScrollbarWidthQueued = false;\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.isInputEmpty = this.shouldDisableSendButton();\n this.adjustTextAreaHeight();\n this.queueUpdateScrollbarWidth();\n }\n\n // If a property can affect whether a scrollbar is visible, we need to\n // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n // properties that affect size (e.g. height, width, cols, rows), because\n // we already have a ResizeObserver handling those changes. Also,\n // a change to errorVisible cannot cause scrollbar visibility to change,\n // because we always reserve space for the error icon.\n\n /**\n * @internal\n */\n public placeholderChanged(): void {\n this.queueUpdateScrollbarWidth();\n }\n\n /**\n * @internal\n */\n public valueChanged(): void {\n if (this.textArea) {\n this.textArea.value = this.value;\n this.isInputEmpty = this.shouldDisableSendButton();\n this.adjustTextAreaHeight();\n this.queueUpdateScrollbarWidth();\n }\n }\n\n /**\n * @internal\n */\n public override connectedCallback(): void {\n super.connectedCallback();\n this.textArea!.value = this.value;\n this.isInputEmpty = this.shouldDisableSendButton();\n this.adjustTextAreaHeight();\n this.resizeObserver = new ResizeObserver(() => this.onResize());\n this.resizeObserver.observe(this);\n }\n\n /**\n * @internal\n */\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\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.isInputEmpty = true;\n if (this.textArea) {\n this.textArea.value = '';\n this.adjustTextAreaHeight();\n this.textArea.focus();\n }\n }\n\n private onResize(): void {\n this.adjustTextAreaHeight();\n this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n }\n\n private queueUpdateScrollbarWidth(): void {\n if (!this.$fastController.isConnected) {\n return;\n }\n if (!this.updateScrollbarWidthQueued) {\n this.updateScrollbarWidthQueued = true;\n DOM.queueUpdate(() => this.updateScrollbarWidth());\n }\n }\n\n // Workaround for browsers that do not support the CSS property `field-sizing: content`\n // See https://github.com/ni/nimble/issues/2902\n private adjustTextAreaHeight(): void {\n if (ChatInput.fieldSizingSupported || !this.textArea) {\n return;\n }\n const textArea = this.textArea;\n textArea.style.height = 'auto';\n textArea.style.height = `${textArea.scrollHeight}px`;\n }\n\n private updateScrollbarWidth(): void {\n this.updateScrollbarWidthQueued = false;\n this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\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"]}
|