@progress/kendo-themes-html 5.5.0 → 5.5.1-dev.2

package/dist/dropdownlist/tests/dropdownlist-adaptive.js

@@ -0,0 +1,488 @@
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined")
+      return require.apply(this, arguments);
+    throw new Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+
+  // src/dropdownlist/tests/dropdownlist-adaptive.tsx
+  var import_react = __toESM(__require("react"));
+  var import_client = __toESM(__require("react-dom/client"));
+
+  // src/button/button.tsx
+  var React2 = __toESM(__require("react"));
+
+  // src/utils/classNames.ts
+  var classNames = (...args) => {
+    const result = {};
+    const addLeafKeys = (arg) => {
+      typeof arg === "object" ? Object.keys(arg).forEach((key) => {
+        result[key] = arg[key];
+      }) : result[arg] = true;
+    };
+    const addKeys = (list) => list.filter((arg) => arg !== true && Boolean(arg)).map((arg) => Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg));
+    addKeys(args);
+    return Object.keys(result).map((key) => result[key] && key || null).filter((el) => el !== null).join(" ");
+  };
+
+  // src/utils/theme.ts
+  var kendoThemeMaps = {
+    sizeMap: {
+      small: "sm",
+      medium: "md",
+      large: "lg"
+    },
+    roundedMap: {
+      small: "sm",
+      medium: "md",
+      large: "lg"
+    },
+    calloutMap: {
+      top: "n",
+      bottom: "s",
+      left: "w",
+      right: "e"
+    },
+    orientationMap: {
+      vertical: "vstack",
+      horizontal: "hstack"
+    }
+  };
+
+  // src/icon/icon.tsx
+  var React = __toESM(__require("react"));
+  var Icon = class extends React.Component {
+    render() {
+      const {
+        className,
+        style,
+        name
+      } = this.props;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, name && /* @__PURE__ */ React.createElement("span", {
+        className: classNames(className, "k-icon", {
+          [`k-i-${name}`]: name
+        }),
+        style
+      }));
+    }
+  };
+
+  // src/button/button.tsx
+  var Button = class extends React2.Component {
+    render() {
+      const {
+        children,
+        className,
+        iconClassName,
+        text,
+        icon,
+        size,
+        rounded,
+        fillMode,
+        themeColor,
+        hover,
+        focus,
+        active,
+        selected,
+        disabled,
+        ...htmlAttributes
+      } = this.props;
+      const hasIcon = icon !== void 0;
+      const hasChildren = children !== void 0;
+      return /* @__PURE__ */ React2.createElement("button", {
+        style: this.props.style,
+        ...htmlAttributes,
+        dir: this.props.dir,
+        className: classNames(className, "k-button", {
+          [`k-button-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+          [`k-button-${fillMode}`]: fillMode,
+          [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),
+          [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
+          "k-icon-button": !hasChildren && hasIcon,
+          "k-hover": hover,
+          "k-focus": focus,
+          "k-active": active,
+          "k-selected": selected,
+          "k-disabled": disabled
+        })
+      }, icon && /* @__PURE__ */ React2.createElement(Icon, {
+        className: classNames(iconClassName, "k-button-icon"),
+        name: icon
+      }), text || hasIcon ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, text && /* @__PURE__ */ React2.createElement("span", {
+        className: "k-button-text"
+      }, text), children) : children && /* @__PURE__ */ React2.createElement("span", {
+        className: "k-button-text"
+      }, children));
+    }
+  };
+  Button.defaultProps = {
+    size: "medium",
+    rounded: "medium",
+    fillMode: "solid",
+    themeColor: "base"
+  };
+
+  // src/list/list.tsx
+  var React4 = __toESM(__require("react"));
+
+  // src/nodata/nodata.tsx
+  var React3 = __toESM(__require("react"));
+  var NoData = class extends React3.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React3.createElement("div", {
+        className: classNames(className, "k-nodata")
+      }, children);
+    }
+  };
+
+  // src/list/list.tsx
+  var List = class extends React4.Component {
+    render() {
+      const {
+        children,
+        className,
+        size,
+        virtualization,
+        framework
+      } = this.props;
+      let listHeader;
+      let listGroup;
+      let listContent;
+      const listChildren = [];
+      if (children) {
+        children.map((child, index) => {
+          if (child.type === ListGroup) {
+            if (child.props.root === true) {
+              listHeader = child.props.label;
+              child.props.children.map((optChild, index2) => {
+                listChildren.push(/* @__PURE__ */ React4.createElement(ListItem, {
+                  key: `optChild-${index2}-${new Date().getTime()}`,
+                  ...optChild.props
+                }));
+              });
+            } else {
+              if (framework === "angular" || framework === "blazor") {
+                listChildren.push(/* @__PURE__ */ React4.createElement(ListGroupItem, {
+                  key: `listChild-${index}`,
+                  ...child.props
+                }, child.props.label));
+                child.props.children.map((optChild, index2) => {
+                  listChildren.push(/* @__PURE__ */ React4.createElement(ListItem, {
+                    key: `fwOptChild-${index2}-${new Date().getTime()}`,
+                    ...optChild.props
+                  }));
+                });
+              } else {
+                child.props.children.forEach((optChild, index2) => {
+                  let groupLabel = "";
+                  if (index2 === 0) {
+                    groupLabel = child.props.label;
+                  }
+                  listChildren.push(/* @__PURE__ */ React4.createElement(ListItem, {
+                    className: index2 === 0 ? "k-first" : "",
+                    key: `groupLabel-${index2}-${new Date().getTime()}`,
+                    ...optChild.props,
+                    groupLabel
+                  }));
+                });
+              }
+            }
+            listGroup = /* @__PURE__ */ React4.createElement(ListGroup, {
+              label: listHeader,
+              virtualization
+            }, listChildren);
+          } else if (child.type === ListItem) {
+            listChildren.push(/* @__PURE__ */ React4.createElement(ListItem, {
+              key: `${child.type}-${index}`,
+              ...child.props
+            }));
+            listContent = /* @__PURE__ */ React4.createElement(ListContent, {
+              virtualization
+            }, listChildren);
+          }
+        });
+      } else {
+        listContent = /* @__PURE__ */ React4.createElement(NoData, null, "No data found.");
+      }
+      return /* @__PURE__ */ React4.createElement("div", {
+        className: classNames(className, "k-list", {
+          [`k-list-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+          "k-virtual-list": virtualization
+        })
+      }, listGroup, listContent);
+    }
+  };
+  List.defaultProps = {
+    size: "medium"
+  };
+
+  // src/list/list-item.tsx
+  var React6 = __toESM(__require("react"));
+
+  // src/checkbox/checkbox.tsx
+  var React5 = __toESM(__require("react"));
+  var Checkbox = class extends React5.Component {
+    render() {
+      const {
+        id,
+        className,
+        checked,
+        indeterminate,
+        size,
+        rounded,
+        hover,
+        focus,
+        invalid,
+        disabled,
+        required
+      } = this.props;
+      return /* @__PURE__ */ React5.createElement("span", {
+        className: "k-checkbox-wrap"
+      }, /* @__PURE__ */ React5.createElement("input", {
+        id,
+        type: "checkbox",
+        checked,
+        required,
+        className: classNames(className, "k-checkbox", {
+          [`k-checkbox-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+          [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
+          "k-hover": hover,
+          "k-focus": focus,
+          "k-disabled": disabled,
+          "k-checked": checked,
+          "k-invalid": invalid,
+          "k-indeterminate": !checked && indeterminate
+        })
+      }));
+    }
+  };
+  Checkbox.defaultProps = {
+    size: "medium",
+    rounded: "medium"
+  };
+
+  // src/list/list-item.tsx
+  var ListItem = class extends React6.Component {
+    render() {
+      const {
+        children,
+        className,
+        groupLabel,
+        showIcon,
+        iconName,
+        showCheckbox,
+        checked,
+        hover,
+        focus,
+        selected,
+        disabled
+      } = this.props;
+      return /* @__PURE__ */ React6.createElement("li", {
+        className: classNames(className, "k-list-item", {
+          "k-hover": hover,
+          "k-focus": focus,
+          "k-selected": selected,
+          "k-disabled": disabled
+        })
+      }, showCheckbox && /* @__PURE__ */ React6.createElement(Checkbox, {
+        checked
+      }), showIcon && /* @__PURE__ */ React6.createElement(Icon, {
+        name: iconName
+      }), /* @__PURE__ */ React6.createElement("span", {
+        className: "k-list-item-text"
+      }, children), groupLabel && groupLabel !== "" && /* @__PURE__ */ React6.createElement("div", {
+        className: "k-list-item-group-label"
+      }, groupLabel));
+    }
+  };
+
+  // src/list/list-content.tsx
+  var React7 = __toESM(__require("react"));
+  var ListContent = class extends React7.Component {
+    render() {
+      const {
+        children,
+        className,
+        virtualization
+      } = this.props;
+      return /* @__PURE__ */ React7.createElement("div", {
+        className: classNames(className, "k-list-content")
+      }, /* @__PURE__ */ React7.createElement("ul", {
+        className: classNames("k-list-ul")
+      }, children), virtualization && /* @__PURE__ */ React7.createElement("div", {
+        className: "k-height-container"
+      }, /* @__PURE__ */ React7.createElement("div", null)));
+    }
+  };
+
+  // src/list/list-header.tsx
+  var React8 = __toESM(__require("react"));
+  var ListHeader = class extends React8.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React8.createElement("div", {
+        className: classNames(className, "k-list-group-sticky-header")
+      }, /* @__PURE__ */ React8.createElement("div", {
+        className: "k-list-header-text"
+      }, children));
+    }
+  };
+
+  // src/list/list-group.tsx
+  var React9 = __toESM(__require("react"));
+  var ListGroup = class extends React9.Component {
+    render() {
+      const {
+        children,
+        label
+      } = this.props;
+      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, label && /* @__PURE__ */ React9.createElement(ListHeader, null, label), children && /* @__PURE__ */ React9.createElement(ListContent, {
+        virtualization: true
+      }, children));
+    }
+  };
+
+  // src/list/list-group-item.tsx
+  var React10 = __toESM(__require("react"));
+  var ListGroupItem = class extends React10.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React10.createElement("li", {
+        className: classNames(className, "k-list-group-item")
+      }, /* @__PURE__ */ React10.createElement("span", {
+        className: "k-list-item-text"
+      }, children));
+    }
+  };
+
+  // src/dropdownlist/tests/dropdownlist-adaptive.tsx
+  var root = import_client.default.createRoot(document.getElementById("app"));
+  var styles = `
+    .k-actionsheet-container {
+        width: 100%;
+        height: 600px;
+        position: relative;
+        transform: translateZ(0);
+    }
+`;
+  root.render(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, styles), /* @__PURE__ */ import_react.default.createElement("div", {
+    id: "test-area",
+    className: "k-d-grid k-grid-cols-2"
+  }, /* @__PURE__ */ import_react.default.createElement("span", null, "partial"), /* @__PURE__ */ import_react.default.createElement("span", null, "full screen"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-container"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-overlay"
+  }), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-titlebar"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-title k-text-center"
+  }, /* @__PURE__ */ import_react.default.createElement("div", null, "Dropdownlist label")), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-actions"
+  }, /* @__PURE__ */ import_react.default.createElement(Button, {
+    icon: "x",
+    fillMode: "flat"
+  }))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-content"
+  }, /* @__PURE__ */ import_react.default.createElement(List, {
+    size: "large"
+  }, /* @__PURE__ */ import_react.default.createElement(ListItem, null, "List item"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    hover: true
+  }, "Hover"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    focus: true
+  }, "Focus"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    selected: true
+  }, "Selected"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    hover: true,
+    selected: true
+  }, "Hover selected"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    disabled: true
+  }, "Disabled"), /* @__PURE__ */ import_react.default.createElement(ListItem, null, "List item with very long text, that spans on multiple lines"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    showCheckbox: true
+  }, "Checkbox"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    showIcon: true,
+    iconName: "cog"
+  }, "Icon"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    showCheckbox: true,
+    showIcon: true,
+    iconName: "cog"
+  }, "Checkbox icon"))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-footer k-actions k-actions-stretched"
+  }, /* @__PURE__ */ import_react.default.createElement(Button, {
+    size: "large",
+    themeColor: "primary"
+  }, "Select date"))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-container"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-overlay"
+  }), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-titlebar"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-title k-text-center"
+  }, /* @__PURE__ */ import_react.default.createElement("div", null, "Dropdownlist label")), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-actions"
+  }, /* @__PURE__ */ import_react.default.createElement(Button, {
+    icon: "x",
+    fillMode: "flat"
+  }))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-content"
+  }, /* @__PURE__ */ import_react.default.createElement(List, {
+    size: "large"
+  }, /* @__PURE__ */ import_react.default.createElement(ListItem, null, "List item"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    hover: true
+  }, "Hover"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    focus: true
+  }, "Focus"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    selected: true
+  }, "Selected"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    hover: true,
+    selected: true
+  }, "Hover selected"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    disabled: true
+  }, "Disabled"), /* @__PURE__ */ import_react.default.createElement(ListItem, null, "List item with very long text, that spans on multiple lines"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    showCheckbox: true
+  }, "Checkbox"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    showIcon: true,
+    iconName: "cog"
+  }, "Icon"), /* @__PURE__ */ import_react.default.createElement(ListItem, {
+    showCheckbox: true,
+    showIcon: true,
+    iconName: "cog"
+  }, "Checkbox icon"))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-actionsheet-footer k-actions k-actions-stretched"
+  }, /* @__PURE__ */ import_react.default.createElement(Button, {
+    size: "large",
+    themeColor: "primary"
+  }, "Select date"))))))));
+})();
+//# sourceMappingURL=dropdownlist-adaptive.js.map

package/dist/dropdownlist/tests/dropdownlist-adaptive.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/dropdownlist/tests/dropdownlist-adaptive.tsx", "../../../src/button/button.tsx", "../../../src/utils/classNames.ts", "../../../src/utils/theme.ts", "../../../src/icon/icon.tsx", "../../../src/list/list.tsx", "../../../src/nodata/nodata.tsx", "../../../src/list/list-item.tsx", "../../../src/checkbox/checkbox.tsx", "../../../src/list/list-content.tsx", "../../../src/list/list-header.tsx", "../../../src/list/list-group.tsx", "../../../src/list/list-group-item.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Button } from '../../button';\nimport { List, ListItem } from '../../list';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    .k-actionsheet-container {\n        width: 100%;\n        height: 600px;\n        position: relative;\n        transform: translateZ(0);\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-2\">\n\n            <span>partial</span>\n            <span>full screen</span>\n\n            <section>\n                <div className=\"k-actionsheet-container\">\n                    <div className=\"k-overlay\"></div>\n\n                    <div className=\"k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet\">\n                        <div className=\"k-actionsheet-titlebar\">\n                            <div className=\"k-actionsheet-title k-text-center\">\n                                <div>Dropdownlist label</div>\n                            </div>\n                            <div className=\"k-actionsheet-actions\">\n                                <Button icon=\"x\" fillMode=\"flat\"></Button>\n                            </div>\n                        </div>\n                        <div className=\"k-actionsheet-content\">\n                            <List size=\"large\">\n                                <ListItem>List item</ListItem>\n                                <ListItem hover>Hover</ListItem>\n                                <ListItem focus>Focus</ListItem>\n                                <ListItem selected>Selected</ListItem>\n                                <ListItem hover selected>Hover selected</ListItem>\n                                <ListItem disabled>Disabled</ListItem>\n                                <ListItem>List item with very long text, that spans on multiple lines</ListItem>\n                                <ListItem showCheckbox>Checkbox</ListItem>\n                                <ListItem showIcon iconName=\"cog\">Icon</ListItem>\n                                <ListItem showCheckbox showIcon iconName=\"cog\">Checkbox icon</ListItem>\n                            </List>\n                        </div>\n                        <div className=\"k-actionsheet-footer k-actions k-actions-stretched\">\n                            <Button size=\"large\" themeColor=\"primary\">Select date</Button>\n                        </div>\n                    </div>\n                </div>\n            </section>\n            <section>\n                <div className=\"k-actionsheet-container\">\n                    <div className=\"k-overlay\"></div>\n\n                    <div className=\"k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet\">\n                        <div className=\"k-actionsheet-titlebar\">\n                            <div className=\"k-actionsheet-title k-text-center\">\n                                <div>Dropdownlist label</div>\n                            </div>\n                            <div className=\"k-actionsheet-actions\">\n                                <Button icon=\"x\" fillMode=\"flat\"></Button>\n                            </div>\n                        </div>\n                        <div className=\"k-actionsheet-content\">\n                            <List size=\"large\">\n                                <ListItem>List item</ListItem>\n                                <ListItem hover>Hover</ListItem>\n                                <ListItem focus>Focus</ListItem>\n                                <ListItem selected>Selected</ListItem>\n                                <ListItem hover selected>Hover selected</ListItem>\n                                <ListItem disabled>Disabled</ListItem>\n                                <ListItem>List item with very long text, that spans on multiple lines</ListItem>\n                                <ListItem showCheckbox>Checkbox</ListItem>\n                                <ListItem showIcon iconName=\"cog\">Icon</ListItem>\n                                <ListItem showCheckbox showIcon iconName=\"cog\">Checkbox icon</ListItem>\n                            </List>\n                        </div>\n                        <div className=\"k-actionsheet-footer k-actions k-actions-stretched\">\n                            <Button size=\"large\" themeColor=\"primary\">Select date</Button>\n                        </div>\n                    </div>\n                </div>\n            </section>\n        </div>\n\n    </>\n);\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { Icon } from '../icon/';\n\nexport interface ButtonProps {\n    children?: React.ReactNode;\n    className?: string;\n    dir?: string;\n    style?: React.CSSProperties;\n    iconClassName?: string;\n    text?: string;\n    icon?: string;\n    size?: null | 'small' | 'medium' | 'large';\n    rounded: null | 'small' | 'medium' | 'large' | 'full';\n    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear';\n    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    selected?: boolean;\n    disabled?: boolean;\n}\n\nexport class Button extends React.Component<ButtonProps> {\n\n    static defaultProps = {\n        size: 'medium',\n        rounded: 'medium',\n        fillMode: 'solid',\n        themeColor: 'base'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            iconClassName,\n            text,\n            icon,\n            size,\n            rounded,\n            fillMode,\n            themeColor,\n            hover,\n            focus,\n            active,\n            selected,\n            disabled,\n            ...htmlAttributes\n        } = this.props;\n\n        const hasIcon = (icon !== undefined);\n        const hasChildren = children !== undefined;\n\n        return (\n            <button\n                style={this.props.style}\n                {...htmlAttributes}\n                dir={this.props.dir}\n                className={classNames(\n                    className,\n                    'k-button',\n                    {\n                        [`k-button-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                        [`k-button-${fillMode}`]: fillMode,\n                        [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),\n                        [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n                        'k-icon-button': !hasChildren && hasIcon,\n                        'k-hover': hover,\n                        'k-focus': focus,\n                        'k-active': active,\n                        'k-selected': selected,\n                        'k-disabled': disabled\n                    }\n                )}>\n                {icon && <Icon className={classNames(iconClassName, 'k-button-icon')} name={icon} />}\n\n                {text || hasIcon\n                    ?\n                    <>\n                        {text && <span className=\"k-button-text\">{text}</span>}\n                        {children}\n                    </>\n                    : children && <span className=\"k-button-text\">{children}</span>\n                }\n            </button>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n", "export interface KendoThemeMaps {\n    sizeMap: Record<Exclude<any, null>, string>;\n    roundedMap: Record<Exclude<any, null>, string>;\n    calloutMap: Record<Exclude<any, null>, string>;\n    orientationMap: Record<Exclude<any, null>, string>;\n}\n\nexport const kendoThemeMaps: KendoThemeMaps = {\n    sizeMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    roundedMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    calloutMap: {\n        top: 'n',\n        bottom: 's',\n        left: 'w',\n        right: 'e'\n    },\n    orientationMap: {\n        vertical: 'vstack',\n        horizontal: 'hstack',\n    },\n};\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { ListItem, ListGroup, ListItemProps, ListContent, ListGroupItem } from '../list';\nimport { NoData } from '../nodata';\n\nexport interface ListProps {\n    children?: React.ReactElement[];\n    className?: string;\n    size?: null | 'small' | 'medium' | 'large';\n    virtualization?: boolean;\n    framework?: null | 'universal' | 'angular' | 'blazor';\n}\n\n\nexport class List extends React.Component<ListProps> {\n\n    static defaultProps = {\n        size: 'medium',\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            size,\n            virtualization,\n            framework,\n        } = this.props;\n\n        let listHeader: string | undefined;\n        let listGroup: string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;\n        let listContent: string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;\n        const listChildren : React.ReactElement<ListItemProps>[] = [];\n\n        if (children) {\n            children.map((child, index) => {\n                if ( child.type === ListGroup) {\n                    if (child.props.root === true) {\n                        listHeader = child.props.label;\n\n                        child.props.children.map( (optChild, index) => {\n                            listChildren.push(\n                                <ListItem\n                                    key={`optChild-${index}-${new Date().getTime()}`}\n                                    {...optChild.props}\n                                />\n                            );\n                        });\n\n                    } else {\n                        if ( framework === 'angular' || framework === 'blazor' ) {\n                            listChildren.push(\n                                <ListGroupItem\n                                    key={`listChild-${index}`}\n                                    {...child.props}\n                                >\n                                    {child.props.label}\n                                </ListGroupItem>\n                            );\n\n                            child.props.children.map( (optChild, index) => {\n                                listChildren.push(\n                                    <ListItem\n                                        key={`fwOptChild-${index}-${new Date().getTime()}`}\n                                        {...optChild.props}\n                                    />\n                                );\n                            });\n                        } else {\n                            child.props.children.forEach( ( optChild, index ) => {\n                                let groupLabel = '';\n\n                                if ( index === 0 ) {\n                                    groupLabel = child.props.label;\n                                }\n\n                                listChildren.push(\n                                    <ListItem\n                                        className={index === 0 ? 'k-first' : ''}\n                                        key={`groupLabel-${index}-${new Date().getTime()}`}\n                                        {...optChild.props}\n                                        groupLabel={groupLabel}\n                                    />\n                                );\n                            });\n                        }\n                    }\n\n                    listGroup = <ListGroup label={listHeader} virtualization={virtualization}>{listChildren}</ListGroup>;\n\n                } else if ( child.type === ListItem ) {\n                    listChildren.push( <ListItem key={`${child.type}-${index}`} {...child.props} /> );\n                    listContent = <ListContent virtualization={virtualization}>{listChildren}</ListContent>;\n                }\n            });\n        } else {\n            listContent = <NoData>No data found.</NoData>;\n        }\n\n        return (\n            <div\n                className={classNames(\n                    className,\n                    'k-list',\n                    {\n                        [`k-list-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                        'k-virtual-list': virtualization\n                    }\n                )}>\n                {listGroup}\n                {listContent}\n            </div>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface NoDataProps {\n    children?: React.ReactNode;\n    className?: string;\n}\n\nexport class NoData extends React.Component<NoDataProps> {\n\n    render() {\n        const {\n            children,\n            className\n        } = this.props;\n\n        return (\n            <div\n                className={classNames(\n                    className,\n                    'k-nodata',\n                )}>\n                {children}\n            </div>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\nimport { Checkbox } from '../checkbox';\nimport { Icon } from '../icon';\n\nexport interface ListItemProps {\n    children?: React.ReactNode;\n    className?: string;\n    groupLabel?: string;\n    showIcon?: boolean;\n    iconName?: string;\n    showCheckbox?: boolean;\n    checked?: boolean;\n    hover?: boolean;\n    focus?: boolean;\n    selected?: boolean;\n    disabled?: boolean;\n}\n\n\nexport class ListItem extends React.Component<ListItemProps> {\n\n    render() {\n        const {\n            children,\n            className,\n            groupLabel,\n            showIcon,\n            iconName,\n            showCheckbox,\n            checked,\n            hover,\n            focus,\n            selected,\n            disabled,\n        } = this.props;\n\n\n        return (\n            <li\n                className={classNames(\n                    className,\n                    'k-list-item',\n                    {\n                        'k-hover': hover,\n                        'k-focus': focus,\n                        'k-selected': selected,\n                        'k-disabled': disabled\n                    }\n                )}>\n                {showCheckbox && <Checkbox checked={checked} />}\n                {showIcon && <Icon name={iconName} />}\n                <span className=\"k-list-item-text\">{children}</span>\n                {groupLabel && groupLabel !== '' && <div className=\"k-list-item-group-label\">{groupLabel}</div>}\n            </li>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\n\nexport interface CheckboxProps {\n    id?: string;\n    className?: string;\n    checked?: boolean;\n    indeterminate?: boolean;\n    size?: null | 'small' | 'medium' | 'large';\n    rounded?: null | 'small' | 'medium' | 'large';\n    hover?: boolean;\n    focus?: boolean;\n    invalid?: boolean;\n    required?: boolean;\n    disabled?: boolean;\n}\n\nexport class Checkbox extends React.Component<CheckboxProps> {\n\n    static defaultProps = {\n        size: 'medium',\n        rounded: 'medium'\n    };\n\n    render() {\n        const {\n            id,\n            className,\n            checked,\n            indeterminate,\n            size,\n            rounded,\n            hover,\n            focus,\n            invalid,\n            disabled,\n            required\n        } = this.props;\n\n        return (\n            <span className=\"k-checkbox-wrap\">\n                <input\n                    id={id}\n                    type=\"checkbox\"\n                    checked={checked}\n                    required={required}\n                    className={classNames(\n                        className,\n                        'k-checkbox',\n                        {\n                            [`k-checkbox-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                            [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n                            'k-hover': hover,\n                            'k-focus': focus,\n                            'k-disabled': disabled,\n                            'k-checked': checked,\n                            'k-invalid': invalid,\n                            'k-indeterminate': !checked && indeterminate\n                        }\n                    )}\n                />\n            </span>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface ListContentProps {\n    children?: React.ReactNode;\n    className?: string;\n    virtualization?: boolean,\n}\n\n\nexport class ListContent extends React.Component<ListContentProps> {\n\n    render() {\n        const {\n            children,\n            className,\n            virtualization,\n        } = this.props;\n\n        return (\n            <div\n                className={classNames(\n                    className,\n                    'k-list-content'\n                )}>\n                <ul className={classNames('k-list-ul')}>\n                    {children}\n                </ul>\n                { virtualization && <div className=\"k-height-container\"><div></div></div> }\n            </div>\n\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface ListHeaderProps {\n    children?: React.ReactNode;\n    className?: string;\n}\n\n\nexport class ListHeader extends React.Component<ListHeaderProps> {\n\n    render() {\n        const {\n            children,\n            className,\n        } = this.props;\n\n        return (\n            <div\n                className={classNames(\n                    className,\n                    'k-list-group-sticky-header'\n                )}>\n                <div className=\"k-list-header-text\">{children}</div>\n            </div>\n\n        );\n    }\n}\n", "import * as React from 'react';\nimport { ListHeader, ListContent } from '../list';\n\nexport interface ListGroupProps {\n    children?: React.ReactNode;\n    label?: string;\n    root?: boolean;\n    virtualization?: boolean;\n}\n\n\nexport class ListGroup extends React.Component<ListGroupProps> {\n\n    render() {\n        const {\n            children,\n            label,\n        } = this.props;\n\n\n        return (\n            <>\n                {label && <ListHeader>{label}</ListHeader>}\n                {children && <ListContent virtualization>{children}</ListContent>}\n            </>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface ListGroupItemProps {\n    children?: React.ReactNode;\n    className?: string;\n}\n\n\nexport class ListGroupItem extends React.Component<ListGroupItemProps> {\n\n    render() {\n        const {\n            children,\n            className,\n        } = this.props;\n\n\n        return (\n            <li\n                className={classNames(\n                    className,\n                    'k-list-group-item'\n                )}>\n                <span className=\"k-list-item-text\">{children}</span>\n            </li>\n        );\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/form/tests/form-grid-layout.js

@@ -516,19 +516,19 @@
     className: "k-form-layout k-d-grid k-grid-cols-2",
     style: { gap: "0px 16px" }
   }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-form-field k-colspan-1"
+    className: "k-form-field k-colspan-1 k-col-span-1"
   }, /* @__PURE__ */ import_react.default.createElement("label", {
     className: "k-label k-form-label"
   }, "Country"), /* @__PURE__ */ import_react.default.createElement(DropdownList, {
     value: "France"
   })), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-form-field k-colspan-1"
+    className: "k-form-field k-colspan-1 k-col-span-1"
   }, /* @__PURE__ */ import_react.default.createElement("label", {
     className: "k-label k-form-label"
   }, "City"), /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-form-field-wrap"
   }, /* @__PURE__ */ import_react.default.createElement(Textbox, null))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-form-field k-colspan-2"
+    className: "k-form-field k-colspan-2 k-col-span-2"
   }, /* @__PURE__ */ import_react.default.createElement("label", {
     className: "k-label k-form-label"
   }, "Address Line"), /* @__PURE__ */ import_react.default.createElement("div", {