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

package/dist/esm/captcha/captcha.spec.js

@@ -4769,17 +4769,53 @@ import { jsx as jsx21, jsxs as jsxs4 } from "react/jsx-runtime";
 // src/textbox/templates/textbox-suffix.tsx
 import { jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
 
+// src/skeleton/skeleton.spec.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SKELETON_CLASSNAME = `k-skeleton`;
+var states13 = [];
+var options12 = {};
+var defaultProps10 = {
+  shape: "text",
+  animation: "pulse"
+};
+var Skeleton = (props) => {
+  const {
+    shape = defaultProps10.shape,
+    animation = defaultProps10.animation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx23(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SKELETON_CLASSNAME,
+        {
+          [`k-skeleton-${shape}`]: shape,
+          [`k-skeleton-${animation}`]: animation
+        }
+      ),
+      style: props.style
+    }
+  );
+};
+Skeleton.states = states13;
+Skeleton.options = options12;
+Skeleton.className = SKELETON_CLASSNAME;
+Skeleton.defaultProps = defaultProps10;
+
 // src/captcha/captcha.spec.tsx
-import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
 var CAPTCHA_CLASSNAME = `k-captcha`;
-var states13 = [
+var states14 = [
   States.loading,
   States.valid,
   States.invalid,
   States.disabled
 ];
-var options12 = {};
-var defaultProps10 = {};
+var options13 = {};
+var defaultProps11 = {};
 var Captcha = (props) => {
   const {
     value,
@@ -4806,29 +4842,23 @@ var Captcha = (props) => {
       children: [
         /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image-wrap k-hstack", children: [
           /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image", children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "img",
               {
                 className: classNames({ "k-hidden": loading }),
                 src: "/packages/html/assets/captcha.jpg"
               }
             ),
-            loading && /* @__PURE__ */ jsx23(
-              "span",
-              {
-                style: { width: "100%", height: "100%" },
-                className: "k-skeleton k-skeleton-rect"
-              }
-            )
+            loading && /* @__PURE__ */ jsx24(Skeleton, { shape: "rect", style: { width: "100%", height: "100%" } })
           ] }),
           /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image-controls k-vstack", children: [
-            /* @__PURE__ */ jsx23(Button, { icon: "volume-up", disabled: loading === true }),
-            /* @__PURE__ */ jsx23(Button, { icon: "arrow-rotate-cw", disabled: loading === true })
+            /* @__PURE__ */ jsx24(Button, { icon: "volume-up", disabled: loading === true }),
+            /* @__PURE__ */ jsx24(Button, { icon: "arrow-rotate-cw", disabled: loading === true })
           ] }),
-          /* @__PURE__ */ jsx23("div", { className: "k-captcha-volume-control k-vstack k-pos-absolute k-hidden", children: /* @__PURE__ */ jsx23("div", { className: "k-widget k-slider k-slider-vertical" }) })
+          /* @__PURE__ */ jsx24("div", { className: "k-captcha-volume-control k-vstack k-pos-absolute k-hidden", children: /* @__PURE__ */ jsx24("div", { className: "k-widget k-slider k-slider-vertical" }) })
         ] }),
         /* @__PURE__ */ jsxs6("div", { className: "k-captcha-input k-vstack", children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(
             Textbox,
             {
               value,
@@ -4836,16 +4866,16 @@ var Captcha = (props) => {
               disabled: loading === true
             }
           ),
-          valid && !loading && /* @__PURE__ */ jsx23("span", { className: "k-captcha-validation-message !k-text-success", children: "Verification Success" })
+          valid && !loading && /* @__PURE__ */ jsx24("span", { className: "k-captcha-validation-message !k-text-success", children: "Verification Success" })
         ] })
       ]
     }
   );
 };
-Captcha.states = states13;
-Captcha.options = options12;
+Captcha.states = states14;
+Captcha.options = options13;
 Captcha.className = CAPTCHA_CLASSNAME;
-Captcha.defaultProps = defaultProps10;
+Captcha.defaultProps = defaultProps11;
 var captcha_spec_default = Captcha;
 export {
   CAPTCHA_CLASSNAME,

package/dist/esm/captcha/tests/captcha-loading.js

@@ -4769,17 +4769,53 @@ import { jsx as jsx21, jsxs as jsxs4 } from "react/jsx-runtime";
 // src/textbox/templates/textbox-suffix.tsx
 import { jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
 
+// src/skeleton/skeleton.spec.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SKELETON_CLASSNAME = `k-skeleton`;
+var states13 = [];
+var options12 = {};
+var defaultProps10 = {
+  shape: "text",
+  animation: "pulse"
+};
+var Skeleton = (props) => {
+  const {
+    shape = defaultProps10.shape,
+    animation = defaultProps10.animation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx23(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SKELETON_CLASSNAME,
+        {
+          [`k-skeleton-${shape}`]: shape,
+          [`k-skeleton-${animation}`]: animation
+        }
+      ),
+      style: props.style
+    }
+  );
+};
+Skeleton.states = states13;
+Skeleton.options = options12;
+Skeleton.className = SKELETON_CLASSNAME;
+Skeleton.defaultProps = defaultProps10;
+
 // src/captcha/captcha.spec.tsx
-import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
 var CAPTCHA_CLASSNAME = `k-captcha`;
-var states13 = [
+var states14 = [
   States.loading,
   States.valid,
   States.invalid,
   States.disabled
 ];
-var options12 = {};
-var defaultProps10 = {};
+var options13 = {};
+var defaultProps11 = {};
 var Captcha = (props) => {
   const {
     value,
@@ -4806,29 +4842,23 @@ var Captcha = (props) => {
       children: [
         /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image-wrap k-hstack", children: [
           /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image", children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "img",
               {
                 className: classNames({ "k-hidden": loading }),
                 src: "/packages/html/assets/captcha.jpg"
               }
             ),
-            loading && /* @__PURE__ */ jsx23(
-              "span",
-              {
-                style: { width: "100%", height: "100%" },
-                className: "k-skeleton k-skeleton-rect"
-              }
-            )
+            loading && /* @__PURE__ */ jsx24(Skeleton, { shape: "rect", style: { width: "100%", height: "100%" } })
           ] }),
           /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image-controls k-vstack", children: [
-            /* @__PURE__ */ jsx23(Button, { icon: "volume-up", disabled: loading === true }),
-            /* @__PURE__ */ jsx23(Button, { icon: "arrow-rotate-cw", disabled: loading === true })
+            /* @__PURE__ */ jsx24(Button, { icon: "volume-up", disabled: loading === true }),
+            /* @__PURE__ */ jsx24(Button, { icon: "arrow-rotate-cw", disabled: loading === true })
           ] }),
-          /* @__PURE__ */ jsx23("div", { className: "k-captcha-volume-control k-vstack k-pos-absolute k-hidden", children: /* @__PURE__ */ jsx23("div", { className: "k-widget k-slider k-slider-vertical" }) })
+          /* @__PURE__ */ jsx24("div", { className: "k-captcha-volume-control k-vstack k-pos-absolute k-hidden", children: /* @__PURE__ */ jsx24("div", { className: "k-widget k-slider k-slider-vertical" }) })
         ] }),
         /* @__PURE__ */ jsxs6("div", { className: "k-captcha-input k-vstack", children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(
             Textbox,
             {
               value,
@@ -4836,22 +4866,22 @@ var Captcha = (props) => {
               disabled: loading === true
             }
           ),
-          valid && !loading && /* @__PURE__ */ jsx23("span", { className: "k-captcha-validation-message !k-text-success", children: "Verification Success" })
+          valid && !loading && /* @__PURE__ */ jsx24("span", { className: "k-captcha-validation-message !k-text-success", children: "Verification Success" })
         ] })
       ]
     }
   );
 };
-Captcha.states = states13;
-Captcha.options = options12;
+Captcha.states = states14;
+Captcha.options = options13;
 Captcha.className = CAPTCHA_CLASSNAME;
-Captcha.defaultProps = defaultProps10;
+Captcha.defaultProps = defaultProps11;
 
 // src/captcha/tests/captcha-loading.tsx
-import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
-var captcha_loading_default = () => /* @__PURE__ */ jsx24(Fragment10, { children: /* @__PURE__ */ jsxs7("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
-  /* @__PURE__ */ jsx24("span", { children: "Captcha Loading" }),
-  /* @__PURE__ */ jsx24("section", { children: /* @__PURE__ */ jsx24(Captcha, { loading: true }) })
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
+var captcha_loading_default = () => /* @__PURE__ */ jsx25(Fragment10, { children: /* @__PURE__ */ jsxs7("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
+  /* @__PURE__ */ jsx25("span", { children: "Captcha Loading" }),
+  /* @__PURE__ */ jsx25("section", { children: /* @__PURE__ */ jsx25(Captcha, { loading: true }) })
 ] }) });
 export {
   captcha_loading_default as default

package/dist/esm/captcha/tests/captcha.js

@@ -4769,17 +4769,53 @@ import { jsx as jsx21, jsxs as jsxs4 } from "react/jsx-runtime";
 // src/textbox/templates/textbox-suffix.tsx
 import { jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
 
+// src/skeleton/skeleton.spec.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SKELETON_CLASSNAME = `k-skeleton`;
+var states13 = [];
+var options12 = {};
+var defaultProps10 = {
+  shape: "text",
+  animation: "pulse"
+};
+var Skeleton = (props) => {
+  const {
+    shape = defaultProps10.shape,
+    animation = defaultProps10.animation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx23(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SKELETON_CLASSNAME,
+        {
+          [`k-skeleton-${shape}`]: shape,
+          [`k-skeleton-${animation}`]: animation
+        }
+      ),
+      style: props.style
+    }
+  );
+};
+Skeleton.states = states13;
+Skeleton.options = options12;
+Skeleton.className = SKELETON_CLASSNAME;
+Skeleton.defaultProps = defaultProps10;
+
 // src/captcha/captcha.spec.tsx
-import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
 var CAPTCHA_CLASSNAME = `k-captcha`;
-var states13 = [
+var states14 = [
   States.loading,
   States.valid,
   States.invalid,
   States.disabled
 ];
-var options12 = {};
-var defaultProps10 = {};
+var options13 = {};
+var defaultProps11 = {};
 var Captcha = (props) => {
   const {
     value,
@@ -4806,29 +4842,23 @@ var Captcha = (props) => {
       children: [
         /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image-wrap k-hstack", children: [
           /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image", children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "img",
               {
                 className: classNames({ "k-hidden": loading }),
                 src: "/packages/html/assets/captcha.jpg"
               }
             ),
-            loading && /* @__PURE__ */ jsx23(
-              "span",
-              {
-                style: { width: "100%", height: "100%" },
-                className: "k-skeleton k-skeleton-rect"
-              }
-            )
+            loading && /* @__PURE__ */ jsx24(Skeleton, { shape: "rect", style: { width: "100%", height: "100%" } })
           ] }),
           /* @__PURE__ */ jsxs6("div", { className: "k-captcha-image-controls k-vstack", children: [
-            /* @__PURE__ */ jsx23(Button, { icon: "volume-up", disabled: loading === true }),
-            /* @__PURE__ */ jsx23(Button, { icon: "arrow-rotate-cw", disabled: loading === true })
+            /* @__PURE__ */ jsx24(Button, { icon: "volume-up", disabled: loading === true }),
+            /* @__PURE__ */ jsx24(Button, { icon: "arrow-rotate-cw", disabled: loading === true })
           ] }),
-          /* @__PURE__ */ jsx23("div", { className: "k-captcha-volume-control k-vstack k-pos-absolute k-hidden", children: /* @__PURE__ */ jsx23("div", { className: "k-widget k-slider k-slider-vertical" }) })
+          /* @__PURE__ */ jsx24("div", { className: "k-captcha-volume-control k-vstack k-pos-absolute k-hidden", children: /* @__PURE__ */ jsx24("div", { className: "k-widget k-slider k-slider-vertical" }) })
         ] }),
         /* @__PURE__ */ jsxs6("div", { className: "k-captcha-input k-vstack", children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(
             Textbox,
             {
               value,
@@ -4836,22 +4866,22 @@ var Captcha = (props) => {
               disabled: loading === true
             }
           ),
-          valid && !loading && /* @__PURE__ */ jsx23("span", { className: "k-captcha-validation-message !k-text-success", children: "Verification Success" })
+          valid && !loading && /* @__PURE__ */ jsx24("span", { className: "k-captcha-validation-message !k-text-success", children: "Verification Success" })
         ] })
       ]
     }
   );
 };
-Captcha.states = states13;
-Captcha.options = options12;
+Captcha.states = states14;
+Captcha.options = options13;
 Captcha.className = CAPTCHA_CLASSNAME;
-Captcha.defaultProps = defaultProps10;
+Captcha.defaultProps = defaultProps11;
 
 // src/captcha/tests/captcha.tsx
-import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
-var captcha_default = () => /* @__PURE__ */ jsx24(Fragment10, { children: /* @__PURE__ */ jsxs7("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
-  /* @__PURE__ */ jsx24("span", { children: "Captcha" }),
-  /* @__PURE__ */ jsx24("section", { children: /* @__PURE__ */ jsx24(Captcha, { value: "YR890", valid: true }) })
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
+var captcha_default = () => /* @__PURE__ */ jsx25(Fragment10, { children: /* @__PURE__ */ jsxs7("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
+  /* @__PURE__ */ jsx25("span", { children: "Captcha" }),
+  /* @__PURE__ */ jsx25("section", { children: /* @__PURE__ */ jsx25(Captcha, { value: "YR890", valid: true }) })
 ] }) });
 export {
   captcha_default as default

package/dist/esm/chat/chat-message-group.js

@@ -0,0 +1,239 @@
+// src/misc/class-names.ts
+var classNames = (...args) => {
+  return args.filter((arg) => arg !== true && Boolean(arg)).map((arg) => {
+    return Array.isArray(arg) ? classNames(...arg) : typeof arg === "object" ? Object.keys(arg).map((key, idx) => arg[idx] || arg[key] && key || null).filter((el) => el !== null).join(" ") : arg;
+  }).filter((arg) => Boolean(arg)).join(" ");
+};
+
+// src/misc/component-class-names.ts
+var optionClassNames = (componentClassName, props) => {
+  return classNames(
+    {
+      [`${componentClassName}-xs`]: props.size === "xsmall",
+      [`${componentClassName}-sm`]: props.size === "small",
+      [`${componentClassName}-md`]: props.size === "medium",
+      [`${componentClassName}-lg`]: props.size === "large",
+      [`${componentClassName}-xl`]: props.size === "xlarge",
+      [`${componentClassName}-xxl`]: props.size === "xxlarge",
+      [`${componentClassName}-xxxl`]: props.size === "xxxlarge"
+    },
+    {
+      [`${componentClassName}-${props.fillMode}`]: props.fillMode
+    },
+    {
+      [`${componentClassName}-${props.fillMode}-${props.themeColor}`]: props.fillMode && props.themeColor
+    },
+    {
+      [`${componentClassName}-${props.themeColor}`]: props.themeColor && props.fillMode === void 0
+    },
+    {
+      "k-rounded-sm": props.rounded === "small",
+      "k-rounded-md": props.rounded === "medium",
+      "k-rounded-lg": props.rounded === "large",
+      "k-rounded-full": props.rounded === "full"
+    }
+  );
+};
+var stateClassNames = (_componentClassName, props) => {
+  return classNames({
+    "k-valid": props.valid,
+    "k-invalid": props.invalid,
+    "k-hover": props.hover,
+    "k-focus": props.focus,
+    "k-checked": props.checked,
+    "k-active": props.active,
+    "k-selected": props.selected,
+    "k-disabled": props.disabled,
+    "k-indeterminate": props.indeterminate && !props.checked,
+    "k-loading": props.loading,
+    "k-empty": props.empty,
+    "k-readonly": props.readonly
+  });
+};
+
+// src/misc/theme.ts
+var Size = {
+  "xsmall": "xsmall",
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "xlarge": "xlarge",
+  "xxlarge": "xxlarge",
+  "xxxlarge": "xxxlarge"
+};
+var Roundness = {
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "full": "full"
+};
+var FillMode = {
+  "solid": "solid",
+  "flat": "flat",
+  "outline": "outline",
+  "clear": "clear",
+  "link": "link"
+};
+var ThemeColor = {
+  "inherit": "inherit",
+  "base": "base",
+  "primary": "primary",
+  "secondary": "secondary",
+  "tertiary": "tertiary",
+  "info": "info",
+  "success": "success",
+  "warning": "warning",
+  "error": "error",
+  "dark": "dark",
+  "light": "light",
+  "inverse": "inverse"
+};
+var States = {
+  "open": "open",
+  "hover": "hover",
+  "focus": "focus",
+  "active": "active",
+  "selected": "selected",
+  "disabled": "disabled",
+  "valid": "valid",
+  "invalid": "invalid",
+  "loading": "loading",
+  "required": "required",
+  "empty": "empty",
+  "indeterminate": "indeterminate",
+  "checked": "checked",
+  "readonly": "readonly"
+};
+
+// src/avatar/avatar.spec.tsx
+import { jsx } from "react/jsx-runtime";
+var AVATAR_CLASSNAME = `k-avatar`;
+var states = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps = {
+  type: "text" /* TEXT */,
+  size: Size.medium,
+  rounded: Roundness.full,
+  fillMode: FillMode.solid,
+  themeColor: ThemeColor.primary,
+  border: false
+};
+var Avatar = (props) => {
+  const {
+    size = defaultProps.size,
+    rounded = defaultProps.rounded,
+    fillMode = defaultProps.fillMode,
+    themeColor = defaultProps.themeColor,
+    type = defaultProps.type,
+    border = defaultProps.border,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        AVATAR_CLASSNAME,
+        optionClassNames(AVATAR_CLASSNAME, {
+          size,
+          rounded,
+          fillMode,
+          themeColor
+        }),
+        {
+          [`${AVATAR_CLASSNAME}-bordered`]: border
+        }
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
+    }
+  );
+};
+Avatar.states = states;
+Avatar.options = options;
+Avatar.className = AVATAR_CLASSNAME;
+Avatar.defaultProps = defaultProps;
+
+// src/avatar/templates/avatar-icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+
+// src/avatar/templates/avatar-text.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+
+// src/avatar/templates/avatar-image.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// src/chat/chat-message-group.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var CHATMESSAGEGROUP_CLASSNAME = "k-message-group";
+var states2 = [
+  States.selected
+];
+var options2 = {};
+var defaultProps2 = {
+  author: "Bruv",
+  avatar: "/packages/html/assets/avatar.jpg",
+  alt: false
+};
+var ChatMessageGroup = (props) => {
+  const {
+    alt = defaultProps2.alt,
+    author = defaultProps2.author,
+    avatar = defaultProps2.avatar,
+    selected,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        CHATMESSAGEGROUP_CLASSNAME,
+        props.className,
+        stateClassNames(CHATMESSAGEGROUP_CLASSNAME, { selected }),
+        {
+          "k-alt": alt,
+          "k-no-avatar": !avatar
+        }
+      ),
+      children: [
+        author && /* @__PURE__ */ jsx5("p", { className: "k-author", children: author }),
+        avatar && /* @__PURE__ */ jsx5(Avatar, { type: "image", children: /* @__PURE__ */ jsx5("img", { src: avatar }) }),
+        props.children
+      ]
+    }
+  );
+};
+ChatMessageGroup.states = states2;
+ChatMessageGroup.options = options2;
+ChatMessageGroup.className = CHATMESSAGEGROUP_CLASSNAME;
+ChatMessageGroup.defaultProps = defaultProps2;
+var chat_message_group_default = ChatMessageGroup;
+export {
+  CHATMESSAGEGROUP_CLASSNAME,
+  ChatMessageGroup,
+  chat_message_group_default as default
+};