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

package/dist/cjs/{notification/tests/notification-angular-colors.js → timeline/timeline-card-title.js}

@@ -16,12 +16,14 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/notification/tests/notification-angular-colors.tsx
-var notification_angular_colors_exports = {};
-__export(notification_angular_colors_exports, {
-  default: () => notification_angular_colors_default
+// src/timeline/timeline-card-title.tsx
+var timeline_card_title_exports = {};
+__export(timeline_card_title_exports, {
+  TIMELINECARDTITLE_CLASSNAME: () => TIMELINECARDTITLE_CLASSNAME,
+  TimelineCardTitle: () => TimelineCardTitle,
+  default: () => timeline_card_title_default
 });
-module.exports = __toCommonJS(notification_angular_colors_exports);
+module.exports = __toCommonJS(timeline_card_title_exports);
 
 // src/misc/class-names.ts
 var classNames = (...args) => {
@@ -59,6 +61,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 = {
@@ -70,6 +88,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",
@@ -84,6 +115,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
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -4282,11 +4329,20 @@ Icon.states = states3;
 Icon.options = options3;
 Icon.defaultProps = defaultProps3;
 
-// src/notification/notification.spec.tsx
+// src/button/button.spec.tsx
 var import_jsx_runtime4 = require("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,
@@ -4302,103 +4358,116 @@ 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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "k-notification-status", icon }),
-        props.children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-notification-content", children: [
-          text,
+        icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Icon,
+          {
+            className: classNames(iconClassName, "k-button-icon"),
+            icon
+          }
+        ),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: text && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-notification-content", children: text }) }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-notification-actions", children: actions })
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var className = `k-notification-action`;
-var NotificationAction = (props) => {
-  const {
-    type
-  } = props;
-  let icon;
-  switch (type) {
-    case "close":
-      icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" });
-      break;
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: type });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: classNames(
-    props.className,
-    className,
-    `k-notification-${type}-action`
-  ), children: icon });
-};
+var IconButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { icon: "folder", ...props, children: void 0 });
 
-// src/notification/templates/icon-notification.tsx
+// src/button/templates/icon-text-button.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 
-// src/notification/templates/icon-notification-closable.tsx
+// src/button/templates/text-button.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 
-// src/notification/templates/notification-closable.tsx
+// src/timeline/timeline-card-title.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var NotificationClosable = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  Notification,
-  {
-    closable: true,
-    text: "Notification",
-    actions: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationAction, { type: "close" }),
-    ...props
-  }
-);
-
-// src/notification/templates/notification-normal.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-
-// src/notification/tests/notification-angular-colors.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var styles = `
-    #test-area {
-        justify-items: start;
-    }
-
-    .k-notification-container {
-        margin: 0;
+var TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
+var states5 = [];
+var defaultProps5 = {};
+var TimelineCardTitle = (props) => {
+  const {
+    collapsible,
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: classNames(
+        props.className,
+        TIMELINECARDTITLE_CLASSNAME
+      ),
+      ...other,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "k-event-title", children }),
+        collapsible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { fillMode: "flat", icon: "chevron-right", className: "k-event-collapse" })
+      ]
     }
-`;
-var notification_angular_colors_default = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: Notification.options.themeColor.map((color) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-notification-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationClosable, { themeColor: color, text: `${color} notification` }) }) })) })
-] });
+  );
+};
+TimelineCardTitle.states = states5;
+TimelineCardTitle.className = TIMELINECARDTITLE_CLASSNAME;
+TimelineCardTitle.defaultProps = defaultProps5;
+var timeline_card_title_default = TimelineCardTitle;