@progress/kendo-themes-html 5.5.1-dev.0 → 5.5.1-dev.1

package/dist/signature/tests/signature-flat.js

@@ -26,8 +26,8 @@
   var import_react = __toESM(__require("react"));
   var import_client = __toESM(__require("react-dom/client"));
 
-  // src/button/button.tsx
-  var React2 = __toESM(__require("react"));
+  // src/signature/signature.tsx
+  var React3 = __toESM(__require("react"));
 
   // src/utils/classNames.ts
   var classNames = (...args) => {
@@ -66,6 +66,9 @@
     }
   };
 
+  // src/button/button.tsx
+  var React2 = __toESM(__require("react"));
+
   // src/icon/icon.tsx
   var React = __toESM(__require("react"));
   var Icon = class extends React.Component {
@@ -139,375 +142,132 @@
     themeColor: "base"
   };
 
+  // src/signature/signature.tsx
+  var Signature = class extends React3.Component {
+    render() {
+      const {
+        className,
+        size,
+        rounded,
+        fillMode,
+        hover,
+        focus,
+        valid,
+        invalid,
+        disabled,
+        maximized
+      } = this.props;
+      return /* @__PURE__ */ React3.createElement("div", {
+        className: classNames(className, "k-signature", "k-input", {
+          [`k-signature-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+          [`k-input-${fillMode}`]: fillMode,
+          [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
+          "k-hover": hover,
+          "k-focus": focus,
+          "k-valid": valid,
+          "k-invalid": invalid,
+          "k-disabled": disabled,
+          "k-signature-maximized": maximized
+        })
+      }, /* @__PURE__ */ React3.createElement("div", {
+        className: classNames(className, "k-signature-actions", "k-signature-actions-top")
+      }, /* @__PURE__ */ React3.createElement(Button, {
+        className: classNames(className, "k-signature-action", "k-signature-maximize"),
+        icon: "window-maximize",
+        rounded: this.props.rounded,
+        size: this.props.size,
+        fillMode: "flat"
+      }), /* @__PURE__ */ React3.createElement(Button, {
+        className: classNames(className, "k-signature-action", "k-signature-minimize", "k-hidden"),
+        icon: "window-minimize",
+        rounded: this.props.rounded,
+        size: this.props.size,
+        fillMode: "flat"
+      })), /* @__PURE__ */ React3.createElement("canvas", {
+        className: "k-signature-canvas"
+      }), /* @__PURE__ */ React3.createElement("div", {
+        className: "k-signature-line"
+      }), /* @__PURE__ */ React3.createElement("div", {
+        className: classNames(className, "k-signature-actions", "k-signature-actions-bottom")
+      }, /* @__PURE__ */ React3.createElement(Button, {
+        className: classNames(className, "k-signature-action", "k-signature-clear"),
+        icon: "close",
+        rounded: this.props.rounded,
+        size: this.props.size,
+        fillMode: "flat"
+      })));
+    }
+  };
+  Signature.defaultProps = {
+    size: "medium",
+    rounded: "medium",
+    fillMode: "solid"
+  };
+
   // src/signature/tests/signature-flat.tsx
   var root = import_client.default.createRoot(document.getElementById("app"));
-  root.render(/* @__PURE__ */ import_react.default.createElement("div", {
+  var styles = `
+    div[dir="rtl"] {
+        display: flex;
+        justify-content: end;
+    }
+`;
+  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, "Signature"), /* @__PURE__ */ import_react.default.createElement("span", null, "Signature RTL"), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-rtl"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-hover"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-hover k-rtl"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-focus"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-focus k-rtl"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-invalid"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-invalid k-rtl"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-invalid k-focus"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-invalid k-focus k-rtl"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-disabled"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-disabled k-rtl"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
-  }))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature k-signature-md k-input k-input-flat k-rounded-md k-signature-maximized"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-top"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-maximize",
-    className: "k-signature-action k-signature-minimize"
-  }), /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "window-minimize",
-    className: "k-signature-action k-signature-minimize k-hidden"
-  })), /* @__PURE__ */ import_react.default.createElement("canvas", {
-    className: "k-signature-canvas"
-  }, "An alternate text describing what the canvas displays."), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-line"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-signature-actions k-signature-actions-bottom"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    fillMode: "flat",
-    size: "medium",
-    rounded: "medium",
-    icon: "close",
-    className: "k-signature-action k-signature-clear"
+  }, /* @__PURE__ */ import_react.default.createElement("span", null, "Signature"), /* @__PURE__ */ import_react.default.createElement("span", null, "Signature RTL"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat"
+  })), /* @__PURE__ */ import_react.default.createElement("div", {
+    dir: "rtl"
+  }, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat"
+  })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    hover: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", {
+    dir: "rtl"
+  }, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    hover: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    focus: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", {
+    dir: "rtl"
+  }, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    focus: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    invalid: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", {
+    dir: "rtl"
+  }, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    invalid: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    invalid: true,
+    focus: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", {
+    dir: "rtl"
+  }, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    invalid: true,
+    focus: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    disabled: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", {
+    dir: "rtl"
+  }, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    disabled: true
+  })), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-colspan-all k-col-span-full"
+  }, /* @__PURE__ */ import_react.default.createElement(Signature, {
+    fillMode: "flat",
+    maximized: true
   })))));
 })();
 //# sourceMappingURL=signature-flat.js.map