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

package/dist/esm/{notification/tests/notification-custom-angular.js → timeline/timeline-card-callout.js}

@@ -40,6 +40,22 @@ var optionClassNames = (componentClassName, props) => {
     }
   );
 };
+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 = {
@@ -51,6 +67,19 @@ var Size = {
   "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",
@@ -65,12 +94,139 @@ var ThemeColor = {
   "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"
+};
+var kendoThemeMaps = {
+  calloutMap: {
+    top: "n",
+    bottom: "s",
+    left: "w",
+    right: "e"
+  },
+  orientationMap: {
+    vertical: "vstack",
+    horizontal: "hstack"
+  }
+};
+
+// src/card/card-callout.tsx
+import { jsx } from "react/jsx-runtime";
+var CARDCALLOUT_CLASSNAME = `k-card-callout`;
+var CardCallout = (props) => {
+  const {
+    callout,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARDCALLOUT_CLASSNAME,
+        {
+          [`k-callout-${kendoThemeMaps.calloutMap[callout] || callout}`]: callout
+        }
+      )
+    }
+  );
+};
+
+// src/card/card.spec.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CARD_CLASSNAME = `k-card`;
+var states = [
+  States.hover,
+  States.focus,
+  States.selected,
+  States.disabled
+];
+var options = {
+  themeColor: [
+    ThemeColor.primary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info
+  ]
+};
+var defaultProps = {};
+var Card = (props) => {
+  const {
+    orientation,
+    themeColor,
+    callout,
+    hover,
+    focus,
+    selected,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARD_CLASSNAME,
+        optionClassNames(CARD_CLASSNAME, {
+          themeColor
+        }),
+        stateClassNames(CARD_CLASSNAME, {
+          hover,
+          focus,
+          disabled,
+          selected
+        }),
+        {
+          [`k-card-${orientation}`]: orientation,
+          "k-card-with-callout": callout
+        }
+      ),
+      children: [
+        callout && callout !== "true" && /* @__PURE__ */ jsx2(CardCallout, { callout }),
+        /* @__PURE__ */ jsx2(Fragment, { children: props.children })
+      ]
+    }
+  );
+};
+Card.states = states;
+Card.options = options;
+Card.className = CARD_CLASSNAME;
+Card.defaultProps = defaultProps;
+
+// src/card/card-title.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var states2 = [
+  States.hover,
+  States.focus
+];
+
+// src/card/card-subtitle.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// src/card/card-media.tsx
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 
 // src/icon/font-icon.spec.tsx
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
 var FONTICON_CLASSNAME = `k-icon k-font-icon`;
-var states = [];
-var options = {
+var states3 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -85,7 +241,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps2 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -96,9 +252,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx(Fragment, {});
+    return /* @__PURE__ */ jsx6(Fragment3, {});
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx6(
     "span",
     {
       ...other,
@@ -119,17 +275,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states;
-FontIcon.options = options;
+FontIcon.states = states3;
+FontIcon.options = options2;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps;
+FontIcon.defaultProps = defaultProps2;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7 } from "react/jsx-runtime";
 var SVGICON_CLASSNAME = `k-icon k-svg-icon`;
-var states2 = [];
-var options2 = {
+var states4 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -144,7 +300,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -153,15 +309,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps3.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx2(Fragment2, {});
+    return /* @__PURE__ */ jsx7(Fragment4, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx7(
       "span",
       {
         ...other,
@@ -174,7 +330,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx7(
     "span",
     {
       ...other,
@@ -192,7 +348,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx7(
         "svg",
         {
           "aria-hidden": true,
@@ -206,10 +362,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states2;
-SvgIcon.options = options2;
+SvgIcon.states = states4;
+SvgIcon.options = options3;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps2;
+SvgIcon.defaultProps = defaultProps3;
 var svg_icon_spec_default = SvgIcon;
 
 // ../../node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4208,13 +4364,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8 } from "react/jsx-runtime";
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states3 = [];
-var options3 = {
+var states5 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4229,7 +4385,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4238,36 +4394,45 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps3.type,
+    type = defaultProps4.type,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx3(Fragment3, {});
+    return /* @__PURE__ */ jsx8(Fragment5, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ jsx3(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ jsx8(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ jsx3(Fragment3, {});
+      return /* @__PURE__ */ jsx8(Fragment5, {});
     }
-    return /* @__PURE__ */ jsx3(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ jsx8(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ jsx3(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ jsx8(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states3;
-Icon.options = options3;
-Icon.defaultProps = defaultProps3;
+Icon.states = states5;
+Icon.options = options4;
+Icon.defaultProps = defaultProps4;
 
-// src/notification/notification.spec.tsx
-import { Fragment as Fragment4, jsx as jsx4, jsxs } from "react/jsx-runtime";
-var NOTIFICATION_CLASSNAME = `k-notification`;
-var states4 = [];
-var options4 = {
+// src/button/button.spec.tsx
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var BUTTON_CLASSNAME = `k-button`;
+var states6 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options5 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
   themeColor: [
     ThemeColor.base,
     ThemeColor.primary,
@@ -4282,145 +4447,169 @@ var options4 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps4 = {
+var defaultProps5 = {
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid,
   themeColor: ThemeColor.base,
-  closable: false
+  showArrow: false,
+  arrowIconName: "caret-alt-down"
 };
-var Notification = (props) => {
+var Button = (props) => {
   const {
-    actions,
-    themeColor = defaultProps4.themeColor,
-    text,
+    size = defaultProps5.size,
+    rounded = defaultProps5.rounded,
+    fillMode = defaultProps5.fillMode,
+    themeColor = defaultProps5.themeColor,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
     icon,
-    closable = defaultProps4.closable,
+    text,
+    iconClassName,
+    showArrow = defaultProps5.showArrow,
+    arrowIconName = defaultProps5.arrowIconName,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs(
-    "div",
+  const hasIcon = icon !== void 0;
+  const hasChildren = props.children !== void 0;
+  return /* @__PURE__ */ jsxs2(
+    "button",
     {
       ...other,
       className: classNames(
         props.className,
-        NOTIFICATION_CLASSNAME,
-        optionClassNames(NOTIFICATION_CLASSNAME, {
+        BUTTON_CLASSNAME,
+        optionClassNames(BUTTON_CLASSNAME, {
+          size,
+          rounded,
+          fillMode,
           themeColor
         }),
+        stateClassNames(BUTTON_CLASSNAME, {
+          hover,
+          focus,
+          active,
+          disabled,
+          selected
+        }),
         {
-          "k-notification-closable": closable
+          ["k-icon-button"]: !text && !hasChildren && hasIcon
         }
       ),
       children: [
-        icon && /* @__PURE__ */ jsx4(Icon, { className: "k-notification-status", icon }),
-        props.children ? /* @__PURE__ */ jsxs("div", { className: "k-notification-content", children: [
-          text,
+        icon && /* @__PURE__ */ jsx9(
+          Icon,
+          {
+            className: classNames(iconClassName, "k-button-icon"),
+            icon
+          }
+        ),
+        text ? /* @__PURE__ */ jsxs2(Fragment6, { children: [
+          text && /* @__PURE__ */ jsx9("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : /* @__PURE__ */ jsx4(Fragment4, { children: text && /* @__PURE__ */ jsx4("div", { className: "k-notification-content", children: text }) }),
-        actions && /* @__PURE__ */ jsx4("span", { className: "k-notification-actions", children: actions })
+        ] }) : props.children && /* @__PURE__ */ jsx9("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ jsx9("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx9(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Notification.states = states4;
-Notification.options = options4;
-Notification.className = NOTIFICATION_CLASSNAME;
-Notification.defaultProps = defaultProps4;
+Button.states = states6;
+Button.options = options5;
+Button.className = BUTTON_CLASSNAME;
+Button.defaultProps = defaultProps5;
 
-// src/notification/notification-action.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var className = `k-notification-action`;
-var NotificationAction = (props) => {
-  const {
-    type
-  } = props;
-  let icon;
-  switch (type) {
-    case "close":
-      icon = /* @__PURE__ */ jsx5(Icon, { icon: "x" });
-      break;
-    default:
-      return /* @__PURE__ */ jsx5(Icon, { icon: type });
-  }
-  return /* @__PURE__ */ jsx5("span", { className: classNames(
-    props.className,
-    className,
-    `k-notification-${type}-action`
-  ), children: icon });
-};
+// src/button/templates/icon-button.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
 
-// src/notification/templates/icon-notification.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+// src/button/templates/icon-text-button.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
 
-// src/notification/templates/icon-notification-closable.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+// src/button/templates/text-button.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
 
-// src/notification/templates/notification-closable.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var NotificationClosable = (props) => /* @__PURE__ */ jsx8(
-  Notification,
-  {
-    closable: true,
-    text: "Notification",
-    actions: /* @__PURE__ */ jsx8(NotificationAction, { type: "close" }),
-    ...props
-  }
-);
+// src/card/card-header.tsx
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
 
-// src/notification/templates/notification-normal.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var NotificationNormal = (props) => /* @__PURE__ */ jsx9(
-  Notification,
-  {
-    text: "Notification",
-    ...props
-  }
-);
+// src/card/card-footer.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
 
-// src/notification/tests/notification-custom-angular.tsx
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-var styles = `
-    .k-notification-group {
-        position: static;
-    }
+// src/card/card-body.tsx
+import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
 
-    .fullwidth,
-    .fullwidth > .k-notification {
-        width: 100%;
-    }
+// src/card/card-deck.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
 
-    .k-custom-notification {
-        font-size: 20px;
-        color: black;
+// src/action-buttons/action-buttons.spec.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ACTIONBUTTONS_CLASSNAME = `k-actions`;
+var states7 = [];
+var options6 = {};
+var defaultProps6 = {
+  alignment: "start",
+  orientation: "horizontal"
+};
+var ActionButtons = (props) => {
+  const {
+    alignment = defaultProps6.alignment,
+    orientation = defaultProps6.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        ACTIONBUTTONS_CLASSNAME,
+        {
+          [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
+          [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
+        },
+        props.className
+      ),
+      children: props.children
     }
+  );
+};
+ActionButtons.states = states7;
+ActionButtons.options = options6;
+ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
+ActionButtons.defaultProps = defaultProps6;
+
+// src/card/templates/card-normal.tsx
+import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
 
-    .k-notification-actions {
-        align-self: start;
+// src/card/templates/card-horizontal.tsx
+import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// src/timeline/timeline-card-callout.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var TIMELINECARDCALLOUT_CLASSNAME = `k-timeline-card-callout`;
+var states8 = [];
+var defaultProps7 = {};
+var TimelineCardCallout = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx20(
+    CardCallout,
+    {
+      className: classNames(
+        props.className,
+        TIMELINECARDCALLOUT_CLASSNAME
+      ),
+      ...other
     }
-`;
-var notification_custom_angular_default = () => /* @__PURE__ */ jsxs2(Fragment5, { children: [
-  /* @__PURE__ */ jsx10("style", { children: styles }),
-  /* @__PURE__ */ jsxs2("div", { id: "test-area", className: "k-d-grid k-grid-cols-4", children: [
-    /* @__PURE__ */ jsx10("span", { className: "k-colspan-all k-col-span-full", children: "LTR" }),
-    /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsxs2("div", { className: "k-notification-group", children: [
-      /* @__PURE__ */ jsx10("div", { className: "k-notification-container", children: /* @__PURE__ */ jsxs2(NotificationClosable, { text: "Multiline notification", children: [
-        /* @__PURE__ */ jsx10("div", { children: "Closable multiline notification" }),
-        /* @__PURE__ */ jsx10("div", { children: "Closable multiline notification" }),
-        /* @__PURE__ */ jsx10("div", { children: "Closable multiline notification" })
-      ] }) }),
-      /* @__PURE__ */ jsx10("div", { className: "k-notification-container", children: /* @__PURE__ */ jsx10(NotificationNormal, { className: "k-custom-notification", text: "Custom notification" }) })
-    ] }) }),
-    /* @__PURE__ */ jsx10("div", { className: "k-colspan-3 k-col-span-3", children: /* @__PURE__ */ jsx10("div", { className: "k-notification-container fullwidth", children: /* @__PURE__ */ jsx10(NotificationClosable, { text: "Full width notification" }) }) }),
-    /* @__PURE__ */ jsx10("span", { className: "k-colspan-all k-col-span-full", children: "RTL" }),
-    /* @__PURE__ */ jsx10("div", { dir: "rtl", children: /* @__PURE__ */ jsxs2("div", { className: "k-notification-group", children: [
-      /* @__PURE__ */ jsx10("div", { className: "k-notification-container", children: /* @__PURE__ */ jsxs2(NotificationClosable, { text: "Multiline notification", children: [
-        /* @__PURE__ */ jsx10("div", { children: "Closable multiline notification" }),
-        /* @__PURE__ */ jsx10("div", { children: "Closable multiline notification" }),
-        /* @__PURE__ */ jsx10("div", { children: "Closable multiline notification" })
-      ] }) }),
-      /* @__PURE__ */ jsx10("div", { className: "k-notification-container", children: /* @__PURE__ */ jsx10(NotificationNormal, { className: "k-custom-notification", text: "Custom notification" }) })
-    ] }) }),
-    /* @__PURE__ */ jsx10("div", { className: "k-colspan-3 k-col-span-3", dir: "rtl", children: /* @__PURE__ */ jsx10("div", { className: "k-notification-container fullwidth", children: /* @__PURE__ */ jsx10(NotificationClosable, { text: "Full width notification" }) }) })
-  ] })
-] });
+  );
+};
+TimelineCardCallout.states = states8;
+TimelineCardCallout.className = TIMELINECARDCALLOUT_CLASSNAME;
+TimelineCardCallout.defaultProps = defaultProps7;
+var timeline_card_callout_default = TimelineCardCallout;
 export {
-  notification_custom_angular_default as default
+  TIMELINECARDCALLOUT_CLASSNAME,
+  TimelineCardCallout,
+  timeline_card_callout_default as default
 };