@postnord/pn-marketweb-components 3.5.2 → 4.0.0

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

@@ -0,0 +1,243 @@
+export const closeButtonProps = {
+    'data-action': 'minimize',
+    'aria-label': 'Minimize chat',
+};
+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 messagesObjectPrivate = {
+    header: {
+        body: '',
+        button: {
+            content: 'Private',
+            href: '#',
+            class: '',
+            appearance: 'light',
+            variant: 'outlined',
+            small: 'true',
+        },
+    },
+    messages: [
+        {
+            category: 'Bot',
+            content: 'Are you already a private customer, please sign in to the PostNord Portal',
+        },
+        {
+            category: 'Button',
+            content: 'Sign in',
+            class: 'login-btn',
+        },
+        {
+            category: 'Link',
+            content: 'How can I become a customer',
+            href: '#',
+        },
+        {
+            category: 'Link',
+            content: 'What is the PostNord Portal',
+            href: '#',
+        },
+        {
+            category: 'User',
+            content: 'Please help me find some related information.',
+        },
+        {
+            category: 'Bot',
+            content: 'Find related articles for you as a private customer.',
+        },
+        {
+            category: 'Card',
+            heading: 'API example',
+            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate urna vel porta.',
+            buttons: [
+                {
+                    content: 'Read article',
+                    href: '#',
+                    class: 'read-more',
+                    appearance: 'light',
+                    variant: 'outlined',
+                },
+            ],
+        },
+        {
+            category: 'Card',
+            heading: 'Custom',
+            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate urna vel porta. Lorem ipsum. Dolor.',
+            buttons: [
+                {
+                    content: 'Read article',
+                    href: '#',
+                    class: 'read-more',
+                    appearance: 'light',
+                    variant: 'outlined',
+                },
+            ],
+        },
+        {
+            category: 'Button',
+            content: 'End the conversation (minimizes chat)',
+            class: '',
+            props: JSON.stringify(closeButtonProps),
+        },
+        {
+            category: 'System',
+            content: 'A customer service agent has entered the chat.',
+        },
+    ],
+};
+export const messagesObjectBusiness = {
+    header: {
+        body: '',
+        button: {
+            content: 'Business',
+            href: '#',
+            class: '',
+            appearance: 'light',
+            variant: 'outlined',
+            small: 'true',
+        },
+    },
+    messages: [
+        {
+            category: 'Bot',
+            content: 'Are you already a business customer please sign in to the PostNord Portal',
+        },
+        {
+            category: 'Button',
+            content: 'Sign in',
+            class: 'login-btn',
+        },
+        {
+            category: 'Link',
+            content: 'How can I become a customer',
+            href: '#',
+        },
+        {
+            category: 'Link',
+            content: 'What is the PostNord Portal',
+            href: '#',
+        },
+        {
+            category: 'User',
+            content: 'Please help me find some related information.',
+        },
+        {
+            category: 'Bot',
+            content: 'Find related articles for you as a business customer.',
+        },
+        {
+            category: 'Card',
+            heading: 'API example',
+            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate urna vel porta.',
+            buttons: [
+                {
+                    content: 'Read article',
+                    href: '#',
+                    class: 'read-more',
+                    appearance: 'light',
+                    variant: 'outlined',
+                },
+            ],
+        },
+        {
+            category: 'Card',
+            heading: 'Custom',
+            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate urna vel porta. Lorem ipsum. Dolor.',
+            buttons: [
+                {
+                    content: 'Read article',
+                    href: '#',
+                    class: 'read-more',
+                    appearance: 'light',
+                    variant: 'outlined',
+                },
+            ],
+        },
+        {
+            category: 'Button',
+            content: 'End the conversation (minimizes chat)',
+            class: '',
+            props: JSON.stringify(closeButtonProps),
+        },
+    ],
+};
+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"
+        }
+    ]
+};
+export const messagesObjectEmpty = {
+    header: {
+        body: '',
+        button: {
+            content: 'Private',
+            href: '#',
+            class: '',
+            appearance: 'light',
+            variant: 'outlined',
+            small: 'true',
+        },
+    },
+    messages: [],
+};
+//# sourceMappingURL=pn-chat-stories-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pn-chat-stories-constants.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-chat/pn-chat-stories-constants.ts"],"names":[],"mappings":"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","sourcesContent":["export const closeButtonProps = {\n  'data-action': 'minimize',\n  'aria-label': 'Minimize chat',\n};\n\nexport 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 messagesObjectPrivate = {\n  header: {\n    body: '',\n    button: {\n      content: 'Private',\n      href: '#',\n      class: '',\n      appearance: 'light',\n      variant: 'outlined',\n      small: 'true',\n    },\n  },\n  messages: [\n    {\n      category: 'Bot',\n      content: 'Are you already a private customer, please sign in to the PostNord Portal',\n    },\n    {\n      category: 'Button',\n      content: 'Sign in',\n      class: 'login-btn',\n    },\n    {\n      category: 'Link',\n      content: 'How can I become a customer',\n      href: '#',\n    },\n    {\n      category: 'Link',\n      content: 'What is the PostNord Portal',\n      href: '#',\n    },\n    {\n      category: 'User',\n      content: 'Please help me find some related information.',\n    },\n    {\n      category: 'Bot',\n      content: 'Find related articles for you as a private customer.',\n    },\n    {\n      category: 'Card',\n      heading: 'API example',\n      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate urna vel porta.',\n      buttons: [\n        {\n          content: 'Read article',\n          href: '#',\n          class: 'read-more',\n          appearance: 'light',\n          variant: 'outlined',\n        },\n      ],\n    },\n    {\n      category: 'Card',\n      heading: 'Custom',\n      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate urna vel porta. Lorem ipsum. Dolor.',\n      buttons: [\n        {\n          content: 'Read article',\n          href: '#',\n          class: 'read-more',\n          appearance: 'light',\n          variant: 'outlined',\n        },\n      ],\n    },\n    {\n      category: 'Button',\n      content: 'End the conversation (minimizes chat)',\n      class: '',\n      props: JSON.stringify(closeButtonProps),\n    },\n    {\n      category: 'System',\n      content: 'A customer service agent has entered the chat.',\n    },\n  ],\n};\n\nexport const messagesObjectBusiness = {\n  header: {\n    body: '',\n    button: {\n      content: 'Business',\n      href: '#',\n      class: '',\n      appearance: 'light',\n      variant: 'outlined',\n      small: 'true',\n    },\n  },\n  messages: [\n    {\n      category: 'Bot',\n      content: 'Are you already a business customer please sign in to the PostNord Portal',\n    },\n    {\n      category: 'Button',\n      content: 'Sign in',\n      class: 'login-btn',\n    },\n    {\n      category: 'Link',\n      content: 'How can I become a customer',\n      href: '#',\n    },\n    {\n      category: 'Link',\n      content: 'What is the PostNord Portal',\n      href: '#',\n    },\n    {\n      category: 'User',\n      content: 'Please help me find some related information.',\n    },\n    {\n      category: 'Bot',\n      content: 'Find related articles for you as a business customer.',\n    },\n    {\n      category: 'Card',\n      heading: 'API example',\n      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate urna vel porta.',\n      buttons: [\n        {\n          content: 'Read article',\n          href: '#',\n          class: 'read-more',\n          appearance: 'light',\n          variant: 'outlined',\n        },\n      ],\n    },\n    {\n      category: 'Card',\n      heading: 'Custom',\n      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate urna vel porta. Lorem ipsum. Dolor.',\n      buttons: [\n        {\n          content: 'Read article',\n          href: '#',\n          class: 'read-more',\n          appearance: 'light',\n          variant: 'outlined',\n        },\n      ],\n    },\n    {\n      category: 'Button',\n      content: 'End the conversation (minimizes chat)',\n      class: '',\n      props: JSON.stringify(closeButtonProps),\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\nexport const messagesObjectEmpty = {\n  header: {\n    body: '',\n    button: {\n      content: 'Private',\n      href: '#',\n      class: '',\n      appearance: 'light',\n      variant: 'outlined',\n      small: 'true',\n    },\n  },\n  messages: [],\n};\n"]}

package/collection/components/widgets/pn-chat/pn-chat.css

@@ -0,0 +1,238 @@
+pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
+  min-height: initial;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+.pn-chat {
+  display: flex;
+  flex-direction: column;
+  height: 600px;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 1.6rem;
+}
+@media (max-width: 768px) {
+  .pn-chat:not(.minimized) {
+    position: absolute;
+    height: 100dvh;
+    width: 100dvw;
+    max-width: 100%;
+    top: 0;
+    left: 0;
+  }
+  .pn-chat.minimized {
+    height: 70px;
+    border-radius: 0.8rem 0.8rem 0 0;
+  }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  .pn-chat {
+    max-width: 350px;
+  }
+}
+.pn-chat .chat-header {
+  background-color: #005d92;
+  color: #ffffff;
+  padding: 0.8rem;
+  padding-left: 1.6rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .pn-chat .chat-header {
+    border-radius: 1.6rem 1.6rem 0 0;
+  }
+}
+.pn-chat .chat-header .chat-controls {
+  display: flex;
+}
+.pn-chat .chat-header pn-button.minimize-btn button.pn-button {
+  padding-bottom: 0;
+}
+.pn-chat .chat-header pn-button.minimize-btn button.pn-button .pn-button-content {
+  align-items: flex-end;
+}
+.pn-chat .chat-header #chat-title {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+.pn-chat .chat-main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-y: auto;
+  gap: 1.6rem;
+  padding: 1.6rem;
+  padding-bottom: 3.2rem;
+  border-left: 1px solid #d3cecb;
+  border-right: 1px solid #d3cecb;
+  background-color: #ffffff;
+}
+.pn-chat .chat-main.loading-chat-main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 1.6rem;
+}
+.pn-chat .chat-loading-spinner {
+  background-color: #005d92;
+  width: 4.8rem;
+  height: 4.8rem;
+  border-radius: 4.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pn-chat .chat-loading-content {
+  color: #2d2013;
+  font-size: 1.6rem;
+  font-weight: 400;
+}
+.pn-chat .chat-overview {
+  text-align: center;
+}
+.pn-chat .chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  text-align: center;
+}
+.pn-chat .card-container .slider-wrapper {
+  margin: 0;
+}
+.pn-chat .card-container .slides-container {
+  display: flex;
+  gap: 1rem;
+}
+.pn-chat .card-container .slide:nth-child(even) [data-card] {
+  width: calc(100% - 1rem);
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.95);
+  }
+}
+.pn-chat .chat-footer {
+  background: #ffffff;
+  border: 1px solid #d3cecb;
+  border-top: none;
+}
+.pn-chat .chat-footer .form {
+  display: flex;
+  gap: 0.7rem;
+  padding: 1rem;
+}
+.pn-chat .chat-input-container {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+  gap: 0.7rem;
+  background: #f9f8f8;
+  border-radius: 6.4rem;
+}
+.pn-chat .chat-input-container .chat-text-input {
+  text-indent: 0.8rem;
+  border: none;
+  background: transparent;
+  width: 100%;
+  outline: 0.2rem solid transparent;
+  outline-offset: 0.2rem;
+}
+.pn-chat .chat-input-container .chat-text-input:focus {
+  border-radius: 6.4rem;
+}
+.pn-chat .chat-input-container .chat-text-input:focus-visible {
+  outline-color: #005d92;
+}
+.pn-chat .chat-input-container .chat-disabled-button {
+  display: flex;
+  width: 3.5em;
+  min-height: 3em;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+}
+.pn-chat.minimized {
+  background: transparent;
+  border: initial;
+  box-shadow: initial;
+  max-width: 50px;
+  max-height: 50px;
+  min-width: initial;
+  min-height: initial;
+  transform: scale(0.95);
+  cursor: pointer;
+}
+.pn-chat.minimized .minimize-btn,
+.pn-chat.minimized .close-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.pn-chat.minimized .minimize-btn button,
+.pn-chat.minimized .close-btn button {
+  display: none;
+}
+.pn-chat.minimized .chat-main,
+.pn-chat.minimized .chat-footer {
+  display: none;
+}
+.pn-chat.closed {
+  display: none;
+}
+.pn-chat .open-chat-btn .pn-button {
+  width: 5.6rem;
+  height: 5.6rem;
+}
+.pn-chat .open-chat-btn .pn-icon svg {
+  width: 3.2rem;
+  height: 3.2rem;
+}
+.pn-chat .indicator-icon {
+  padding: 0.2rem 0.8rem;
+  margin-right: auto;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  visibility: hidden;
+}
+
+@media (max-width: 768px) {
+  body.chat-open {
+    overflow: hidden;
+  }
+}