@postnord/pn-marketweb-components 4.0.2 → 4.0.4-test

package/dist/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.js

@@ -1,119 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { faq } from "pn-design-assets/pn-assets/icons.js";
-export class PnChatMessage {
-    constructor() {
-        this.category = undefined;
-        this.customerSegment = undefined;
-        this.agentName = undefined;
-    }
-    robotIcon = '<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 20"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id="clippath"> <rect class="st0" width="20" height="20"/> </clipPath> </defs> <g class="st5"> <g> <path class="st2" d="M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z"/> <path class="st3" d="M10.5,4h-.5v2.8h.5v-2.8Z"/> <path class="st3" d="M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path class="st3" d="M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z"/> <path class="st4" d="M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z"/> <path d="M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z"/> <path class="st4" d="M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z"/> <path class="st4" d="M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z"/> <path class="st3" d="M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z"/> <path class="st6" d="M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z"/> <path class="st1" d="M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path class="st1" d="M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path d="M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z"/> </g> </g> </svg>';
-    blue700 = 'blue700';
-    getIcon() {
-        let icon = null;
-        switch (this.category) {
-            case 'Bot':
-                return this.robotIcon;
-            case 'Agent':
-                return this.agentName;
-            case 'Link':
-                return faq;
-        }
-        return icon;
-    }
-    getMessageClass() {
-        switch (this.category) {
-            case 'ButtonResponse':
-                return 'buttonresponse';
-            case 'User':
-                return 'user';
-            case 'System':
-                return 'system-message';
-            default:
-                return undefined;
-        }
-    }
-    render() {
-        const segmentClass = this.customerSegment?.toLowerCase() || '';
-        const categoryClass = this.category?.toLowerCase() || '';
-        return (h(Host, { key: '0bd86ed5a6709fca909aa09b9b8bf6c497c230a2', class: this.getMessageClass() }, h("div", { key: '190cdd88c6b715022bad825d19f97ef2720005b9', class: `message-container ${categoryClass}` }, this.getIcon() && (h("span", { key: 'd7ae83dba633e39b5cc08e38526acd3f3b2f8427', class: "category" }, h("pn-icon", { key: '8331458b12bc1669cba3cfc637abc2280516feec', icon: this.getIcon(), color: this.blue700, "aria-hidden": "true", role: "presentation" }))), h("span", { key: '5aa89b7fe5ff9f65f69453b23d835aad16c68190', class: `message ${segmentClass}` }, h("slot", { key: '1565b98e7b83884d8bc30a5dfcd9fce88e607a1d' })))));
-    }
-    static get is() { return "pn-chat-message"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pn-chat-message.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pn-chat-message.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "category": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "MessageCategory",
-                    "resolved": "\"Agent\" | \"Bot\" | \"Button\" | \"ButtonResponse\" | \"Card\" | \"Link\" | \"System\" | \"User\"",
-                    "references": {
-                        "MessageCategory": {
-                            "location": "import",
-                            "path": "../types",
-                            "id": "src/components/widgets/pn-chat/types.ts::MessageCategory"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "category",
-                "reflect": false
-            },
-            "customerSegment": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CustomerSegment",
-                    "resolved": "string",
-                    "references": {
-                        "CustomerSegment": {
-                            "location": "import",
-                            "path": "../types",
-                            "id": "src/components/widgets/pn-chat/types.ts::CustomerSegment"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "customer-segment",
-                "reflect": false
-            },
-            "agentName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "agent-name",
-                "reflect": false
-            }
-        };
-    }
-}
-//# sourceMappingURL=pn-chat-message.js.map

package/dist/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pn-chat-message.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,GAAG,EAAQ,MAAM,qCAAqC,CAAC;AAQhE,MAAM,OAAO,aAAa;;;;;;IAKhB,SAAS,GAAW,uwDAAuwD,CAAC;IAC5xD,OAAO,GAAG,SAAS,CAAC;IAE5B,OAAO;QACL,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,MAAM;gBACT,OAAO,GAAG,CAAC;QACf,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,eAAe;QACb,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,gBAAgB;gBACnB,OAAO,gBAAgB,CAAC;YAC1B,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,gBAAgB,CAAC;YAC1B;gBACE,OAAO,SAAS,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QACzD,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAG,IAAI,CAAC,eAAe,EAAE;YAClC,4DAAK,KAAK,EAAE,qBAAqB,aAAa,EAAE;gBAC7C,IAAI,CAAC,OAAO,EAAE,IAAI,CACjB,6DAAM,KAAK,EAAC,UAAU;oBACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,iBAAc,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW,CAChG,CACR;gBACD,6DAAM,KAAK,EAAE,WAAW,YAAY,EAAE;oBACpC,8DAAa,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { faq, user } from 'pn-design-assets/pn-assets/icons.js';\n\nimport { AgentMessage, CustomerSegment, MessageCategory } from '../types';\n\n@Component({\n  tag: 'pn-chat-message',\n  styleUrl: 'pn-chat-message.scss',\n})\nexport class PnChatMessage {\n  @Prop() category!: MessageCategory;\n  @Prop() customerSegment!: CustomerSegment;\n  @Prop() agentName: string;\n\n  private robotIcon: string = '<?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"0 0 20 20\"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id=\"clippath\"> <rect class=\"st0\" width=\"20\" height=\"20\"/> </clipPath> </defs> <g class=\"st5\"> <g> <path class=\"st2\" d=\"M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z\"/> <path class=\"st3\" d=\"M10.5,4h-.5v2.8h.5v-2.8Z\"/> <path class=\"st3\" d=\"M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st3\" d=\"M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z\"/> <path class=\"st4\" d=\"M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z\"/> <path d=\"M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z\"/> <path class=\"st4\" d=\"M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z\"/> <path class=\"st4\" d=\"M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z\"/> <path class=\"st3\" d=\"M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z\"/> <path class=\"st6\" d=\"M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z\"/> <path class=\"st1\" d=\"M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st1\" d=\"M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path d=\"M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z\"/> </g> </g> </svg>';\n  private blue700 = 'blue700';\n\n  getIcon() {\n    let icon = null;\n    \n    switch (this.category) {\n      case 'Bot':\n        return this.robotIcon;\n      case 'Agent':\n        return this.agentName;\n      case 'Link':\n        return faq;\n    }\n\n    return icon;\n  }\n\n  getMessageClass(): string {\n    switch (this.category) {\n      case 'ButtonResponse':\n        return 'buttonresponse';\n      case 'User':\n        return 'user';\n      case 'System':\n        return 'system-message';\n      default: \n        return undefined;\n    }\n  }\n\n  render() {\n    const segmentClass = this.customerSegment?.toLowerCase() || '';\n    const categoryClass = this.category?.toLowerCase() || '';\n    return (\n      <Host class={ this.getMessageClass() }>\n        <div class={`message-container ${categoryClass}`}>\n          {this.getIcon() && (\n            <span class=\"category\">\n              <pn-icon icon={this.getIcon()} color={this.blue700} aria-hidden=\"true\" role=\"presentation\"></pn-icon>\n            </span>\n          )}\n          <span class={`message ${segmentClass}`}>\n            <slot></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.stories.js

@@ -1,219 +0,0 @@
-import { createDocumentation, createComponent } from "../../../../globals/documentation/story";
-import docs from "./pn-chat-message-docs.json";
-const { argTypes, textContent } = createDocumentation(docs);
-/** Write a short introduction */
-const meta = {
-    title: 'Components/Widgets/Chat message',
-    parameters: {
-        actions: {},
-        docs: {
-            description: {
-                story: textContent,
-            },
-        },
-    },
-    args: {},
-    argTypes,
-};
-export default meta;
-function createStory(messageCustomerSegment) {
-    const container = document.createElement('div');
-    container.style.display = 'flex';
-    container.style.flexDirection = 'column';
-    container.style.gap = '1rem';
-    const createBotMessage = (message) => {
-        const component = createComponent('pn-chat-message', {
-            'customerSegment': messageCustomerSegment,
-            'category': message.category,
-            'role': 'log',
-            'aria-live': 'polite',
-        });
-        const content = document.createElement('div');
-        content.textContent = message.content;
-        component.appendChild(content);
-        return component;
-    };
-    const createUserMessage = (message) => {
-        const component = createComponent('pn-chat-message', {
-            'customerSegment': messageCustomerSegment,
-            'category': message.category,
-            'class': message.class,
-            'role': 'log',
-            'aria-live': 'polite',
-        });
-        const content = document.createElement('div');
-        content.textContent = message.content;
-        component.appendChild(content);
-        return component;
-    };
-    const createAgentMessage = (message) => {
-        const component = createComponent('pn-chat-message', {
-            'customerSegment': messageCustomerSegment,
-            'category': message.category,
-            'role': 'log',
-            'aria-live': 'polite',
-            'agent-name': message.agentName,
-        });
-        const content = document.createElement('div');
-        content.textContent = message.content;
-        component.appendChild(content);
-        return component;
-    };
-    const createButtonMessage = (message) => {
-        const component = createComponent('pn-chat-message', {
-            customerSegment: messageCustomerSegment,
-            category: message.category,
-        });
-        const button = createComponent('pn-button', {
-            class: message.class,
-            role: 'button',
-        });
-        button.textContent = message.content;
-        button.addEventListener('keydown', e => {
-            console.log(e, 'button pressed');
-        });
-        component.appendChild(button);
-        return component;
-    };
-    const createLinkMessage = (message) => {
-        const component = createComponent('pn-chat-message', {
-            customerSegment: messageCustomerSegment,
-            category: message.category,
-        });
-        const link = document.createElement('a');
-        link.href = message.href;
-        link.setAttribute('role', 'link');
-        link.setAttribute('aria-label', message.content);
-        link.setAttribute('rel', 'noopener noreferrer');
-        const span = document.createElement('span');
-        span.className = 'content';
-        span.textContent = message.content;
-        link.appendChild(span);
-        const icon = createComponent('pn-icon', {
-            'color': 'blue700',
-            'aria-hidden': 'true',
-            'role': 'presentation',
-        });
-        link.appendChild(icon);
-        component.appendChild(link);
-        return component;
-    };
-    const createCardMessage = (message) => {
-        const component = createComponent('pn-chat-message', {
-            'customerSegment': messageCustomerSegment,
-            'category': message.category,
-            'data-card': '',
-            'role': 'article',
-        });
-        const heading = document.createElement('h2');
-        heading.className = 'card-heading';
-        heading.textContent = message.heading;
-        component.appendChild(heading);
-        const paragraph = document.createElement('p');
-        paragraph.textContent = message.content;
-        component.appendChild(paragraph);
-        if (message.buttons) {
-            const ctaContainer = document.createElement('div');
-            ctaContainer.classList.add('cta');
-            message.buttons.forEach(button => {
-                const btnElement = createComponent('pn-button', {
-                    'href': button.href,
-                    'class': button.class,
-                    'appearance': button.appearance,
-                    'variant': button.variant,
-                    'small': button.small,
-                    'role': 'button',
-                    'aria-label': button.content,
-                });
-                btnElement.textContent = button.content;
-                btnElement.addEventListener('keydown', e => {
-                    console.log(e, 'button pressed');
-                });
-                ctaContainer.appendChild(btnElement);
-            });
-            component.appendChild(ctaContainer);
-        }
-        return component;
-    };
-    const messages = [
-        createBotMessage({
-            messageId: "1234567890",
-            customerSegment: messageCustomerSegment,
-            category: 'Bot',
-            content: 'This is a bot (base) message',
-        }),
-        createUserMessage({
-            messageId: "1234567890",
-            customerSegment: messageCustomerSegment,
-            category: 'User',
-            content: 'This is a user message',
-            class: 'user',
-        }),
-        createButtonMessage({
-            messageId: "1234567890",
-            customerSegment: messageCustomerSegment,
-            category: 'Button',
-            content: 'Click me',
-            class: 'primary-button',
-            props: '',
-        }),
-        createLinkMessage({
-            messageId: "1234567890",
-            customerSegment: messageCustomerSegment,
-            category: 'Link',
-            content: 'Visit our website',
-            href: 'https://example.com'
-        }),
-        createAgentMessage({
-            messageId: "1234567890",
-            customerSegment: messageCustomerSegment,
-            category: 'Agent',
-            content: 'This is a agent message',
-            agentName: 'PN'
-        }),
-        createCardMessage({
-            messageId: "1234567890",
-            customerSegment: messageCustomerSegment,
-            category: 'Card',
-            heading: 'Card Title',
-            content: 'This is a card message with some content.',
-            buttons: [
-                {
-                    content: 'Primary Action',
-                    href: '#',
-                    class: 'read-more',
-                    appearance: '',
-                    variant: '',
-                    small: true,
-                },
-                {
-                    content: 'Secondary Action',
-                    href: 'https://example.com',
-                    class: 'read-more',
-                    appearance: 'light',
-                    variant: 'outlined',
-                    small: true,
-                },
-            ],
-        }),
-    ];
-    messages.forEach(message => {
-        container.appendChild(message);
-    });
-    return container;
-}
-export const ChatMessageExample = {
-    name: 'All message types (Private)',
-    render: () => {
-        const customerSegment = 'Private';
-        return createStory(customerSegment);
-    },
-};
-export const ChatMessageExample2 = {
-    name: 'All message types (Business)',
-    render: () => {
-        const customerSegment = 'Business';
-        return createStory(customerSegment);
-    },
-};
-//# sourceMappingURL=pn-chat-message.stories.js.map

package/dist/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pn-chat-message.stories.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-chat-message-docs.json';\nimport { AgentMessage, BotMessage, ButtonMessage, CardMessage, CustomerSegment, LinkMessage, UserMessage } from '../types';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\n/** Write a short introduction */\nconst meta: Meta<HTMLPnChatMessageElement> = {\n  title: 'Components/Widgets/Chat message',\n  parameters: {\n    actions: {},\n    docs: {\n      description: {\n        story: textContent,\n      },\n    },\n  },\n  args: {},\n  argTypes,\n};\n\ntype Story = StoryObj<HTMLPnChatMessageElement>;\n\nexport default meta;\n\nfunction createStory(messageCustomerSegment: string) {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.flexDirection = 'column';\n  container.style.gap = '1rem';\n\n  const createBotMessage = (message: BotMessage) => {\n    const component = createComponent('pn-chat-message', {\n      'customerSegment': messageCustomerSegment,\n      'category': message.category,\n      'role': 'log',\n      'aria-live': 'polite',\n    });\n    const content = document.createElement('div');\n    content.textContent = message.content;\n    component.appendChild(content);\n    return component;\n  };\n\n  const createUserMessage = (message: UserMessage) => {\n    const component = createComponent('pn-chat-message', {\n      'customerSegment': messageCustomerSegment,\n      'category': message.category,\n      'class': message.class,\n      'role': 'log',\n      'aria-live': 'polite',\n    });\n    const content = document.createElement('div');\n    content.textContent = message.content;\n    component.appendChild(content);\n    return component;\n  };\n\n  const createAgentMessage = (message: AgentMessage) => {\n    const component = createComponent('pn-chat-message', {\n      'customerSegment': messageCustomerSegment,\n      'category': message.category,\n      'role': 'log',\n      'aria-live': 'polite',\n      'agent-name': message.agentName,\n    });\n    const content = document.createElement('div');\n    content.textContent = message.content;\n    component.appendChild(content);\n    return component;\n  }\n\n  const createButtonMessage = (message: ButtonMessage) => {\n    const component = createComponent('pn-chat-message', {\n      customerSegment: messageCustomerSegment,\n      category: message.category,\n    });\n\n    const button = createComponent('pn-button', {\n      class: message.class,\n      role: 'button',\n    });\n    button.textContent = message.content;\n    button.addEventListener('keydown', e => {\n      console.log(e, 'button pressed');\n    });\n\n    component.appendChild(button);\n    return component;\n  };\n\n  const createLinkMessage = (message: LinkMessage) => {\n    const component = createComponent('pn-chat-message', {\n      customerSegment: messageCustomerSegment,\n      category: message.category,\n    });\n\n    const link = document.createElement('a');\n    link.href = message.href;\n    link.setAttribute('role', 'link');\n    link.setAttribute('aria-label', message.content);\n    link.setAttribute('rel', 'noopener noreferrer');\n\n    const span = document.createElement('span');\n    span.className = 'content';\n    span.textContent = message.content;\n    link.appendChild(span);\n\n    const icon = createComponent('pn-icon', {\n      'color': 'blue700',\n      'aria-hidden': 'true',\n      'role': 'presentation',\n    });\n    link.appendChild(icon);\n\n    component.appendChild(link);\n    return component;\n  };\n\n  const createCardMessage = (message: CardMessage) => {\n    const component = createComponent('pn-chat-message', {\n      'customerSegment': messageCustomerSegment,\n      'category': message.category,\n      'data-card': '',\n      'role': 'article',\n    });\n\n    const heading = document.createElement('h2');\n    heading.className = 'card-heading';\n    heading.textContent = message.heading;\n    component.appendChild(heading);\n\n    const paragraph = document.createElement('p');\n    paragraph.textContent = message.content;\n    component.appendChild(paragraph);\n\n    if (message.buttons) {\n      const ctaContainer = document.createElement('div');\n      ctaContainer.classList.add('cta');\n\n      message.buttons.forEach(button => {\n        const btnElement = createComponent('pn-button', {\n          'href': button.href,\n          'class': button.class,\n          'appearance': button.appearance,\n          'variant': button.variant,\n          'small': button.small,\n          'role': 'button',\n          'aria-label': button.content,\n        });\n        btnElement.textContent = button.content;\n        btnElement.addEventListener('keydown', e => {\n          console.log(e, 'button pressed');\n        });\n        ctaContainer.appendChild(btnElement);\n      });\n      component.appendChild(ctaContainer);\n    }\n\n    return component;\n  };\n\n  const messages = [\n    createBotMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Bot',\n      content: 'This is a bot (base) message',\n    }),\n\n    createUserMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'User',\n      content: 'This is a user message',\n      class: 'user',\n    }),\n\n    createButtonMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Button',\n      content: 'Click me',\n      class: 'primary-button',\n      props: '',\n    }),\n\n    createLinkMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Link',\n      content: 'Visit our website',\n      href: 'https://example.com'\n    }),\n\n    createAgentMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Agent',\n      content: 'This is a agent message',\n      agentName: 'PN'\n    }),\n\n    createCardMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Card',\n      heading: 'Card Title',\n      content: 'This is a card message with some content.',\n      buttons: [\n        {\n          content: 'Primary Action',\n          href: '#',\n          class: 'read-more',\n          appearance: '',\n          variant: '',\n          small: true,\n        },\n        {\n          content: 'Secondary Action',\n          href: 'https://example.com',\n          class: 'read-more',\n          appearance: 'light',\n          variant: 'outlined',\n          small: true,\n        },\n      ],\n    }),\n  ];\n\n  messages.forEach(message => {\n    container.appendChild(message);\n  });\n\n  return container;\n}\n\nexport const ChatMessageExample: Story = {\n  name: 'All message types (Private)',\n  render: () => {\n    const customerSegment: CustomerSegment = 'Private';\n\n    return createStory(customerSegment);\n  },\n};\n\nexport const ChatMessageExample2: Story = {\n  name: 'All message types (Business)',\n  render: () => {\n    const customerSegment: CustomerSegment = 'Business';\n\n    return createStory(customerSegment);\n  },\n};\n"]}

package/dist/collection/components/widgets/pn-chat/pn-chat-stories-constants.js

@@ -1,103 +0,0 @@
-export const styleSample = `
-  .sb-story,.sb-show-main { border: solid 1px #333; height: 500px; width: 800px; padding:40px; position: relative;}
-  .pn-chat { position:absolute; right:50px ;bottom:50px; transform-origin: bottom right }
-  }`;
-export const hardcodedMessages = {
-    "header": {
-        "body": null,
-        "button": null
-    },
-    "messages": [
-        {
-            "category": "System",
-            "content": "A customer service agent has entered the chat.",
-            "messageId": "14584740-7784-4749-9b39-bce31455ea55"
-        },
-        {
-            "category": "Bot",
-            "content": "Varmt välkommen till PostNords virtuella assistent. Jag kan hjälpa dig med frågor gällande brev och paket samt skicka dig vidare till vår kundservice.",
-            "messageId": "967ddba6-ba1c-44d1-9725-386b32dc3498"
-        },
-        {
-            "category": "Bot",
-            "content": "Hur kan jag hjälpa dig?",
-            "messageId": "b26624af-852b-49cf-a3e6-77cc046be71f"
-        },
-        {
-            "class": null,
-            "category": "User",
-            "content": "hejsan vart är mitt paket?",
-            "messageId": "74cadc59-86ad-4f11-b4b6-a263aa9dbad9"
-        },
-        {
-            "category": "Bot",
-            "content": "Om du har ett kollinummer som berör din fråga, skriv gärna det här.",
-            "messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5f"
-        }
-    ]
-};
-export const messageObjectReal = {
-    header: {
-        body: null,
-        button: null
-    },
-    messages: [
-        {
-            class: null,
-            category: "User",
-            content: "test",
-            messageId: "4a703929-4f6c-47df-bfc1-5a4ca6e31531"
-        },
-        {
-            class: null,
-            category: "User",
-            content: "test",
-            messageId: "00000000-0000-0000-0000-000000000000"
-        },
-        {
-            class: null,
-            category: "User",
-            content: "m",
-            messageId: "55d2851f-66d5-47d8-a4f7-1114a22d3d16"
-        },
-        {
-            class: "",
-            props: "1ef8d9da-316b-45de-b56a-ec595b8baef3",
-            category: "Button",
-            content: "End Chat",
-            messageId: "4cd676a7-5e8f-4781-b263-45a5ab1bc0e1"
-        },
-        {
-            class: "",
-            props: "9290fec2-bf1f-4713-9060-5f88ff8a7420",
-            category: "Button",
-            content: "Chat with Agent",
-            messageId: "4cd676a7-5e8f-4781-b263-45a5ab1bc0e1"
-        },
-        {
-            category: "Bot",
-            content: "Welcome! I am the PN bot. How can I help you today?\nPlease select an option below :",
-            messageId: "4cd676a7-5e8f-4781-b263-45a5ab1bc0e1"
-        },
-        {
-            class: "",
-            props: "fb0b3b50-97a0-40f7-872a-fc6d7ed0d379",
-            category: "Button",
-            content: "End Chat",
-            messageId: "2ecd1b25-8790-40a4-a596-efe0881f7519"
-        },
-        {
-            class: "",
-            props: "598e284a-4480-4e09-8f69-6c7046fea704",
-            category: "Button",
-            content: "Chat with Agent",
-            messageId: "2ecd1b25-8790-40a4-a596-efe0881f7519"
-        },
-        {
-            category: "Bot",
-            content: "Welcome! I am the PN bot. How can I help you today?\nPlease select an option below :",
-            messageId: "2ecd1b25-8790-40a4-a596-efe0881f7519"
-        }
-    ]
-};
-//# sourceMappingURL=pn-chat-stories-constants.js.map

package/dist/collection/components/widgets/pn-chat/pn-chat-stories-constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pn-chat-stories-constants.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-chat/pn-chat-stories-constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;;;IAGvB,CAAC;AAEL,MAAM,CAAC,MAAM,iBAAiB,GAC9B;IACE,QAAQ,EAAE;QACR,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,IAAI;KACf;IACD,UAAU,EAAE;QACV;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,gDAAgD;YAC3D,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,wJAAwJ;YACnK,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,yBAAyB;YACpC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,4BAA4B;YACvC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,qEAAqE;YAChF,WAAW,EAAE,sCAAsC;SACpD;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE;QACN,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;KACF;CACF,CAAC","sourcesContent":["export const styleSample = `\n  .sb-story,.sb-show-main { border: solid 1px #333; height: 500px; width: 800px; padding:40px; position: relative;}\n  .pn-chat { position:absolute; right:50px ;bottom:50px; transform-origin: bottom right }\n  }`;\n\nexport const hardcodedMessages = \n{\n  \"header\": {\n    \"body\": null,\n    \"button\": null\n  },\n  \"messages\": [\n    {\n      \"category\": \"System\",\n      \"content\": \"A customer service agent has entered the chat.\",\n      \"messageId\": \"14584740-7784-4749-9b39-bce31455ea55\"\n    },\n    {\n      \"category\": \"Bot\",\n      \"content\": \"Varmt välkommen till PostNords virtuella assistent. Jag kan hjälpa dig med frågor gällande brev och paket samt skicka dig vidare till vår kundservice.\",\n      \"messageId\": \"967ddba6-ba1c-44d1-9725-386b32dc3498\"\n    },\n    {\n      \"category\": \"Bot\",\n      \"content\": \"Hur kan jag hjälpa dig?\",\n      \"messageId\": \"b26624af-852b-49cf-a3e6-77cc046be71f\"\n    },\n    {\n      \"class\": null,\n      \"category\": \"User\",\n      \"content\": \"hejsan vart är mitt paket?\",\n      \"messageId\": \"74cadc59-86ad-4f11-b4b6-a263aa9dbad9\"\n    },\n    {\n      \"category\": \"Bot\",\n      \"content\": \"Om du har ett kollinummer som berör din fråga, skriv gärna det här.\",\n      \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5f\"\n    }\n  ]\n};\n\nexport const messageObjectReal = {\n  header: {\n    body: null,\n    button: null\n  },\n  messages: [\n    {\n      class: null,\n      category: \"User\",\n      content: \"test\",\n      messageId: \"4a703929-4f6c-47df-bfc1-5a4ca6e31531\"\n    },\n    {\n      class: null,\n      category: \"User\",\n      content: \"test\",\n      messageId: \"00000000-0000-0000-0000-000000000000\"\n    },\n    {\n      class: null,\n      category: \"User\",\n      content: \"m\",\n      messageId: \"55d2851f-66d5-47d8-a4f7-1114a22d3d16\"\n    },\n    {\n      class: \"\",\n      props: \"1ef8d9da-316b-45de-b56a-ec595b8baef3\",\n      category: \"Button\",\n      content: \"End Chat\",\n      messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n    },\n    {\n      class: \"\",\n      props: \"9290fec2-bf1f-4713-9060-5f88ff8a7420\",\n      category: \"Button\",\n      content: \"Chat with Agent\",\n      messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n    },\n    {\n      category: \"Bot\",\n      content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n      messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n    },\n    {\n      class: \"\",\n      props: \"fb0b3b50-97a0-40f7-872a-fc6d7ed0d379\",\n      category: \"Button\",\n      content: \"End Chat\",\n      messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n    },\n    {\n      class: \"\",\n      props: \"598e284a-4480-4e09-8f69-6c7046fea704\",\n      category: \"Button\",\n      content: \"Chat with Agent\",\n      messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n    },\n    {\n      category: \"Bot\",\n      content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n      messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n    }\n  ]\n};\n\n"]}