@ni/spright-components 4.4.1 → 4.5.1

package/dist/esm/all-components.d.ts

@@ -4,4 +4,6 @@
  * that are required instead of leveraging this file.
  */
 import '@ni/nimble-components/dist/esm/all-components';
+import './chat/conversation';
+import './chat/message';
 import './rectangle';

package/dist/esm/all-components.js

@@ -4,5 +4,7 @@
  * that are required instead of leveraging this file.
  */
 import '@ni/nimble-components/dist/esm/all-components';
+import './chat/conversation';
+import './chat/message';
 import './rectangle';
 //# sourceMappingURL=all-components.js.map

package/dist/esm/all-components.js.map

@@ -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,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 './rectangle';\n"]}
+{"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,gBAAgB,CAAC;AACxB,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/message';\nimport './rectangle';\n"]}

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

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-conversation': ChatConversation;
+    }
+}
+/**
+ * A Spright component for displaying a series of chat messages
+ */
+export declare class ChatConversation extends FoundationElement {
+}
+export declare const chatConversationTag = "spright-chat-conversation";

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

@@ -0,0 +1,18 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Spright component for displaying a series of chat messages
+ */
+export class ChatConversation extends FoundationElement {
+}
+const sprightChatConversation = ChatConversation.compose({
+    baseName: 'chat-conversation',
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('spright')
+    .register(sprightChatConversation());
+export const chatConversationTag = 'spright-chat-conversation';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/conversation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,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 '@microsoft/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"]}

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

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,16 @@
+import { css } from '@microsoft/fast-element';
+import { applicationBackgroundColor, 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;
+        justify-content: flex-start;
+        row-gap: ${standardPadding};
+        padding: ${mediumPadding};
+        background: ${applicationBackgroundColor};
+        overflow-y: auto;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/conversation/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,0BAA0B,EAC1B,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;;;;;mBAKF,eAAe;mBACf,aAAa;sBACV,0BAA0B;;;CAG/C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    applicationBackgroundColor,\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        justify-content: flex-start;\n        row-gap: ${standardPadding};\n        padding: ${mediumPadding};\n        background: ${applicationBackgroundColor};\n        overflow-y: auto;\n    }\n`;\n"]}

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

@@ -0,0 +1,2 @@
+import type { ChatConversation } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<ChatConversation, any>;

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

@@ -0,0 +1,6 @@
+import { html } from '@microsoft/fast-element';
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = html `<slot></slot>`;
+/* eslint-enable @typescript-eslint/indent */
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/conversation/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAkB,eAAe,CAAC;AAC9D,6CAA6C","sourcesContent":["import { html } from '@microsoft/fast-element';\nimport type { ChatConversation } from '.';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template = html<ChatConversation>`<slot></slot>`;\n/* eslint-enable @typescript-eslint/indent */\n"]}

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

@@ -0,0 +1,20 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { ChatMessageType } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-message': ChatMessage;
+    }
+}
+/**
+ * A Spright component for displaying a chat message
+ */
+export declare class ChatMessage extends FoundationElement {
+    /**
+     * @public
+     * The message type of this message in the chat conversation
+     * @remarks
+     * HTML Attribute: message-type
+     */
+    readonly messageType: ChatMessageType;
+}
+export declare const chatMessageTag = "spright-chat-message";

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

@@ -0,0 +1,32 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { ChatMessageType } from './types';
+/**
+ * A Spright component for displaying a chat message
+ */
+export class ChatMessage extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * @public
+         * The message type of this message in the chat conversation
+         * @remarks
+         * HTML Attribute: message-type
+         */
+        this.messageType = ChatMessageType.system;
+    }
+}
+__decorate([
+    attr({ attribute: 'message-type' })
+], ChatMessage.prototype, "messageType", void 0);
+const sprightChatMessage = ChatMessage.compose({
+    baseName: 'chat-message',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
+export const chatMessageTag = 'spright-chat-message';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/message/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQ1C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACI;;;;;WAKG;QAEa,gBAAW,GAAoB,eAAe,CAAC,MAAM,CAAC;IAC1E,CAAC;CAAA;AADmB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACkC;AAG1E,MAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC3C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ChatMessageType } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message': ChatMessage;\n    }\n}\n\n/**\n * A Spright component for displaying a chat message\n */\nexport class ChatMessage extends FoundationElement {\n    /**\n     * @public\n     * The message type of this message in the chat conversation\n     * @remarks\n     * HTML Attribute: message-type\n     */\n    @attr({ attribute: 'message-type' })\n    public readonly messageType: ChatMessageType = ChatMessageType.system;\n}\n\nconst sprightChatMessage = ChatMessage.compose({\n    baseName: 'chat-message',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());\nexport const chatMessageTag = 'spright-chat-message';\n"]}

package/dist/esm/chat/message/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,44 @@
+import { css } from '@microsoft/fast-element';
+import { bodyFont, bodyFontColor, borderHoverColor, borderWidth, fillSelectedColor, mediumPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        min-width: 16px;
+        min-height: 16px;
+
+        flex-direction: row;
+        justify-content: center;
+        flex-shrink: 0;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    :host([message-type='outbound']) {
+        justify-content: flex-end;
+    }
+
+    :host([message-type='inbound']) {
+        justify-content: flex-start;
+    }
+
+    div {
+        max-width: calc(100% - 200px);
+        width: fit-content;
+        height: fit-content;
+        padding: ${mediumPadding};
+        overflow-x: auto;
+    }
+
+    :host([message-type='outbound']) div {
+        background: ${fillSelectedColor};
+        border: ${borderWidth} solid ${borderHoverColor};
+        border-radius: 8px 8px 0px 8px;
+    }
+
+    :host([message-type='inbound']) div {
+        border-radius: 8px 8px 8px 0px;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/message/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,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;;;;;;;;;gBASL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;mBAeX,aAAa;;;;;sBAKV,iBAAiB;kBACrB,WAAW,UAAU,gBAAgB;;;;;;;CAOtD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    fillSelectedColor,\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        min-width: 16px;\n        min-height: 16px;\n\n        flex-direction: row;\n        justify-content: center;\n        flex-shrink: 0;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    :host([message-type='outbound']) {\n        justify-content: flex-end;\n    }\n\n    :host([message-type='inbound']) {\n        justify-content: flex-start;\n    }\n\n    div {\n        max-width: calc(100% - 200px);\n        width: fit-content;\n        height: fit-content;\n        padding: ${mediumPadding};\n        overflow-x: auto;\n    }\n\n    :host([message-type='outbound']) div {\n        background: ${fillSelectedColor};\n        border: ${borderWidth} solid ${borderHoverColor};\n        border-radius: 8px 8px 0px 8px;\n    }\n\n    :host([message-type='inbound']) div {\n        border-radius: 8px 8px 8px 0px;\n    }\n`;\n"]}

package/dist/esm/chat/message/template.d.ts

@@ -0,0 +1,2 @@
+import type { ChatMessage } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<ChatMessage, any>;

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

@@ -0,0 +1,6 @@
+import { html } from '@microsoft/fast-element';
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = html `<div><slot></slot></div>`;
+/* eslint-enable @typescript-eslint/indent */
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/message/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa,0BAA0B,CAAC;AACpE,6CAA6C","sourcesContent":["import { html } from '@microsoft/fast-element';\nimport type { ChatMessage } from '.';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template = html<ChatMessage>`<div><slot></slot></div>`;\n/* eslint-enable @typescript-eslint/indent */\n"]}

package/dist/esm/chat/message/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A message type in a chat conversation.
+ * @public
+ */
+export declare const ChatMessageType: {
+    readonly system: undefined;
+    readonly outbound: "outbound";
+    readonly inbound: "inbound";
+};
+export type ChatMessageType = (typeof ChatMessageType)[keyof typeof ChatMessageType];

package/dist/esm/chat/message/types.js

@@ -0,0 +1,10 @@
+/**
+ * A message type in a chat conversation.
+ * @public
+ */
+export const ChatMessageType = {
+    system: undefined,
+    outbound: 'outbound',
+    inbound: 'inbound'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/chat/message/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/chat/message/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACZ,CAAC","sourcesContent":["/**\n * A message type in a chat conversation.\n * @public\n */\nexport const ChatMessageType = {\n    system: undefined,\n    outbound: 'outbound',\n    inbound: 'inbound'\n} as const;\n\nexport type ChatMessageType =\n    (typeof ChatMessageType)[keyof typeof ChatMessageType];\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-components",
-  "version": "4.4.1",
+  "version": "4.5.1",
   "description": "NI Spright Components",
   "scripts": {
     "build": "npm run build-components && npm run bundle-components",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@microsoft/fast-element": "^1.14.0",
     "@microsoft/fast-foundation": "^2.50.0",
-    "@ni/nimble-components": "^32.12.1",
+    "@ni/nimble-components": "^32.13.0",
     "tslib": "^2.2.0"
   },
   "devDependencies": {