@ni/spright-components 6.24.0 → 7.1.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 +69 -15
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +95 -86
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +165 -30
- package/dist/custom-elements.md +50 -20
- package/dist/esm/all-components.d.ts +1 -0
- package/dist/esm/all-components.js +1 -0
- package/dist/esm/all-components.js.map +1 -1
- package/dist/esm/chat/input/index.d.ts +0 -2
- package/dist/esm/chat/input/index.js +0 -6
- package/dist/esm/chat/input/index.js.map +1 -1
- package/dist/esm/chat/input/template.js +3 -2
- package/dist/esm/chat/input/template.js.map +1 -1
- package/dist/esm/chat/message/welcome/index.d.ts +5 -0
- package/dist/esm/chat/message/welcome/index.js +15 -1
- package/dist/esm/chat/message/welcome/index.js.map +1 -1
- package/dist/esm/chat/message/welcome/styles.js +6 -1
- package/dist/esm/chat/message/welcome/styles.js.map +1 -1
- package/dist/esm/chat/message/welcome/template.js +4 -4
- package/dist/esm/chat/message/welcome/template.js.map +1 -1
- package/dist/esm/chat/message/welcome/testing/chat-message-welcome.pageobject.d.ts +3 -0
- package/dist/esm/chat/message/welcome/testing/chat-message-welcome.pageobject.js +15 -1
- package/dist/esm/chat/message/welcome/testing/chat-message-welcome.pageobject.js.map +1 -1
- package/dist/esm/label-provider/chat/index.d.ts +23 -0
- package/dist/esm/label-provider/chat/index.js +34 -0
- package/dist/esm/label-provider/chat/index.js.map +1 -0
- package/dist/esm/label-provider/chat/label-token-defaults.d.ts +6 -0
- package/dist/esm/label-provider/chat/label-token-defaults.js +5 -0
- package/dist/esm/label-provider/chat/label-token-defaults.js.map +1 -0
- package/dist/esm/label-provider/chat/label-tokens.d.ts +3 -0
- package/dist/esm/label-provider/chat/label-tokens.js +11 -0
- package/dist/esm/label-provider/chat/label-tokens.js.map +1 -0
- package/package.json +1 -1
|
@@ -293,22 +293,6 @@
|
|
|
293
293
|
},
|
|
294
294
|
"privacy": "public"
|
|
295
295
|
},
|
|
296
|
-
{
|
|
297
|
-
"kind": "field",
|
|
298
|
-
"name": "sendButtonLabel",
|
|
299
|
-
"type": {
|
|
300
|
-
"text": "string | undefined"
|
|
301
|
-
},
|
|
302
|
-
"privacy": "public"
|
|
303
|
-
},
|
|
304
|
-
{
|
|
305
|
-
"kind": "field",
|
|
306
|
-
"name": "stopButtonLabel",
|
|
307
|
-
"type": {
|
|
308
|
-
"text": "string | undefined"
|
|
309
|
-
},
|
|
310
|
-
"privacy": "public"
|
|
311
|
-
},
|
|
312
296
|
{
|
|
313
297
|
"kind": "field",
|
|
314
298
|
"name": "value",
|
|
@@ -493,20 +477,6 @@
|
|
|
493
477
|
},
|
|
494
478
|
"fieldName": "placeholder"
|
|
495
479
|
},
|
|
496
|
-
{
|
|
497
|
-
"name": "send-button-label",
|
|
498
|
-
"type": {
|
|
499
|
-
"text": "string | undefined"
|
|
500
|
-
},
|
|
501
|
-
"fieldName": "sendButtonLabel"
|
|
502
|
-
},
|
|
503
|
-
{
|
|
504
|
-
"name": "stop-button-label",
|
|
505
|
-
"type": {
|
|
506
|
-
"text": "string | undefined"
|
|
507
|
-
},
|
|
508
|
-
"fieldName": "stopButtonLabel"
|
|
509
|
-
},
|
|
510
480
|
{
|
|
511
481
|
"name": "value",
|
|
512
482
|
"type": {
|
|
@@ -704,6 +674,147 @@
|
|
|
704
674
|
}
|
|
705
675
|
]
|
|
706
676
|
},
|
|
677
|
+
{
|
|
678
|
+
"kind": "javascript-module",
|
|
679
|
+
"path": "src/label-provider/chat/index.ts",
|
|
680
|
+
"declarations": [
|
|
681
|
+
{
|
|
682
|
+
"kind": "class",
|
|
683
|
+
"description": "Label provider for Spright chat components",
|
|
684
|
+
"name": "LabelProviderChat",
|
|
685
|
+
"members": [
|
|
686
|
+
{
|
|
687
|
+
"kind": "field",
|
|
688
|
+
"name": "send",
|
|
689
|
+
"type": {
|
|
690
|
+
"text": "string | undefined"
|
|
691
|
+
},
|
|
692
|
+
"privacy": "public"
|
|
693
|
+
},
|
|
694
|
+
{
|
|
695
|
+
"kind": "field",
|
|
696
|
+
"name": "stop",
|
|
697
|
+
"type": {
|
|
698
|
+
"text": "string | undefined"
|
|
699
|
+
},
|
|
700
|
+
"privacy": "public"
|
|
701
|
+
},
|
|
702
|
+
{
|
|
703
|
+
"kind": "field",
|
|
704
|
+
"name": "supportedLabels",
|
|
705
|
+
"privacy": "protected",
|
|
706
|
+
"readonly": true,
|
|
707
|
+
"default": "{ send: chatSendLabel, stop: chatStopLabel }",
|
|
708
|
+
"type": {
|
|
709
|
+
"text": "{\n send: chatSendLabel,\n stop: chatStopLabel\n}"
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
],
|
|
713
|
+
"attributes": [
|
|
714
|
+
{
|
|
715
|
+
"name": "send",
|
|
716
|
+
"type": {
|
|
717
|
+
"text": "string | undefined"
|
|
718
|
+
},
|
|
719
|
+
"fieldName": "send"
|
|
720
|
+
},
|
|
721
|
+
{
|
|
722
|
+
"name": "stop",
|
|
723
|
+
"type": {
|
|
724
|
+
"text": "string | undefined"
|
|
725
|
+
},
|
|
726
|
+
"fieldName": "stop"
|
|
727
|
+
}
|
|
728
|
+
],
|
|
729
|
+
"superclass": {
|
|
730
|
+
"name": "LabelProviderBase",
|
|
731
|
+
"package": "@ni/nimble-components/dist/esm/label-provider/base"
|
|
732
|
+
}
|
|
733
|
+
},
|
|
734
|
+
{
|
|
735
|
+
"kind": "variable",
|
|
736
|
+
"name": "labelProviderChatTag",
|
|
737
|
+
"type": {
|
|
738
|
+
"text": "string"
|
|
739
|
+
},
|
|
740
|
+
"default": "'spright-label-provider-chat'"
|
|
741
|
+
}
|
|
742
|
+
],
|
|
743
|
+
"exports": [
|
|
744
|
+
{
|
|
745
|
+
"kind": "js",
|
|
746
|
+
"name": "LabelProviderChat",
|
|
747
|
+
"declaration": {
|
|
748
|
+
"name": "LabelProviderChat",
|
|
749
|
+
"module": "src/label-provider/chat/index.ts"
|
|
750
|
+
}
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
"kind": "js",
|
|
754
|
+
"name": "labelProviderChatTag",
|
|
755
|
+
"declaration": {
|
|
756
|
+
"name": "labelProviderChatTag",
|
|
757
|
+
"module": "src/label-provider/chat/index.ts"
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
]
|
|
761
|
+
},
|
|
762
|
+
{
|
|
763
|
+
"kind": "javascript-module",
|
|
764
|
+
"path": "src/label-provider/chat/label-token-defaults.ts",
|
|
765
|
+
"declarations": [
|
|
766
|
+
{
|
|
767
|
+
"kind": "variable",
|
|
768
|
+
"name": "chatLabelDefaults",
|
|
769
|
+
"type": {
|
|
770
|
+
"text": "{ readonly [key in TokenName]: string }"
|
|
771
|
+
},
|
|
772
|
+
"default": "{ chatSendLabel: 'Send', chatStopLabel: 'Stop' }"
|
|
773
|
+
}
|
|
774
|
+
],
|
|
775
|
+
"exports": [
|
|
776
|
+
{
|
|
777
|
+
"kind": "js",
|
|
778
|
+
"name": "chatLabelDefaults",
|
|
779
|
+
"declaration": {
|
|
780
|
+
"name": "chatLabelDefaults",
|
|
781
|
+
"module": "src/label-provider/chat/label-token-defaults.ts"
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
]
|
|
785
|
+
},
|
|
786
|
+
{
|
|
787
|
+
"kind": "javascript-module",
|
|
788
|
+
"path": "src/label-provider/chat/label-tokens.ts",
|
|
789
|
+
"declarations": [
|
|
790
|
+
{
|
|
791
|
+
"kind": "variable",
|
|
792
|
+
"name": "chatSendLabel"
|
|
793
|
+
},
|
|
794
|
+
{
|
|
795
|
+
"kind": "variable",
|
|
796
|
+
"name": "chatStopLabel"
|
|
797
|
+
}
|
|
798
|
+
],
|
|
799
|
+
"exports": [
|
|
800
|
+
{
|
|
801
|
+
"kind": "js",
|
|
802
|
+
"name": "chatSendLabel",
|
|
803
|
+
"declaration": {
|
|
804
|
+
"name": "chatSendLabel",
|
|
805
|
+
"module": "src/label-provider/chat/label-tokens.ts"
|
|
806
|
+
}
|
|
807
|
+
},
|
|
808
|
+
{
|
|
809
|
+
"kind": "js",
|
|
810
|
+
"name": "chatStopLabel",
|
|
811
|
+
"declaration": {
|
|
812
|
+
"name": "chatStopLabel",
|
|
813
|
+
"module": "src/label-provider/chat/label-tokens.ts"
|
|
814
|
+
}
|
|
815
|
+
}
|
|
816
|
+
]
|
|
817
|
+
},
|
|
707
818
|
{
|
|
708
819
|
"kind": "javascript-module",
|
|
709
820
|
"path": "src/chat/message/inbound/index.ts",
|
|
@@ -877,6 +988,30 @@
|
|
|
877
988
|
"text": "string | undefined"
|
|
878
989
|
},
|
|
879
990
|
"privacy": "public"
|
|
991
|
+
},
|
|
992
|
+
{
|
|
993
|
+
"kind": "method",
|
|
994
|
+
"name": "slottedSubtitleElementsChanged",
|
|
995
|
+
"privacy": "public",
|
|
996
|
+
"return": {
|
|
997
|
+
"type": {
|
|
998
|
+
"text": "void"
|
|
999
|
+
}
|
|
1000
|
+
},
|
|
1001
|
+
"parameters": [
|
|
1002
|
+
{
|
|
1003
|
+
"name": "_prev",
|
|
1004
|
+
"type": {
|
|
1005
|
+
"text": "HTMLElement[] | undefined"
|
|
1006
|
+
}
|
|
1007
|
+
},
|
|
1008
|
+
{
|
|
1009
|
+
"name": "next",
|
|
1010
|
+
"type": {
|
|
1011
|
+
"text": "HTMLElement[] | undefined"
|
|
1012
|
+
}
|
|
1013
|
+
}
|
|
1014
|
+
]
|
|
880
1015
|
}
|
|
881
1016
|
],
|
|
882
1017
|
"attributes": [
|
package/dist/custom-elements.md
CHANGED
|
@@ -53,16 +53,14 @@
|
|
|
53
53
|
|
|
54
54
|
### Fields
|
|
55
55
|
|
|
56
|
-
| Name
|
|
57
|
-
|
|
|
58
|
-
| `placeholder`
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `processing` | public | `boolean` | `false` | | |
|
|
65
|
-
| `sendDisabled` | public | `boolean` | `false` | | |
|
|
56
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
57
|
+
| -------------- | ------- | --------------------- | ------- | ----------- | -------------- |
|
|
58
|
+
| `placeholder` | public | `string \| undefined` | | | |
|
|
59
|
+
| `value` | public | `string` | `''` | | |
|
|
60
|
+
| `tabIndex` | public | `number` | | | |
|
|
61
|
+
| `maxLength` | public | `number \| undefined` | `-1` | | |
|
|
62
|
+
| `processing` | public | `boolean` | `false` | | |
|
|
63
|
+
| `sendDisabled` | public | `boolean` | `false` | | |
|
|
66
64
|
|
|
67
65
|
### Methods
|
|
68
66
|
|
|
@@ -73,16 +71,14 @@
|
|
|
73
71
|
|
|
74
72
|
### Attributes
|
|
75
73
|
|
|
76
|
-
| Name
|
|
77
|
-
|
|
|
78
|
-
| `placeholder`
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `processing` | processing | |
|
|
85
|
-
| `send-disabled` | sendDisabled | |
|
|
74
|
+
| Name | Field | Inherited From |
|
|
75
|
+
| --------------- | ------------ | -------------- |
|
|
76
|
+
| `placeholder` | placeholder | |
|
|
77
|
+
| `value` | value | |
|
|
78
|
+
| `tabindex` | tabIndex | |
|
|
79
|
+
| `maxlength` | maxLength | |
|
|
80
|
+
| `processing` | processing | |
|
|
81
|
+
| `send-disabled` | sendDisabled | |
|
|
86
82
|
|
|
87
83
|
<hr/>
|
|
88
84
|
|
|
@@ -114,6 +110,34 @@
|
|
|
114
110
|
|
|
115
111
|
<hr/>
|
|
116
112
|
|
|
113
|
+
## class: `LabelProviderChat`
|
|
114
|
+
|
|
115
|
+
### Superclass
|
|
116
|
+
|
|
117
|
+
| Name | Module | Package |
|
|
118
|
+
| ------------------- | ------ | -------------------------------------------------- |
|
|
119
|
+
| `LabelProviderBase` | | @ni/nimble-components/dist/esm/label-provider/base |
|
|
120
|
+
|
|
121
|
+
### Fields
|
|
122
|
+
|
|
123
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
124
|
+
| ----------------- | --------- | ------------------------------------------------------ | ---------------------------------------------- | ----------- | -------------- |
|
|
125
|
+
| `send` | public | `string \| undefined` | | | |
|
|
126
|
+
| `stop` | public | `string \| undefined` | | | |
|
|
127
|
+
| `supportedLabels` | protected | `{
|
|
128
|
+
send: chatSendLabel,
|
|
129
|
+
stop: chatStopLabel
|
|
130
|
+
}` | `{ send: chatSendLabel, stop: chatStopLabel }` | | |
|
|
131
|
+
|
|
132
|
+
### Attributes
|
|
133
|
+
|
|
134
|
+
| Name | Field | Inherited From |
|
|
135
|
+
| ------ | ----- | -------------- |
|
|
136
|
+
| `send` | send | |
|
|
137
|
+
| `stop` | stop | |
|
|
138
|
+
|
|
139
|
+
<hr/>
|
|
140
|
+
|
|
117
141
|
## class: `ChatMessageInbound`
|
|
118
142
|
|
|
119
143
|
### Superclass
|
|
@@ -165,6 +189,12 @@
|
|
|
165
189
|
| `welcomeTitle` | public | `string \| undefined` | | | |
|
|
166
190
|
| `subtitle` | public | `string \| undefined` | | | |
|
|
167
191
|
|
|
192
|
+
### Methods
|
|
193
|
+
|
|
194
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
195
|
+
| -------------------------------- | ------- | ----------- | --------------------------------------------------------------------- | ------ | -------------- |
|
|
196
|
+
| `slottedSubtitleElementsChanged` | public | | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` | |
|
|
197
|
+
|
|
168
198
|
### Attributes
|
|
169
199
|
|
|
170
200
|
| Name | Field | Inherited From |
|
|
@@ -1 +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,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,CAAC;AAC3B,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 './chat/message/inbound';\nimport './chat/message/outbound';\nimport './chat/message/system';\nimport './chat/message/welcome';\nimport './icons/all-icons';\nimport './rectangle';\n"]}
|
|
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,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,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 './chat/message/inbound';\nimport './chat/message/outbound';\nimport './chat/message/system';\nimport './chat/message/welcome';\nimport './icons/all-icons';\nimport './label-provider/chat';\nimport './rectangle';\n"]}
|
|
@@ -19,8 +19,6 @@ declare const ChatInput_base: (abstract new (...args: any[]) => {
|
|
|
19
19
|
*/
|
|
20
20
|
export declare class ChatInput extends ChatInput_base {
|
|
21
21
|
placeholder?: string;
|
|
22
|
-
sendButtonLabel?: string;
|
|
23
|
-
stopButtonLabel?: string;
|
|
24
22
|
value: string;
|
|
25
23
|
tabIndex: number;
|
|
26
24
|
maxLength?: number;
|
|
@@ -167,12 +167,6 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
|
|
|
167
167
|
__decorate([
|
|
168
168
|
attr
|
|
169
169
|
], ChatInput.prototype, "placeholder", void 0);
|
|
170
|
-
__decorate([
|
|
171
|
-
attr({ attribute: 'send-button-label' })
|
|
172
|
-
], ChatInput.prototype, "sendButtonLabel", void 0);
|
|
173
|
-
__decorate([
|
|
174
|
-
attr({ attribute: 'stop-button-label' })
|
|
175
|
-
], ChatInput.prototype, "stopButtonLabel", void 0);
|
|
176
170
|
__decorate([
|
|
177
171
|
attr
|
|
178
172
|
], ChatInput.prototype, "value", 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 /** @internal */\n @observable\n public footerActionsIsEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedFooterActionsElements?: HTMLElement[];\n\n /** @internal */\n @observable\n public attachmentsIsEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedAttachmentsElements?: HTMLElement[];\n\n private resizeObserver?: ResizeObserver;\n private updateScrollbarWidthQueued = false;\n private readonly fieldSizingSupported = CSS.supports(\n 'field-sizing',\n 'content'\n );\n\n public slottedFooterActionsElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.footerActionsIsEmpty = next === undefined || next.length === 0;\n }\n\n public slottedAttachmentsElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.attachmentsIsEmpty = next === undefined || next.length === 0;\n }\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.textArea!.value.length === 0;\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.textArea.value.length === 0;\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.textArea!.value.length === 0;\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.sendDisabled || 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 (this.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"]}
|
|
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\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 /** @internal */\n @observable\n public footerActionsIsEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedFooterActionsElements?: HTMLElement[];\n\n /** @internal */\n @observable\n public attachmentsIsEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedAttachmentsElements?: HTMLElement[];\n\n private resizeObserver?: ResizeObserver;\n private updateScrollbarWidthQueued = false;\n private readonly fieldSizingSupported = CSS.supports(\n 'field-sizing',\n 'content'\n );\n\n public slottedFooterActionsElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.footerActionsIsEmpty = next === undefined || next.length === 0;\n }\n\n public slottedAttachmentsElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.attachmentsIsEmpty = next === undefined || next.length === 0;\n }\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.textArea!.value.length === 0;\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.textArea.value.length === 0;\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.textArea!.value.length === 0;\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.sendDisabled || 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 (this.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"]}
|
|
@@ -4,6 +4,7 @@ import { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-pl
|
|
|
4
4
|
import { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';
|
|
5
5
|
import { iconExclamationMarkTag } from '@ni/nimble-components/dist/esm/icons/exclamation-mark';
|
|
6
6
|
import { errorTextTemplate } from '@ni/nimble-components/dist/esm/patterns/error/template';
|
|
7
|
+
import { chatSendLabel, chatStopLabel } from '../../label-provider/chat/label-tokens';
|
|
7
8
|
export const template = html `
|
|
8
9
|
<div class="container">
|
|
9
10
|
<section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
|
|
@@ -35,10 +36,10 @@ export const template = html `
|
|
|
35
36
|
?disabled=${x => (x.processing ? false : (x.sendDisabled || x.isInputEmpty))}
|
|
36
37
|
@click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}
|
|
37
38
|
tabindex="${x => x.tabIndex}"
|
|
38
|
-
title=${x => (x.processing ? x
|
|
39
|
+
title=${x => (x.processing ? chatStopLabel.getValueFor(x) : chatSendLabel.getValueFor(x))}
|
|
39
40
|
content-hidden
|
|
40
41
|
>
|
|
41
|
-
${x => (x.processing ? x
|
|
42
|
+
${x => (x.processing ? chatStopLabel.getValueFor(x) : chatSendLabel.getValueFor(x))}
|
|
42
43
|
${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
|
|
43
44
|
</${buttonTag}>
|
|
44
45
|
</section>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/input/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/input/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted, 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 { iconExclamationMarkTag } from '@ni/nimble-components/dist/esm/icons/exclamation-mark';\nimport { errorTextTemplate } from '@ni/nimble-components/dist/esm/patterns/error/template';\nimport type { ChatInput } from '.';\nimport { chatSendLabel, chatStopLabel } from '../../label-provider/chat/label-tokens';\n\nexport const template = html<ChatInput>`\n<div class=\"container\">\n <section class=\"attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}\">\n <slot\n name=\"attachments\"\n ${slotted({ property: 'slottedAttachmentsElements' })}\n ></slot>\n </section>\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 <section class=\"footer\">\n <section class=\"footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}\">\n <slot\n name=\"footer-actions\"\n ${slotted({ property: 'slottedFooterActionsElements' })}\n ></slot>\n </section>\n <${buttonTag}\n class=\"action-button\"\n appearance=\"block\"\n appearance-variant=\"${x => (x.processing ? 'primary' : 'accent')}\"\n ?disabled=${x => (x.processing ? false : (x.sendDisabled || x.isInputEmpty))}\n @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}\n tabindex=\"${x => x.tabIndex}\"\n title=${x => (x.processing ? chatStopLabel.getValueFor(x) : chatSendLabel.getValueFor(x))}\n content-hidden\n >\n ${x => (x.processing ? chatStopLabel.getValueFor(x) : chatSendLabel.getValueFor(x))}\n ${when(\n x => x.processing,\n html`<${iconStopSquareTag} slot=\"start\"></${iconStopSquareTag}>`,\n html`<${iconPaperPlaneTag} slot=\"start\"></${iconPaperPlaneTag}>`\n )}\n </${buttonTag}>\n </section>\n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}\"\n style=\"--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;\"\n ></${iconExclamationMarkTag}>\n ${errorTextTemplate}\n</div>`;\n"]}
|
|
@@ -15,5 +15,10 @@ export type ChatMessageWelcomeOptions = FoundationElementDefinition;
|
|
|
15
15
|
export declare class ChatMessageWelcome extends FoundationElement {
|
|
16
16
|
welcomeTitle?: string;
|
|
17
17
|
subtitle?: string;
|
|
18
|
+
/** @internal */
|
|
19
|
+
readonly slottedSubtitleElements?: HTMLElement[];
|
|
20
|
+
/** @internal */
|
|
21
|
+
subtitleIsEmpty: boolean;
|
|
22
|
+
slottedSubtitleElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
|
|
18
23
|
}
|
|
19
24
|
export declare const chatMessageWelcomeTag = "spright-chat-message-welcome";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr } from '@ni/fast-element';
|
|
2
|
+
import { attr, observable } from '@ni/fast-element';
|
|
3
3
|
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { template } from './template';
|
|
@@ -7,6 +7,14 @@ import { template } from './template';
|
|
|
7
7
|
* A Spright component for displaying a welcome chat message
|
|
8
8
|
*/
|
|
9
9
|
export class ChatMessageWelcome extends FoundationElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
/** @internal */
|
|
13
|
+
this.subtitleIsEmpty = true;
|
|
14
|
+
}
|
|
15
|
+
slottedSubtitleElementsChanged(_prev, next) {
|
|
16
|
+
this.subtitleIsEmpty = next === undefined || next.length === 0;
|
|
17
|
+
}
|
|
10
18
|
}
|
|
11
19
|
__decorate([
|
|
12
20
|
attr({ attribute: 'welcome-title' })
|
|
@@ -14,6 +22,12 @@ __decorate([
|
|
|
14
22
|
__decorate([
|
|
15
23
|
attr
|
|
16
24
|
], ChatMessageWelcome.prototype, "subtitle", void 0);
|
|
25
|
+
__decorate([
|
|
26
|
+
observable
|
|
27
|
+
], ChatMessageWelcome.prototype, "slottedSubtitleElements", void 0);
|
|
28
|
+
__decorate([
|
|
29
|
+
observable
|
|
30
|
+
], ChatMessageWelcome.prototype, "subtitleIsEmpty", void 0);
|
|
17
31
|
const sprightChatMessageWelcome = ChatMessageWelcome.compose({
|
|
18
32
|
baseName: 'chat-message-welcome',
|
|
19
33
|
template,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chat/message/welcome/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chat/message/welcome/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACH,YAAY,EACZ,iBAAiB,EAEpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AActC;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,iBAAiB;IAAzD;;QAWI,gBAAgB;QAET,oBAAe,GAAG,IAAI,CAAC;IAQlC,CAAC;IANU,8BAA8B,CACjC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,eAAe,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;IACnE,CAAC;CACJ;AAnBU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;wDACR;AAGtB;IADN,IAAI;oDACoB;AAIT;IADf,UAAU;mEAC6C;AAIjD;IADN,UAAU;2DACmB;AAUlC,MAAM,yBAAyB,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACzD,QAAQ,EAAE,sBAAsB;IAChC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,yBAAyB,EAAE,CAAC,CAAC;AACvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,8BAA8B,CAAC","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport {\n DesignSystem,\n FoundationElement,\n type FoundationElementDefinition\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'spright-chat-message-welcome': ChatMessageWelcome;\n }\n}\n\n/**\n * SprightChatMessageWelcome configuration options\n * @public\n */\nexport type ChatMessageWelcomeOptions = FoundationElementDefinition;\n\n/**\n * A Spright component for displaying a welcome chat message\n */\nexport class ChatMessageWelcome extends FoundationElement {\n @attr({ attribute: 'welcome-title' })\n public welcomeTitle?: string;\n\n @attr\n public subtitle?: string;\n\n /** @internal */\n @observable\n public readonly slottedSubtitleElements?: HTMLElement[];\n\n /** @internal */\n @observable\n public subtitleIsEmpty = true;\n\n public slottedSubtitleElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.subtitleIsEmpty = next === undefined || next.length === 0;\n }\n}\n\nconst sprightChatMessageWelcome = ChatMessageWelcome.compose({\n baseName: 'chat-message-welcome',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());\nexport const chatMessageWelcomeTag = 'spright-chat-message-welcome';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
2
|
-
import { bodyFont, bodyFontColor, mediumPadding, standardPadding, subtitleFont, subtitleFontColor, titlePlus1Font, titlePlus1FontColor, } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
2
|
+
import { bodyFont, bodyFontColor, mediumPadding, standardPadding, linkFont, subtitleFont, subtitleFontColor, titlePlus1Font, titlePlus1FontColor, } 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')}
|
|
@@ -47,6 +47,11 @@ export const styles = css `
|
|
|
47
47
|
font: ${subtitleFont};
|
|
48
48
|
color: ${subtitleFontColor};
|
|
49
49
|
text-align: center;
|
|
50
|
+
${linkFont.cssCustomProperty}: ${subtitleFont};
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.subtitle.subtitle-empty {
|
|
54
|
+
display: none;
|
|
50
55
|
}
|
|
51
56
|
|
|
52
57
|
.message-content {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/chat/message/welcome/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACtB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;qBAGA,eAAe;sBACd,eAAe;;;;;;;;gBAQrB,QAAQ;iBACP,aAAa;;;;;;;eAOf,aAAa;;;;;;;;;;;;;;;;gBAgBZ,cAAc;iBACb,mBAAmB;;;;;gBAKpB,YAAY;iBACX,iBAAiB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/chat/message/welcome/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACtB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;qBAGA,eAAe;sBACd,eAAe;;;;;;;;gBAQrB,QAAQ;iBACP,aAAa;;;;;;;eAOf,aAAa;;;;;;;;;;;;;;;;gBAgBZ,cAAc;iBACb,mBAAmB;;;;;gBAKpB,YAAY;iBACX,iBAAiB;;UAExB,QAAQ,CAAC,iBAAiB,KAAK,YAAY;;;;;;;;;;;;;;;eAetC,aAAa;;CAE3B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\n\nimport {\n bodyFont,\n bodyFontColor,\n mediumPadding,\n standardPadding,\n linkFont,\n subtitleFont,\n subtitleFontColor,\n titlePlus1Font,\n titlePlus1FontColor,\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 min-width: ${standardPadding};\n min-height: ${standardPadding};\n max-width: 90%;\n\n flex: 1;\n flex-direction: row;\n justify-content: center;\n align-self: center;\n align-items: center;\n font: ${bodyFont};\n color: ${bodyFontColor};\n }\n\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: ${mediumPadding};\n }\n\n .brand-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n slot[name='brand-icon']::slotted(*),\n slot[name='brand-icon'] > * {\n width: 48px;\n height: 48px;\n }\n\n .title {\n font: ${titlePlus1Font};\n color: ${titlePlus1FontColor};\n text-align: center;\n }\n\n .subtitle {\n font: ${subtitleFont};\n color: ${subtitleFontColor};\n text-align: center;\n ${linkFont.cssCustomProperty}: ${subtitleFont};\n }\n\n .subtitle.subtitle-empty {\n display: none;\n }\n\n .message-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: fit-content;\n height: fit-content;\n max-width: 100%;\n overflow-x: auto;\n gap: ${mediumPadding};\n }\n`;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { html, ViewTemplate, when } from '@ni/fast-element';
|
|
1
|
+
import { html, slotted, ViewTemplate, when } from '@ni/fast-element';
|
|
2
2
|
import { iconNigelChatTag } from '../../../icons/nigel-chat';
|
|
3
3
|
export const template = () => html `
|
|
4
4
|
<div class="container">
|
|
@@ -10,9 +10,9 @@ export const template = () => html `
|
|
|
10
10
|
${when(x => x.welcomeTitle, html `
|
|
11
11
|
<div class="title">${x => x.welcomeTitle}</div>
|
|
12
12
|
`)}
|
|
13
|
-
${
|
|
14
|
-
<
|
|
15
|
-
|
|
13
|
+
<div class="subtitle ${x => (!x.subtitle && x.subtitleIsEmpty ? 'subtitle-empty' : '')}">
|
|
14
|
+
<slot name="subtitle" ${slotted({ property: 'slottedSubtitleElements' })}>${x => x.subtitle}</slot>
|
|
15
|
+
</div>
|
|
16
16
|
<section class="message-content">
|
|
17
17
|
<slot></slot>
|
|
18
18
|
</section>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/chat/message/welcome/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/chat/message/welcome/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAEjB,GAAG,EAAE,CAAC,IAAI,CAAoB;;;;mBAIf,gBAAgB,MAAM,gBAAgB;;;UAG/C,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,CAAoB;iCAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;SAC3C,CAAC;+BACqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;oCAC1D,OAAO,CAAC,EAAE,QAAQ,EAAE,yBAAyB,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;;;;CAMtG,CAAC","sourcesContent":["import { html, slotted, ViewTemplate, when } from '@ni/fast-element';\nimport type {\n FoundationElementTemplate\n} from '@ni/fast-foundation';\nimport type { ChatMessageWelcome } from '.';\nimport { iconNigelChatTag } from '../../../icons/nigel-chat';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<ChatMessageWelcome>\n> = () => html<ChatMessageWelcome>`\n <div class=\"container\">\n <div class=\"brand-icon\">\n <slot name=\"brand-icon\">\n <${iconNigelChatTag}></${iconNigelChatTag}>\n </slot>\n </div>\n ${when(x => x.welcomeTitle, html<ChatMessageWelcome>`\n <div class=\"title\">${x => x.welcomeTitle}</div>\n `)}\n <div class=\"subtitle ${x => (!x.subtitle && x.subtitleIsEmpty ? 'subtitle-empty' : '')}\">\n <slot name=\"subtitle\" ${slotted({ property: 'slottedSubtitleElements' })}>${x => x.subtitle}</slot>\n </div>\n <section class=\"message-content\">\n <slot></slot>\n </section>\n </div>\n`;\n"]}
|
|
@@ -8,6 +8,8 @@ export declare class ChatMessageWelcomePageObject {
|
|
|
8
8
|
constructor(element: ChatMessageWelcome);
|
|
9
9
|
getTitleText(): string | null;
|
|
10
10
|
getSubtitleText(): string | null;
|
|
11
|
+
getSlottedSubtitleText(): string;
|
|
12
|
+
getSlottedSubtitleLinkHref(): string | null;
|
|
11
13
|
isTitleRendered(): boolean;
|
|
12
14
|
isSubtitleRendered(): boolean;
|
|
13
15
|
getSlottedBrandIconNodes(): Element[];
|
|
@@ -15,4 +17,5 @@ export declare class ChatMessageWelcomePageObject {
|
|
|
15
17
|
getMessageContentSlottedText(): string;
|
|
16
18
|
private getDefaultSlot;
|
|
17
19
|
private getBrandIconSlot;
|
|
20
|
+
private getSubtitleSlot;
|
|
18
21
|
}
|