@ni/spright-components 5.1.0 → 5.2.0

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

@@ -1,5 +1,5 @@
 import { css } from '@ni/fast-element';
-import { applicationBackgroundColor, mediumPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { applicationBackgroundColor, mediumPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
 import { display } from '../../utilities/style/display';
 export const styles = css `
     ${display('flex')}
@@ -7,7 +7,7 @@ export const styles = css `
     :host {
         flex-direction: column;
         justify-content: flex-start;
-        row-gap: ${standardPadding};
+        row-gap: 32px;
         padding: ${mediumPadding};
         background: ${applicationBackgroundColor};
         overflow-y: auto;

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,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 '@ni/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"]}
+{"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;;;;;;mBAMF,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        justify-content: flex-start;\n        row-gap: 32px;\n        padding: ${mediumPadding};\n        background: ${applicationBackgroundColor};\n        overflow-y: auto;\n    }\n`;\n"]}

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

@@ -1,10 +1,15 @@
-import { FoundationElement } from '@ni/fast-foundation';
+import { FoundationElement, type FoundationElementDefinition, type StartEndOptions } from '@ni/fast-foundation';
 import { ChatMessageType } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'spright-chat-message': ChatMessage;
     }
 }
+/**
+ * SprightChatMessage configuration options
+ * @public
+ */
+export type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;
 /**
  * A Spright component for displaying a chat message
  */
@@ -16,5 +21,10 @@ export declare class ChatMessage extends FoundationElement {
      * HTML Attribute: message-type
      */
     readonly messageType: ChatMessageType;
+    /** @internal */
+    footerActionsIsEmpty: boolean;
+    /** @internal */
+    readonly slottedFooterActionsElements?: HTMLElement[];
+    slottedFooterActionsElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
 }
 export declare const chatMessageTag = "spright-chat-message";

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-import { attr } from '@ni/fast-element';
-import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { attr, observable } from '@ni/fast-element';
+import { applyMixins, DesignSystem, FoundationElement, StartEnd } from '@ni/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
 import { ChatMessageType } from './types';
@@ -17,11 +17,23 @@ export class ChatMessage extends FoundationElement {
          * HTML Attribute: message-type
          */
         this.messageType = ChatMessageType.system;
+        /** @internal */
+        this.footerActionsIsEmpty = true;
+    }
+    slottedFooterActionsElementsChanged(_prev, next) {
+        this.footerActionsIsEmpty = !next?.length;
     }
 }
 __decorate([
     attr({ attribute: 'message-type' })
 ], ChatMessage.prototype, "messageType", void 0);
+__decorate([
+    observable
+], ChatMessage.prototype, "footerActionsIsEmpty", void 0);
+__decorate([
+    observable
+], ChatMessage.prototype, "slottedFooterActionsElements", void 0);
+applyMixins(ChatMessage, StartEnd);
 const sprightChatMessage = ChatMessage.compose({
     baseName: 'chat-message',
     template,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/message/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,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;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 '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/message/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACH,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EAGX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAc1C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACI;;;;;WAKG;QAEa,gBAAW,GAAoB,eAAe,CAAC,MAAM,CAAC;QAEtE,gBAAgB;QAET,yBAAoB,GAAG,IAAI,CAAC;IAYvC,CAAC;IANU,mCAAmC,CACtC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC;IAC9C,CAAC;CACJ;AAhBmB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACkC;AAI/D;IADN,UAAU;yDACwB;AAInB;IADf,UAAU;iEACkD;AASjE,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAEnC,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, observable } from '@ni/fast-element';\nimport {\n    applyMixins,\n    DesignSystem,\n    FoundationElement,\n    StartEnd,\n    type FoundationElementDefinition,\n    type StartEndOptions\n} from '@ni/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 * SprightChatMessage configuration options\n * @public\n */\nexport type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;\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    /** @internal */\n    @observable\n    public footerActionsIsEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedFooterActionsElements?: HTMLElement[];\n\n    public slottedFooterActionsElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.footerActionsIsEmpty = !next?.length;\n    }\n}\napplyMixins(ChatMessage, StartEnd);\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.js

@@ -1,6 +1,11 @@
 import { css } from '@ni/fast-element';
-import { bodyFont, bodyFontColor, borderHoverColor, borderWidth, fillSelectedColor, mediumPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { anchorButtonTag } from '@ni/nimble-components/dist/esm/anchor-button';
+import { buttonTag } from '@ni/nimble-components/dist/esm/button';
+import { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';
+import { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';
+import { bodyFont, bodyFontColor, borderHoverColor, borderWidth, controlSlimHeight, fillSelectedColor, largePadding, mediumPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
 import { display } from '../../utilities/style/display';
+import { ChatMessageType } from './types';
 export const styles = css `
     ${display('flex')}
 
@@ -15,30 +20,63 @@ export const styles = css `
         color: ${bodyFontColor};
     }
 
-    :host([message-type='outbound']) {
+    :host([message-type='${ChatMessageType.outbound}']) {
         justify-content: flex-end;
     }
 
-    :host([message-type='inbound']) {
+    :host([message-type='${ChatMessageType.inbound}']) {
         justify-content: flex-start;
     }
 
-    div {
-        max-width: calc(100% - 200px);
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .message-content {
         width: fit-content;
         height: fit-content;
-        padding: ${mediumPadding};
         overflow-x: auto;
     }
 
-    :host([message-type='outbound']) div {
+    :host([message-type='${ChatMessageType.outbound}']) .message-content {
         background: ${fillSelectedColor};
         border: ${borderWidth} solid ${borderHoverColor};
-        border-radius: 8px 8px 0px 8px;
+        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
+        padding: ${mediumPadding};
+    }
+
+    .footer-actions {
+        display: none;
+    }
+
+    :host([message-type='${ChatMessageType.inbound}'])
+        .footer-actions.has-content {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${mediumPadding};
+    }
+
+    .footer-actions ::slotted(${buttonTag}),
+    .footer-actions ::slotted(${toggleButtonTag}),
+    .footer-actions ::slotted(${anchorButtonTag}),
+    .footer-actions ::slotted(${menuButtonTag}) {
+        height: ${controlSlimHeight};
+    }
+
+    .end {
+        display: none;
     }
 
-    :host([message-type='inbound']) div {
-        border-radius: 8px 8px 8px 0px;
+    :host([message-type='${ChatMessageType.inbound}']) .end {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${largePadding};
     }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/message/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,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 '@ni/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"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/message/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;gBASL,QAAQ;iBACP,aAAa;;;2BAGH,eAAe,CAAC,QAAQ;;;;2BAIxB,eAAe,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;2BAoBvB,eAAe,CAAC,QAAQ;sBAC7B,iBAAiB;kBACrB,WAAW,UAAU,gBAAgB;yBAC9B,aAAa,IAAI,aAAa,QAAQ,aAAa;mBACzD,aAAa;;;;;;;2BAOL,eAAe,CAAC,OAAO;;;sBAG5B,eAAe;sBACf,aAAa;;;gCAGH,SAAS;gCACT,eAAe;gCACf,eAAe;gCACf,aAAa;kBAC3B,iBAAiB;;;;;;;2BAOR,eAAe,CAAC,OAAO;;sBAE5B,eAAe;sBACf,YAAY;;CAEjC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { anchorButtonTag } from '@ni/nimble-components/dist/esm/anchor-button';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';\nimport { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';\n\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlSlimHeight,\n    fillSelectedColor,\n    largePadding,\n    mediumPadding,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\nimport { ChatMessageType } from './types';\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='${ChatMessageType.outbound}']) {\n        justify-content: flex-end;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}']) {\n        justify-content: flex-start;\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        max-width: calc(90%);\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .message-content {\n        width: fit-content;\n        height: fit-content;\n        overflow-x: auto;\n    }\n\n    :host([message-type='${ChatMessageType.outbound}']) .message-content {\n        background: ${fillSelectedColor};\n        border: ${borderWidth} solid ${borderHoverColor};\n        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};\n        padding: ${mediumPadding};\n    }\n\n    .footer-actions {\n        display: none;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}'])\n        .footer-actions.has-content {\n        display: flex;\n        column-gap: ${standardPadding};\n        margin-top: ${mediumPadding};\n    }\n\n    .footer-actions ::slotted(${buttonTag}),\n    .footer-actions ::slotted(${toggleButtonTag}),\n    .footer-actions ::slotted(${anchorButtonTag}),\n    .footer-actions ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\n    }\n\n    .end {\n        display: none;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}']) .end {\n        display: flex;\n        column-gap: ${standardPadding};\n        margin-top: ${largePadding};\n    }\n`;\n"]}

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

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

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

@@ -1,6 +1,21 @@
-import { html } from '@ni/fast-element';
+import { html, slotted, ViewTemplate } from '@ni/fast-element';
+import { startSlotTemplate, endSlotTemplate } from '@ni/fast-foundation';
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
-export const template = html `<div><slot></slot></div>`;
+export const template = (context, definition) => html `
+    <div class="container">
+        ${startSlotTemplate(context, definition)}
+        <section class="message-content">
+            <slot></slot>
+        </section>
+        <section class="footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}">
+           <slot 
+                name="footer-actions"
+                ${slotted({ property: 'slottedFooterActionsElements' })}
+           ></slot>
+        </section>
+        ${endSlotTemplate(context, definition)}
+    </div>
+`;
 /* eslint-enable @typescript-eslint/indent */
 //# sourceMappingURL=template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/message/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa,0BAA0B,CAAC;AACpE,6CAA6C","sourcesContent":["import { html } from '@ni/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"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/message/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EACH,iBAAiB,EACjB,eAAe,EAElB,MAAM,qBAAqB,CAAC;AAG7B,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAa;;UAEpC,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;yCAIP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;;;kBAGzE,OAAO,CAAC,EAAE,QAAQ,EAAE,8BAA8B,EAAE,CAAC;;;UAG7D,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC;AACF,6CAA6C","sourcesContent":["import { html, slotted, ViewTemplate } from '@ni/fast-element';\nimport {\n    startSlotTemplate,\n    endSlotTemplate,\n    type FoundationElementTemplate\n} from '@ni/fast-foundation';\nimport type { ChatMessage, ChatMessageOptions } from '.';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<ChatMessage>,\nChatMessageOptions\n> = (context, definition) => html<ChatMessage>`\n    <div class=\"container\">\n        ${startSlotTemplate(context, definition)}\n        <section class=\"message-content\">\n            <slot></slot>\n        </section>\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        ${endSlotTemplate(context, definition)}\n    </div>\n`;\n/* eslint-enable @typescript-eslint/indent */\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "NI Spright Components",
   "scripts": {
     "build": "npm run build-components && npm run bundle-components",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@ni/fast-element": "^10.0.0",
     "@ni/fast-foundation": "^10.0.0",
-    "@ni/nimble-components": "^33.1.0",
+    "@ni/nimble-components": "^33.1.1",
     "tslib": "^2.2.0"
   },
   "devDependencies": {
@@ -74,7 +74,7 @@
     "karma-spec-reporter": "^0.0.36",
     "karma-webkit-launcher": "^2.6.0",
     "karma-webpack": "^5.0.0",
-    "playwright": "1.44.0",
+    "playwright": "1.51.0",
     "prettier-eslint": "^16.3.0",
     "prettier-eslint-cli": "^8.0.1",
     "rollup": "^4.12.0",