@progress/kendo-themes-html 7.0.3-dev.0 → 7.0.3-dev.2

package/dist/cjs/chat/tests/{chat-scrollable-deck.js → chat-content.js}

@@ -16,12 +16,12 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/chat/tests/chat-scrollable-deck.tsx
-var chat_scrollable_deck_exports = {};
-__export(chat_scrollable_deck_exports, {
-  default: () => chat_scrollable_deck_default
+// src/chat/tests/chat-content.tsx
+var chat_content_exports = {};
+__export(chat_content_exports, {
+  default: () => chat_content_default
 });
-module.exports = __toCommonJS(chat_scrollable_deck_exports);
+module.exports = __toCommonJS(chat_content_exports);
 
 // src/misc/class-names.ts
 var classNames = (...args) => {
@@ -5076,9 +5076,9 @@ var defaultOptions = {
 var Chat = (props) => {
   const {
     dir,
-    showToolbar = defaultOptions.showToolbar,
+    showToolbar,
     showMessageBox = defaultOptions.showMessageBox,
-    showMoreButton = defaultOptions.showMoreButton,
+    showMoreButton,
     ...other
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
@@ -5104,7 +5104,7 @@ var Chat = (props) => {
           }
         ),
         showToolbar && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "k-chat-toolbar k-toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { className: "k-scroll-button k-scroll-button-left k-hidden", icon: "chevron-left" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { className: classNames("k-scroll-button", "k-scroll-button-left", dir === "rtl" ? "" : "k-hidden"), icon: "chevron-left" }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "k-toolbar-group k-button-list", children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { icon: "arrow-rotate-cw" }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { icon: "gear" }),
@@ -5116,7 +5116,7 @@ var Chat = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { icon: "question-circle" }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { icon: "trash" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { className: "k-scroll-button k-scroll-button-right", icon: "chevron-right" })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { className: classNames("k-scroll-button", "k-scroll-button-right", dir === "rtl" && "k-hidden"), icon: "chevron-right" })
         ] })
       ]
     }
@@ -5334,44 +5334,122 @@ ChatQuickReply.options = options17;
 ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME;
 ChatQuickReply.defaultOptions = defaultOptions2;
 
-// src/chat/tests/chat-scrollable-deck.tsx
+// src/chat/templates/chat-normal.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var ChatNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  Chat,
+  {
+    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "k-timestamp", children: "Day, Month 7, 2023" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessageGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessage, { className: "k-only" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessageGroup, { alt: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessage, { className: "k-only" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessageGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessage, { className: "k-only", text: "Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior." }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessageGroup, { alt: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessage, { className: "k-only", text: "Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior" }) })
+    ] }),
+    ...props
+  }
+);
+
+// src/chat/templates/chat-with-toolbar.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+
+// src/chat/templates/chat-with-options.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+
+// src/chat/tests/chat-content.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var styles = `
+    .k-chat {
+        height: 650px;
+    }
+
     /* needed for test */
     .k-chat .k-chat-bubble {
         white-space: normal;
     }
 `;
-var chat_scrollable_deck_default = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Chat, { showToolbar: false, showMessageBox: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "k-timestamp", children: "Card Deck Scrollable" }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessageGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChatMessage, { className: "k-only", text: "Message before card deck" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "k-card-deck-scrollwrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { icon: "chevron-left" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(CardDeck, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." })
+var chat_content_default = () => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: "Bubbles" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: "Quick replies & card deck" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ChatNormal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "k-timestamp", children: "Bubbles With Avatar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { alt: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "k-timestamp", children: "Bubbles Without Avatar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { avatar: null, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { alt: true, avatar: null, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { avatar: null, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only", text: "Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior." }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { alt: true, avatar: null, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only", text: "Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior" }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ChatNormal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "k-timestamp", children: "Quick Replies" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatQuickReply, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "k-timestamp", children: "Card Deck Normal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardDeck, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: "Some quick example text to make up the bulk of the card's content." })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: "Some quick example text to make up the bulk of the card's content." })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: "Some quick example text to make up the bulk of the card's content." })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: "Some quick example text to make up the bulk of the card's content." })
         ] }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { icon: "chevron-right" })
-    ] })
-  ] }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { alt: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only", text: "Message after card deck" }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: "Messages with attachment list" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: "Card deck scrollable" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ChatNormal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { avatar: null, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only", text: "A message with attachment" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "k-card-list", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { width: "200px", height: "200px", src: "/packages/html/assets/sofia.jpg" }) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { alt: true, avatar: null, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only", text: "Another message with attachment" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "k-card-list", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { width: "200px", height: "200px", src: "/packages/html/assets/sofia.jpg" }) }) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ChatNormal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "k-timestamp", children: "timestamp - day, month 7, 2023" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only", text: "Message before card deck" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "k-card-deck-scrollwrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { icon: "chevron-left" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardDeck, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: "Some quick example text to make up the bulk of the card's content." })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: "Some quick example text to make up the bulk of the card's content." })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: "Some quick example text to make up the bulk of the card's content." })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CardBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: "Some quick example text to make up the bulk of the card's content." })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { icon: "chevron-right" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessageGroup, { alt: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatMessage, { className: "k-only", text: "Message after card deck" }) })
+    ] }) })
+  ] })
 ] });