@progress/kendo-themes-html 6.1.1-dev.8 → 6.2.1-dev.0

package/dist/form/tests/form-field-inputs-react.js

@@ -737,7 +737,7 @@
           Button,
           {
             className: "k-spinner-increase",
-            icon: "arrow-n",
+            icon: "caret-alt-up",
             rounded: null,
             size,
             fillMode
@@ -747,7 +747,7 @@
           Button,
           {
             className: "k-spinner-decrease",
-            icon: "arrow-s",
+            icon: "caret-alt-down",
             rounded: null,
             size,
             fillMode
@@ -1274,7 +1274,7 @@
     }
 `;
   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, "Vertical Form (React)"), /* @__PURE__ */ import_react.default.createElement("span", null, "Horizontal Form (React)"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("form", { className: "k-form k-form-md" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Textbox:"), /* @__PURE__ */ import_react.default.createElement(Textbox, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Checkbox:"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Checkbox, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Checkbox, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-checkbox-label" }, "Label after the box"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Radio (Y):"), /* @__PURE__ */ import_react.default.createElement("ul", { role: "radiogroup", className: "k-radio-list k-list-vertical" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Female")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Male")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Radio (X):"), /* @__PURE__ */ import_react.default.createElement("ul", { role: "radiogroup", className: "k-radio-list k-list-horizontal" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Female")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Male")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "ColorPicker:"), /* @__PURE__ */ import_react.default.createElement(ColorPicker, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "MaskedTextBox:"), /* @__PURE__ */ import_react.default.createElement(MaskedTextbox, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "NumericTextBox:"), /* @__PURE__ */ import_react.default.createElement(NumericTextbox, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Switch:"), /* @__PURE__ */ import_react.default.createElement(Switch, { onLabel: "On", offLabel: "Off", checked: true })), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Slider:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider k-slider-horizontal" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "arrow-w", rounded: "full", className: "k-button-decrease" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-track-wrap" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-reset k-slider-items" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "0")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "5")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "10"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-track" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-selection" }), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-draghandle k-draghandle-end" }))), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "arrow-e", rounded: "full", className: "k-button-increase" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement(FloatingLabel, { label: "FloatingLabel", empty: true }, /* @__PURE__ */ import_react.default.createElement(Textbox, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement(FloatingLabel, { label: "FloatingLabel (focused)", empty: true, focus: true }, /* @__PURE__ */ import_react.default.createElement(Textbox, { focus: true }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Upload"), /* @__PURE__ */ import_react.default.createElement(Upload, { async: true, status: "done" }, /* @__PURE__ */ import_react.default.createElement(UploadFile, { progress: "100", status: "success", validationMsg: "File(s) successfully uploaded.", name: "test long long long long long long long long long long long long long.pdf", icon: "file-pdf" }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("form", { className: "k-form k-form-md k-form-horizontal" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Textbox:"), /* @__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" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Checkbox:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Checkbox, null)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label k-label-empty" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Checkbox, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-checkbox-label" }, "Label after the box")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Radio (Y):"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("ul", { role: "radiogroup", className: "k-radio-list k-list-vertical" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Female")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Male"))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Radio (X):"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("ul", { role: "radiogroup", className: "k-radio-list k-list-horizontal" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Female")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Male"))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "ColorPicker:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(ColorPicker, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "MaskedTextBox:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(MaskedTextbox, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "NumericTextBox:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(NumericTextbox, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Switch:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(Switch, { onLabel: "On", offLabel: "Off", checked: true }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Slider:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider k-slider-horizontal" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "arrow-w", rounded: "full", className: "k-button-decrease" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-track-wrap" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-reset k-slider-items" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "0")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "5")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "10"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-track" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-selection" }), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-draghandle k-draghandle-end" }))), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "arrow-e", rounded: "full", className: "k-button-increase" })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label k-label-empty" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(FloatingLabel, { label: "FloatingLabel", empty: true }, /* @__PURE__ */ import_react.default.createElement(Textbox, null)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label k-label-empty" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(FloatingLabel, { label: "FloatingLabel (focused)", empty: true, focus: true }, /* @__PURE__ */ import_react.default.createElement(Textbox, { focus: true })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Upload"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(Upload, { async: true, status: "done" }, /* @__PURE__ */ import_react.default.createElement(UploadFile, { progress: "100", status: "success", validationMsg: "File(s) successfully uploaded.", name: "test long long long long long long long long long long long long long.pdf", icon: "file-pdf" }))))))))
+    /* @__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, "Vertical Form (React)"), /* @__PURE__ */ import_react.default.createElement("span", null, "Horizontal Form (React)"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("form", { className: "k-form k-form-md" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Textbox:"), /* @__PURE__ */ import_react.default.createElement(Textbox, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Checkbox:"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Checkbox, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Checkbox, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-checkbox-label" }, "Label after the box"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Radio (Y):"), /* @__PURE__ */ import_react.default.createElement("ul", { role: "radiogroup", className: "k-radio-list k-list-vertical" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Female")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Male")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Radio (X):"), /* @__PURE__ */ import_react.default.createElement("ul", { role: "radiogroup", className: "k-radio-list k-list-horizontal" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Female")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Male")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "ColorPicker:"), /* @__PURE__ */ import_react.default.createElement(ColorPicker, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "MaskedTextBox:"), /* @__PURE__ */ import_react.default.createElement(MaskedTextbox, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "NumericTextBox:"), /* @__PURE__ */ import_react.default.createElement(NumericTextbox, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Switch:"), /* @__PURE__ */ import_react.default.createElement(Switch, { onLabel: "On", offLabel: "Off", checked: true })), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Slider:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider k-slider-horizontal" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-track-wrap" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-reset k-slider-items" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "0")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "5")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "10"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-track" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-selection" }), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-draghandle k-draghandle-end" }))), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement(FloatingLabel, { label: "FloatingLabel", empty: true }, /* @__PURE__ */ import_react.default.createElement(Textbox, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement(FloatingLabel, { label: "FloatingLabel (focused)", empty: true, focus: true }, /* @__PURE__ */ import_react.default.createElement(Textbox, { focus: true }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Upload"), /* @__PURE__ */ import_react.default.createElement(Upload, { async: true, status: "done" }, /* @__PURE__ */ import_react.default.createElement(UploadFile, { progress: "100", status: "success", validationMsg: "File(s) successfully uploaded.", name: "test long long long long long long long long long long long long long.pdf", icon: "file-pdf" }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("form", { className: "k-form k-form-md k-form-horizontal" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Textbox:"), /* @__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" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Checkbox:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Checkbox, null)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label k-label-empty" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Checkbox, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-checkbox-label" }, "Label after the box")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Radio (Y):"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("ul", { role: "radiogroup", className: "k-radio-list k-list-vertical" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Female")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Male"))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Radio (X):"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("ul", { role: "radiogroup", className: "k-radio-list k-list-horizontal" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Female")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-radio-list-item" }, /* @__PURE__ */ import_react.default.createElement(RadioButton, null), /* @__PURE__ */ import_react.default.createElement("label", { className: "k-radio-label" }, "Male"))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "ColorPicker:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(ColorPicker, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "MaskedTextBox:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(MaskedTextbox, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "NumericTextBox:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(NumericTextbox, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Switch:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(Switch, { onLabel: "On", offLabel: "Off", checked: true }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Slider:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider k-slider-horizontal" }, /* @__PURE__ */ import_react.default.createElement(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-track-wrap" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-reset k-slider-items" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "0")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "5")), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick" }), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-tick k-tick-large" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label" }, "10"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-track" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-slider-selection" }), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "k-draghandle k-draghandle-end" }))), /* @__PURE__ */ import_react.default.createElement(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label k-label-empty" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(FloatingLabel, { label: "FloatingLabel", empty: true }, /* @__PURE__ */ import_react.default.createElement(Textbox, null)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-label k-label-empty" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(FloatingLabel, { label: "FloatingLabel (focused)", empty: true, focus: true }, /* @__PURE__ */ import_react.default.createElement(Textbox, { focus: true })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "k-label" }, "Upload"), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ import_react.default.createElement(Upload, { async: true, status: "done" }, /* @__PURE__ */ import_react.default.createElement(UploadFile, { progress: "100", status: "success", validationMsg: "File(s) successfully uploaded.", name: "test long long long long long long long long long long long long long.pdf", icon: "file-pdf" }))))))))
   );
 })();
 //# sourceMappingURL=form-field-inputs-react.js.map