@ni/spright-components 6.14.4 → 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 +34 -1
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4945 -4923
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +24 -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/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": [
|
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"]}
|