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

package/dist/esm/{notification/tests/notification-angular-colors.js → timeline/timeline-card-title.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,6 +94,22 @@ 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"
+};
 
 // src/icon/font-icon.spec.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
@@ -4263,11 +4308,20 @@ Icon.states = states3;
 Icon.options = options3;
 Icon.defaultProps = defaultProps3;
 
-// src/notification/notification.spec.tsx
+// src/button/button.spec.tsx
 import { Fragment as Fragment4, jsx as jsx4, jsxs } from "react/jsx-runtime";
-var NOTIFICATION_CLASSNAME = `k-notification`;
-var states4 = [];
+var BUTTON_CLASSNAME = `k-button`;
+var states4 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
 var options4 = {
+  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,
@@ -4283,106 +4337,121 @@ var options4 = {
   ]
 };
 var defaultProps4 = {
+  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,
+    size = defaultProps4.size,
+    rounded = defaultProps4.rounded,
+    fillMode = defaultProps4.fillMode,
     themeColor = defaultProps4.themeColor,
-    text,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
     icon,
-    closable = defaultProps4.closable,
+    text,
+    iconClassName,
+    showArrow = defaultProps4.showArrow,
+    arrowIconName = defaultProps4.arrowIconName,
     ...other
   } = props;
+  const hasIcon = icon !== void 0;
+  const hasChildren = props.children !== void 0;
   return /* @__PURE__ */ jsxs(
-    "div",
+    "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__ */ jsx4(
+          Icon,
+          {
+            className: classNames(iconClassName, "k-button-icon"),
+            icon
+          }
+        ),
+        text ? /* @__PURE__ */ jsxs(Fragment4, { children: [
+          text && /* @__PURE__ */ jsx4("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__ */ jsx4("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ jsx4("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx4(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Notification.states = states4;
-Notification.options = options4;
-Notification.className = NOTIFICATION_CLASSNAME;
-Notification.defaultProps = defaultProps4;
+Button.states = states4;
+Button.options = options4;
+Button.className = BUTTON_CLASSNAME;
+Button.defaultProps = defaultProps4;
 
-// src/notification/notification-action.tsx
+// src/button/templates/icon-button.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 });
-};
+var IconButton = (props) => /* @__PURE__ */ jsx5(Button, { icon: "folder", ...props, children: void 0 });
 
-// src/notification/templates/icon-notification.tsx
+// src/button/templates/icon-text-button.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 
-// src/notification/templates/icon-notification-closable.tsx
+// src/button/templates/text-button.tsx
 import { jsx as jsx7 } 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/notification/templates/notification-normal.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-
-// src/notification/tests/notification-angular-colors.tsx
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-var styles = `
-    #test-area {
-        justify-items: start;
-    }
-
-    .k-notification-container {
-        margin: 0;
+// src/timeline/timeline-card-title.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
+var states5 = [];
+var defaultProps5 = {};
+var TimelineCardTitle = (props) => {
+  const {
+    collapsible,
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: classNames(
+        props.className,
+        TIMELINECARDTITLE_CLASSNAME
+      ),
+      ...other,
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "k-event-title", children }),
+        collapsible && /* @__PURE__ */ jsx8(IconButton, { fillMode: "flat", icon: "chevron-right", className: "k-event-collapse" })
+      ]
     }
-`;
-var notification_angular_colors_default = () => /* @__PURE__ */ jsxs2(Fragment5, { children: [
-  /* @__PURE__ */ jsx10("style", { children: styles }),
-  /* @__PURE__ */ jsx10("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: Notification.options.themeColor.map((color) => /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10("div", { className: "k-notification-container", children: /* @__PURE__ */ jsx10(NotificationClosable, { themeColor: color, text: `${color} notification` }) }) })) })
-] });
+  );
+};
+TimelineCardTitle.states = states5;
+TimelineCardTitle.className = TIMELINECARDTITLE_CLASSNAME;
+TimelineCardTitle.defaultProps = defaultProps5;
+var timeline_card_title_default = TimelineCardTitle;
 export {
-  notification_angular_colors_default as default
+  TIMELINECARDTITLE_CLASSNAME,
+  TimelineCardTitle,
+  timeline_card_title_default as default
 };