@ni/spright-components 5.5.1 → 5.5.3

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

@@ -8,5 +8,10 @@ declare global {
  * A Spright component for displaying a series of chat messages
  */
 export declare class ChatConversation extends FoundationElement {
+    /** @internal */
+    inputEmpty: boolean;
+    /** @internal */
+    readonly slottedInputElements?: HTMLElement[];
+    slottedInputElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
 }
 export declare const chatConversationTag = "spright-chat-conversation";

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

@@ -1,11 +1,27 @@
+import { __decorate } from "tslib";
 import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { observable } from '@ni/fast-element';
 import { styles } from './styles';
 import { template } from './template';
 /**
  * A Spright component for displaying a series of chat messages
  */
 export class ChatConversation extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.inputEmpty = true;
+    }
+    slottedInputElementsChanged(_prev, next) {
+        this.inputEmpty = !next?.length;
+    }
 }
+__decorate([
+    observable
+], ChatConversation.prototype, "inputEmpty", void 0);
+__decorate([
+    observable
+], ChatConversation.prototype, "slottedInputElements", void 0);
 const sprightChatConversation = ChatConversation.compose({
     baseName: 'chat-conversation',
     template,

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

@@ -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,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,iBAAiB;CAAG;AAE1D,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 { styles } from './styles';\nimport { template } from './template';\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\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"]}
+{"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,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,iBAAiB;IAAvD;;QACI,gBAAgB;QAET,eAAU,GAAG,IAAI,CAAC;IAY7B,CAAC;IANU,2BAA2B,CAC9B,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC;IACpC,CAAC;CACJ;AAZU;IADN,UAAU;oDACc;AAIT;IADf,UAAU;8DAC0C;AAUzD,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 { observable } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\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    /** @internal */\n    @observable\n    public inputEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedInputElements?: HTMLElement[];\n\n    public slottedInputElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.inputEmpty = !next?.length;\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"]}

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

@@ -1,11 +1,13 @@
 import { css } from '@ni/fast-element';
-import { applicationBackgroundColor, mediumPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { applicationBackgroundColor, borderWidth, sectionBackgroundImage, mediumPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
 import { display } from '../../utilities/style/display';
 export const styles = css `
     ${display('flex')}
 
     :host {
         flex-direction: column;
+        background: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${applicationBackgroundColor};
     }
 
     .messages {
@@ -14,9 +16,19 @@ export const styles = css `
         flex-direction: column;
         justify-content: flex-start;
         row-gap: 32px;
-        padding: ${mediumPadding};
-        background: ${applicationBackgroundColor};
+        padding: ${mediumPadding} ${standardPadding} ${mediumPadding}
+            ${standardPadding};
+        background: ${sectionBackgroundImage};
         overflow-y: auto;
     }
+
+    .input {
+        padding: ${borderWidth} ${standardPadding} ${standardPadding}
+            ${standardPadding};
+    }
+
+    .input.input-empty {
+        padding: 0px ${standardPadding} 0px ${standardPadding};
+    }
 `;
 //# sourceMappingURL=styles.js.map

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

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

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

@@ -1,8 +1,12 @@
-import { html } from '@ni/fast-element';
+import { html, slotted } from '@ni/fast-element';
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
 export const template = html `
 <div class="messages"><slot></slot></div>
-<div class="input"><slot name="input"></slot></div>`;
+<div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
+    <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
+    </slot>
+</div>
+`;
 /* eslint-enable @typescript-eslint/indent */
 //# sourceMappingURL=template.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-components",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "description": "NI Spright Components",
   "scripts": {
     "build": "npm run build-components && npm run bundle-components",
@@ -51,7 +51,7 @@
     "@ni/fast-element": "^10.0.0",
     "@ni/fast-foundation": "^10.0.0",
     "@ni/fast-web-utilities": "^10.0.0",
-    "@ni/nimble-components": "^33.11.1",
+    "@ni/nimble-components": "^33.12.1",
     "tslib": "^2.2.0"
   },
   "devDependencies": {