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

package/dist/esm/tilelayout/tests/tilelayout-resizing.js

@@ -123,15 +123,56 @@ var kendoThemeMaps = {
   }
 };
 
-// src/card/card-callout.tsx
+// src/tilelayout/tilelayout.spec.tsx
 import { jsx } from "react/jsx-runtime";
+var TILELAYOUT_CLASSNAME = `k-tilelayout`;
+var states = [];
+var options = {};
+var defaultProps = {};
+var TileLayout = (props) => {
+  const {
+    gap,
+    columns,
+    columnWidth,
+    rowHeight,
+    style,
+    children
+  } = props;
+  const tileLayoutStyles = {
+    gridTemplateColumns: `repeat(${columns}, minmax(0px, ${columnWidth}))`,
+    gridAutoRows: `minmax(0px, ${rowHeight})`,
+    gap,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        props.className,
+        TILELAYOUT_CLASSNAME
+      ),
+      style: tileLayoutStyles,
+      children
+    }
+  );
+};
+TileLayout.states = states;
+TileLayout.options = options;
+TileLayout.className = TILELAYOUT_CLASSNAME;
+TileLayout.defaultProps = defaultProps;
+
+// src/tilelayout/tilelayout-item.spec.tsx
+import React from "react";
+
+// src/card/card-callout.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var CARDCALLOUT_CLASSNAME = `k-card-callout`;
 var CardCallout = (props) => {
   const {
     callout,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       ...other,
@@ -147,15 +188,15 @@ var CardCallout = (props) => {
 };
 
 // src/card/card.spec.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var CARD_CLASSNAME = `k-card`;
-var states = [
+var states2 = [
   States.hover,
   States.focus,
   States.selected,
   States.disabled
 ];
-var options = {
+var options2 = {
   themeColor: [
     ThemeColor.primary,
     ThemeColor.success,
@@ -164,7 +205,7 @@ var options = {
     ThemeColor.info
   ]
 };
-var defaultProps = {};
+var defaultProps2 = {};
 var Card = (props) => {
   const {
     orientation,
@@ -198,21 +239,21 @@ var Card = (props) => {
         }
       ),
       children: [
-        callout && callout !== "true" && /* @__PURE__ */ jsx2(CardCallout, { callout }),
-        /* @__PURE__ */ jsx2(Fragment, { children: props.children })
+        callout && callout !== "true" && /* @__PURE__ */ jsx3(CardCallout, { callout }),
+        /* @__PURE__ */ jsx3(Fragment, { children: props.children })
       ]
     }
   );
 };
-Card.states = states;
-Card.options = options;
+Card.states = states2;
+Card.options = options2;
 Card.className = CARD_CLASSNAME;
-Card.defaultProps = defaultProps;
+Card.defaultProps = defaultProps2;
 
 // src/card/card-title.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var CARDTITLE_CLASSNAME = `k-card-title`;
-var states2 = [
+var states3 = [
   States.hover,
   States.focus
 ];
@@ -222,7 +263,7 @@ var CardTitle = (props) => {
     focus,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       ...other,
@@ -240,13 +281,13 @@ var CardTitle = (props) => {
 };
 
 // src/card/card-subtitle.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var CARDSUBTITLE_CLASSNAME = `k-card-subtitle`;
 var CardSubtitle = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       ...other,
@@ -260,13 +301,13 @@ var CardSubtitle = (props) => {
 };
 
 // src/card/card-img.tsx
-import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
 
 // src/icon/font-icon.spec.tsx
-import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
 var FONTICON_CLASSNAME = `k-icon`;
-var states3 = [];
-var options2 = {
+var states4 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -281,7 +322,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -292,9 +333,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx6(Fragment3, {});
+    return /* @__PURE__ */ jsx7(Fragment3, {});
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "span",
     {
       ...other,
@@ -315,17 +356,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states3;
-FontIcon.options = options2;
+FontIcon.states = states4;
+FontIcon.options = options3;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps2;
+FontIcon.defaultProps = defaultProps3;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-import { Fragment as Fragment4, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8 } from "react/jsx-runtime";
 var SVGICON_CLASSNAME = `k-svg-icon`;
-var states4 = [];
-var options3 = {
+var states5 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -340,7 +381,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -349,15 +390,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx7(Fragment4, {});
+    return /* @__PURE__ */ jsx8(Fragment4, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "span",
       {
         ...other,
@@ -370,7 +411,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       ...other,
@@ -388,7 +429,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "svg",
         {
           "aria-hidden": true,
@@ -402,10 +443,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states4;
-SvgIcon.options = options3;
+SvgIcon.states = states5;
+SvgIcon.options = options4;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps3;
+SvgIcon.defaultProps = defaultProps4;
 var svg_icon_spec_default = SvgIcon;
 
 // node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4344,13 +4385,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-import { Fragment as Fragment5, jsx as jsx8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9 } from "react/jsx-runtime";
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states5 = [];
-var options4 = {
+var states6 = [];
+var options5 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4365,7 +4406,7 @@ var options4 = {
     ThemeColor.dark
   ]
 };
-var defaultProps4 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4374,42 +4415,42 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps4.type,
+    type = defaultProps5.type,
     rotate,
     flip,
-    viewBox = defaultProps4.viewBox,
+    viewBox = defaultProps5.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx8(Fragment5, {});
+    return /* @__PURE__ */ jsx9(Fragment5, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ jsx8(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ jsx9(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ jsx8(Fragment5, {});
+      return /* @__PURE__ */ jsx9(Fragment5, {});
     }
-    return /* @__PURE__ */ jsx8(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ jsx9(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ jsx8(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ jsx9(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states5;
-Icon.options = options4;
-Icon.defaultProps = defaultProps4;
+Icon.states = states6;
+Icon.options = options5;
+Icon.defaultProps = defaultProps5;
 
 // src/button/button.spec.tsx
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var BUTTON_CLASSNAME = `k-button`;
-var states6 = [
+var states7 = [
   States.hover,
   States.focus,
   States.active,
   States.selected,
   States.disabled
 ];
-var options5 = {
+var options6 = {
   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],
@@ -4427,7 +4468,7 @@ var options5 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps5 = {
+var defaultProps6 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
@@ -4437,10 +4478,10 @@ var defaultProps5 = {
 };
 var Button = (props) => {
   const {
-    size = defaultProps5.size,
-    rounded = defaultProps5.rounded,
-    fillMode = defaultProps5.fillMode,
-    themeColor = defaultProps5.themeColor,
+    size = defaultProps6.size,
+    rounded = defaultProps6.rounded,
+    fillMode = defaultProps6.fillMode,
+    themeColor = defaultProps6.themeColor,
     hover,
     focus,
     active,
@@ -4449,8 +4490,8 @@ var Button = (props) => {
     icon,
     text,
     iconClassName,
-    showArrow = defaultProps5.showArrow,
-    arrowIconName = defaultProps5.arrowIconName,
+    showArrow = defaultProps6.showArrow,
+    arrowIconName = defaultProps6.arrowIconName,
     ...other
   } = props;
   const hasIcon = icon !== void 0;
@@ -4480,7 +4521,7 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ jsx9(
+        icon && /* @__PURE__ */ jsx10(
           Icon,
           {
             className: classNames(iconClassName, "k-button-icon"),
@@ -4488,30 +4529,30 @@ var Button = (props) => {
           }
         ),
         text ? /* @__PURE__ */ jsxs2(Fragment6, { children: [
-          text && /* @__PURE__ */ jsx9("span", { className: "k-button-text", children: text }),
+          text && /* @__PURE__ */ jsx10("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : 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 }) })
+        ] }) : props.children && /* @__PURE__ */ jsx10("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ jsx10("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx10(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Button.states = states6;
-Button.options = options5;
+Button.states = states7;
+Button.options = options6;
 Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps5;
+Button.defaultProps = defaultProps6;
 
 // src/button/templates/icon-button.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 
 // src/button/templates/icon-text-button.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 
 // src/button/templates/text-button.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 
 // src/card/card-header.tsx
-import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
 var CARDHEADER_CLASSNAME = `k-card-header`;
 var CardHeader = (props) => {
   const {
@@ -4529,10 +4570,10 @@ var CardHeader = (props) => {
         CARDHEADER_CLASSNAME
       ),
       children: [
-        title && /* @__PURE__ */ jsx13(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ jsx13(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ jsx13(Fragment7, { children: props.children }),
-        details && /* @__PURE__ */ jsx13("span", { className: "k-card-header-actions", children: /* @__PURE__ */ jsx13(
+        title && /* @__PURE__ */ jsx14(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ jsx14(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ jsx14(Fragment7, { children: props.children }),
+        details && /* @__PURE__ */ jsx14("span", { className: "k-card-header-actions", children: /* @__PURE__ */ jsx14(
           Button,
           {
             className: "k-card-details",
@@ -4549,10 +4590,10 @@ var CardHeader = (props) => {
 };
 
 // src/card/card-footer.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 
 // src/card/card-body.tsx
-import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var CARDBODY_CLASSNAME = `k-card-body`;
 var CardBody = (props) => {
   const {
@@ -4570,10 +4611,10 @@ var CardBody = (props) => {
         CARDBODY_CLASSNAME
       ),
       children: [
-        title && /* @__PURE__ */ jsx15(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ jsx15(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ jsx15(Fragment8, { children: props.children }),
-        details && /* @__PURE__ */ jsx15("span", { className: "k-card-header-actions", children: /* @__PURE__ */ jsx15(
+        title && /* @__PURE__ */ jsx16(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ jsx16(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ jsx16(Fragment8, { children: props.children }),
+        details && /* @__PURE__ */ jsx16("span", { className: "k-card-header-actions", children: /* @__PURE__ */ jsx16(
           Button,
           {
             className: "k-card-details",
@@ -4590,27 +4631,59 @@ var CardBody = (props) => {
 };
 
 // src/card/card-deck.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
+
+// src/tilelayout/tilelayout-item.spec.tsx
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var TILELAYOUTITEM_CLASSNAME = `k-tilelayout-item`;
+var states8 = [
+  States.focus
+];
+var options7 = {};
+var defaultProps7 = {};
+var TileLayoutItem = (props) => {
+  const {
+    header,
+    body,
+    focus,
+    resize,
+    style
+  } = props;
+  return /* @__PURE__ */ jsxs5(
+    Card,
+    {
+      className: classNames(
+        props.className,
+        TILELAYOUTITEM_CLASSNAME,
+        stateClassNames(TILELAYOUTITEM_CLASSNAME, {
+          focus
+        }),
+        {
+          "k-resize": resize === true,
+          "k-resize-x": resize === "horizontal",
+          "k-resize-y": resize === "vertical"
+        }
+      ),
+      style,
+      children: [
+        header && React.isValidElement(header) ? /* @__PURE__ */ jsx18(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", children: header }) : /* @__PURE__ */ jsx18(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", title: header }),
+        body && /* @__PURE__ */ jsx18(CardBody, { className: "k-tilelayout-item-body", children: body })
+      ]
+    }
+  );
+};
+TileLayoutItem.states = states8;
+TileLayoutItem.options = options7;
+TileLayoutItem.className = TILELAYOUTITEM_CLASSNAME;
+TileLayoutItem.defaultProps = defaultProps7;
 
 // src/tilelayout/tests/tilelayout-resizing.tsx
-import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var tilelayout_resizing_default = () => /* @__PURE__ */ jsx17(Fragment9, { children: /* @__PURE__ */ jsx17("div", { id: "test-area", children: /* @__PURE__ */ jsxs5("div", { id: "tilelayout", className: "k-widget k-tilelayout", style: { gridTemplateColumns: "repeat(4, minmax(0px, 1fr))", gap: "16px", padding: "16px" }, children: [
-  /* @__PURE__ */ jsxs5(Card, { className: "k-tilelayout-item k-resize-x", children: [
-    /* @__PURE__ */ jsx17(CardHeader, { className: "k-tilelayout-item-header", children: "Card Title" }),
-    /* @__PURE__ */ jsx17(CardBody, { className: "k-tilelayout-item-body", children: "Horizontally resizable card" })
-  ] }),
-  /* @__PURE__ */ jsxs5(Card, { className: "k-tilelayout-item k-resize-y", children: [
-    /* @__PURE__ */ jsx17(CardHeader, { className: "k-tilelayout-item-header", children: "Card Title" }),
-    /* @__PURE__ */ jsx17(CardBody, { className: "k-tilelayout-item-body", children: "Vertically resizable card" })
-  ] }),
-  /* @__PURE__ */ jsxs5(Card, { className: "k-tilelayout-item k-resize", children: [
-    /* @__PURE__ */ jsx17(CardHeader, { className: "k-tilelayout-item-header", children: "Card Title" }),
-    /* @__PURE__ */ jsx17(CardBody, { className: "k-tilelayout-item-body", children: "Horizontally and Vertically resizable card" })
-  ] }),
-  /* @__PURE__ */ jsxs5(Card, { className: "k-tilelayout-item k-resize-none", children: [
-    /* @__PURE__ */ jsx17(CardHeader, { className: "k-tilelayout-item-header", children: "Card Title" }),
-    /* @__PURE__ */ jsx17(CardBody, { className: "k-tilelayout-item-body", children: "Non-resizable card" })
-  ] })
+import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var tilelayout_resizing_default = () => /* @__PURE__ */ jsx19(Fragment9, { children: /* @__PURE__ */ jsx19("div", { id: "test-area", children: /* @__PURE__ */ jsxs6(TileLayout, { columns: 4, gap: "16px", columnWidth: "1fr", children: [
+  /* @__PURE__ */ jsx19(TileLayoutItem, { resize: "horizontal", header: "Card Title", body: "Horizontally resizable card" }),
+  /* @__PURE__ */ jsx19(TileLayoutItem, { resize: "vertical", header: "Card Title", body: "Vertically resizable card" }),
+  /* @__PURE__ */ jsx19(TileLayoutItem, { resize: true, header: "Card Title", body: "Horizontally and Vertically resizable card" }),
+  /* @__PURE__ */ jsx19(TileLayoutItem, { header: "Card Title", body: "Non-resizable card" })
 ] }) }) });
 export {
   tilelayout_resizing_default as default