xmlui 0.9.11 → 0.9.13

package/dist/scripts/src/components/Form/FormNative.js

@@ -140,7 +140,6 @@ const formReducer = (0, immer_1.default)((state, action) => {
             break;
         }
         case formActions_1.FormActionKind.BACKEND_VALIDATION_ARRIVED: {
-            //console.log(state.validationResults[field]) //action.payload.fieldValidationResults
             state.submitInProgress = false;
             state.generalValidationResults = action.payload.generalValidationResults;
             Object.keys(state.validationResults).forEach((key) => {
@@ -241,7 +240,14 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         const prevFocused = document.activeElement;
         dispatch((0, formActions_1.formSubmitting)());
         try {
-            yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formState.subject, {
+            // --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
+            const filteredSubject = Object.entries(formState.subject).reduce((acc, [key, value]) => {
+                if (!key.endsWith(formActions_1.UNBOUND_FIELD_SUFFIX)) {
+                    acc[key] = value;
+                }
+                return acc;
+            }, {});
+            yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
                 passAsDefaultBody: true,
             }));
             dispatch((0, formActions_1.formSubmitted)());

package/dist/scripts/src/components/Form/formActions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormActionKind = void 0;
+exports.FormActionKind = exports.UNBOUND_FIELD_SUFFIX = void 0;
 exports.fieldInitialized = fieldInitialized;
 exports.fieldChanged = fieldChanged;
 exports.fieldFocused = fieldFocused;
@@ -12,6 +12,7 @@ exports.formSubmitting = formSubmitting;
 exports.formSubmitted = formSubmitted;
 exports.formReset = formReset;
 exports.backendValidationArrived = backendValidationArrived;
+exports.UNBOUND_FIELD_SUFFIX = "__UNBOUND_FIELD__";
 var FormActionKind;
 (function (FormActionKind) {
     FormActionKind["FIELD_LOST_FOCUS"] = "FormActionKind:FIELD_LOST_FOCUS";
@@ -99,16 +100,16 @@ function formReset(originalSubject) {
     return {
         type: FormActionKind.RESET,
         payload: {
-            originalSubject
+            originalSubject,
         },
     };
 }
-function backendValidationArrived({ generalValidationResults = [], fieldValidationResults = {} }) {
+function backendValidationArrived({ generalValidationResults = [], fieldValidationResults = {}, }) {
     return {
         type: FormActionKind.BACKEND_VALIDATION_ARRIVED,
         payload: {
             generalValidationResults,
-            fieldValidationResults
+            fieldValidationResults,
         },
     };
 }

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -35,6 +35,7 @@ const Validations_1 = require("./Validations");
 const SliderNative_1 = require("../Slider/SliderNative");
 const ColorPickerNative_1 = require("../ColorPicker/ColorPickerNative");
 const HelperText_1 = require("./HelperText");
+const NumberBox2Native_1 = require("../NumberBox/NumberBox2Native");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
@@ -46,32 +47,36 @@ exports.defaultProps = {
 };
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
     var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer"]);
+    const defaultId = (0, react_1.useId)();
+    const [formItemId, setFormItemId] = (0, react_1.useState)(bindTo);
     const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
     const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
     const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
-    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, bindTo));
+    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, formItemId));
     const initialValue = initialValueFromSubject === undefined ? rest.initialValue : initialValueFromSubject;
-    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, bindTo));
-    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[bindTo]);
+    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, formItemId));
+    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[formItemId]);
     const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);
     const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value.enabled);
     const isEnabled = enabled && formEnabled;
     (0, react_1.useEffect)(() => {
-        dispatch((0, formActions_1.fieldInitialized)(bindTo, initialValue));
+        const newId = bindTo || `${defaultId}${formActions_1.UNBOUND_FIELD_SUFFIX}`;
+        setFormItemId(newId);
+        dispatch((0, formActions_1.fieldInitialized)(newId, initialValue));
     }, [bindTo, dispatch, initialValue]);
-    (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, bindTo, customValidationsDebounce);
+    (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
     const onStateChange = (0, react_1.useCallback)(({ value }, options) => {
         //we already handled the initial value in the useEffect with fieldInitialized(...);
         if (!(options === null || options === void 0 ? void 0 : options.initial)) {
-            dispatch((0, formActions_1.fieldChanged)(bindTo, value));
+            dispatch((0, formActions_1.fieldChanged)(formItemId, value));
         }
-    }, [bindTo, dispatch]);
+    }, [formItemId, dispatch]);
     (0, react_1.useEffect)(() => {
         return () => {
-            dispatch((0, formActions_1.fieldRemoved)(bindTo));
+            dispatch((0, formActions_1.fieldRemoved)(formItemId));
         };
-    }, [bindTo, dispatch]);
-    const { validationStatus, isHelperTextShown } = (0, Validations_1.useValidationDisplay)(bindTo, value, validationResult, validationMode);
+    }, [formItemId, dispatch]);
+    const { validationStatus, isHelperTextShown } = (0, Validations_1.useValidationDisplay)(formItemId, value, validationResult, validationMode);
     let formControl = null;
     switch (type) {
         case "select": {
@@ -99,6 +104,14 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, integersOnly: type === "integer", validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
             break;
         }
+        // NOTE: This is a prototype for the new number field
+        // works as good as the regular number field but untested
+        // in production.
+        case "integer2":
+        case "number2": {
+            formControl = ((0, jsx_runtime_1.jsx)(NumberBox2Native_1.NumberBox2, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, min: validations.minValue, max: validations.maxValue, integersOnly: type === "integer2" })));
+            break;
+        }
         case "switch":
         case "checkbox": {
             formControl = ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, Object.assign({}, rest, { value: value, updateState: onStateChange, 
@@ -141,10 +154,10 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         }
     }
     const onFocus = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.fieldFocused)(bindTo));
+        dispatch((0, formActions_1.fieldFocused)(formItemId));
     });
     const onBlur = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.fieldLostFocus)(bindTo));
+        dispatch((0, formActions_1.fieldLostFocus)(formItemId));
     });
     const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
     return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPositionValue, label: label, labelWidth: labelWidthValue, labelBreak: labelBreakValue, enabled: isEnabled, required: validations.required, validationInProgress: validationResult === null || validationResult === void 0 ? void 0 : validationResult.partial, onFocus: onFocus, onBlur: onBlur, style: style, validationResult: (0, jsx_runtime_1.jsx)("div", { ref: animateContainerRef, children: isHelperTextShown &&

package/dist/scripts/src/components/Items/Items.js

@@ -19,6 +19,7 @@ exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
         },
         itemTemplate: (0, metadata_helpers_1.dComponent)("The component template to display a single item"),
     },
+    childrenAsTemplate: "itemTemplate",
     contextVars: {
         $item: (0, metadata_helpers_1.dComponent)("This value represents the current iteration item while the component renders its children."),
         $itemIndex: (0, metadata_helpers_1.dComponent)("This integer value represents the current iteration index (zero-based) while rendering children."),
@@ -30,6 +31,6 @@ exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
 exports.itemsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ItemsMd, (rendererContext) => {
     const { node, renderChild, extractValue, layoutContext } = rendererContext;
     return ((0, jsx_runtime_1.jsx)(ItemsNative_1.Items, { items: extractValue(node.props.items) || extractValue(node.props.data), reverse: extractValue(node.props.reverse), renderItem: (contextVars, key) => {
-            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: node.children || node.props.itemTemplate, renderChild: renderChild, layoutContext: layoutContext }, key));
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: node.props.itemTemplate, renderChild: renderChild, layoutContext: layoutContext }, key));
         } }));
 });

package/dist/scripts/src/components/List/List.js

@@ -71,6 +71,7 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: true,
         },
     },
+    childrenAsTemplate: 'itemTemplate',
     apis: {
         scrollToTop: (0, ComponentDefs_1.d)("This method scrolls the list to the top."),
         scrollToBottom: (0, ComponentDefs_1.d)("This method scrolls the list to the bottom."),
@@ -83,7 +84,7 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(List_module_scss_1.default.themeVars),
 });
 exports.dynamicHeightListComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ListMd, ({ node, extractValue, renderChild, layoutCss, layoutContext, lookupEventHandler, registerComponentApi, }) => {
-    const itemTemplate = node.props.itemTemplate || node.children;
+    const itemTemplate = node.props.itemTemplate;
     const hideEmptyGroups = extractValue.asOptionalBoolean(node.props.hideEmptyGroups, true);
     return ((0, jsx_runtime_1.jsx)(ListNative_1.ListNative, { registerComponentApi: registerComponentApi, style: layoutCss, loading: extractValue.asOptionalBoolean(node.props.loading), items: extractValue(node.props.items) || extractValue(node.props.data), limit: extractValue(node.props.limit), groupBy: extractValue(node.props.groupBy), orderBy: extractValue(node.props.orderBy), availableGroups: extractValue(node.props.availableGroups), scrollAnchor: node.props.scrollAnchor, pageInfo: extractValue(node.props.pageInfo), idKey: extractValue(node.props.idKey), requestFetchPrevPage: lookupEventHandler("requestFetchPrevPage"), requestFetchNextPage: lookupEventHandler("requestFetchNextPage"), emptyListPlaceholder: renderChild(node.props.emptyListTemplate), groupsInitiallyExpanded: extractValue.asOptionalBoolean(node.props.groupsInitiallyExpanded), defaultGroups: extractValue(node.props.defaultGroups), borderCollapse: extractValue.asOptionalBoolean(node.props.borderCollapse, true), itemRenderer: itemTemplate &&
             ((item, key) => {

package/dist/scripts/src/components/Markdown/Markdown.js

@@ -26,17 +26,20 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     defaultThemeVars: {
+        "backgroundColor-Admonition": "$color-warn-300",
         "borderRadius-Admonition": "$space-4",
         "iconSize-Admonition": "1.5rem",
         "padding-Admonition": "1rem",
         "marginBottom-Admonition": "1rem",
         "marginLeft-Admonition-content": ".5rem",
+        "backgroundColor-Blockquote": "$color-warn-200",
         "accentWidth-Blockquote": "3px",
         "accentColor-Blockquote": "$color-surface-500",
         "padding-Blockquote": ".5rem",
         "marginBottom-Blockquote": "1rem",
         "marginBottom-Text-codefence": ".5rem",
         "marginBottom-Text-markdown": ".5rem",
+        "marginTop-HtmlLi": "-0.5rem",
         light: {
         // --- No light-specific theme vars
         },

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -27,7 +27,6 @@ const HtmlTags_module_scss_1 = __importDefault(require("../HtmlTags/HtmlTags.mod
 const HeadingNative_1 = require("../Heading/HeadingNative");
 const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("../Link/LinkNative");
-const ImageNative_1 = require("../Image/ImageNative");
 const Toggle_1 = require("../Toggle/Toggle");
 const ScriptingSourceTree_1 = require("../../abstractions/scripting/ScriptingSourceTree");
 exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeIndents = true, children, style, }) {
@@ -44,6 +43,10 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
                     return (0, jsx_runtime_1.jsx)("video", Object.assign({ className: HtmlTags_module_scss_1.default.htmlVideo }, props, { children: children }));
                 },
+                img(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("img", Object.assign({ className: HtmlTags_module_scss_1.default.htmlImage }, props, { children: children }));
+                },
                 h1({ children }) {
                     return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h1", children: children });
                 },
@@ -83,14 +86,17 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                 blockquote({ children }) {
                     return (0, jsx_runtime_1.jsx)(Blockquote, { children: children });
                 },
-                ol({ children }) {
-                    return (0, jsx_runtime_1.jsx)("ol", { className: HtmlTags_module_scss_1.default.htmlOl, children: children });
+                ol(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("ol", Object.assign({ className: HtmlTags_module_scss_1.default.htmlOl }, props, { children: children }));
                 },
-                ul({ children }) {
-                    return (0, jsx_runtime_1.jsx)("ul", { className: HtmlTags_module_scss_1.default.htmlUl, children: children });
+                ul(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: HtmlTags_module_scss_1.default.htmlUl }, props, { children: children }));
                 },
-                li({ children }) {
-                    return (0, jsx_runtime_1.jsx)("li", { children: children }); // No custom styling for li elements
+                li(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("li", Object.assign({ className: HtmlTags_module_scss_1.default.htmlLi }, props, { children: children }));
                 },
                 hr() {
                     return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
@@ -100,9 +106,6 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                     const allowedProps = ['style', 'disabled', 'active', 'icon', 'onClick'];
                     return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, Object.assign({ to: href }, allowedProps, { children: children })));
                 },
-                img({ src, alt }) {
-                    return (0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: src, alt: alt });
-                },
                 // TODO: somehow get the label from the containing li element
                 input({ disabled, checked }) {
                     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { variant: "checkbox", readOnly: disabled, value: checked }));

package/dist/scripts/src/components/NavPanel/NavPanel.js

@@ -20,9 +20,9 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "transparent",
+        [`backgroundColor-${COMP}`]: "$backgroundColor",
         [`border-${COMP}`]: '0px solid $borderColor',
-        [`paddingHorizontal-${COMP}`]: "$space-4",
+        [`paddingHorizontal-${COMP}`]: "0",
         [`paddingVertical-logo-${COMP}`]: "$space-4",
         [`paddingHorizontal-logo-${COMP}`]: "$space-4",
         [`marginBottom-logo-${COMP}`]: "$space-4",

package/dist/scripts/src/components/NumberBox/NumberBox2.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.numberBox2ComponentRenderer = exports.NumberBoxMd2 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NumberBox_module_scss_1 = __importDefault(require("./NumberBox.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
+const NumberBox2Native_1 = require("./NumberBox2Native");
+const COMP = "NumberBox2";
+exports.NumberBoxMd2 = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `A \`${COMP}\` component allows users to input numeric values: either integer or floating ` +
+        `point numbers. It also accepts empty values, where the stored value will be of type \`null\`.`,
+    props: {
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        maxLength: (0, metadata_helpers_1.dMaxLength)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        startText: (0, metadata_helpers_1.dStartText)(),
+        startIcon: (0, metadata_helpers_1.dStartIcon)(),
+        endText: (0, metadata_helpers_1.dEndText)(),
+        endIcon: (0, metadata_helpers_1.dEndIcon)(),
+        hasSpinBox: {
+            description: `This boolean prop shows (\`true\`) or hides (\`false\`) the spinner buttons for the input field.`,
+            valueType: "boolean",
+            defaultValue: true,
+        },
+        step: {
+            description: `This prop governs how big the step when clicking on the spinner of the field.`,
+            valueType: "number",
+            defaultValue: 1,
+        },
+        integersOnly: {
+            description: `This boolean property signs whether the input field accepts integers only (\`true\`) ` +
+                `or not (\`false\`).`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        maxFractionDigits: {
+            description: `This prop sets the maximum number of decimal places allowed in the input field. ` +
+                `If the number of decimal places is greater than this value, the value will be truncated to the maximum allowed decimal places. `,
+            valueType: "number",
+            defaultValue: 3,
+        },
+        zeroOrPositive: {
+            description: `This boolean property determines whether the input value can only be 0 or positive numbers ` +
+                `(\`true\`) or also negative (\`false\`).`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        minValue: (0, ComponentDefs_1.d)(`The minimum value the input field allows. Can be a float or an integer if ` +
+            `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
+        maxValue: (0, ComponentDefs_1.d)(`The maximum value the input field allows. Can be a float or an integer if ` +
+            `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
+    },
+    events: {
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, metadata_helpers_1.dValue)(),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NumberBox_module_scss_1.default.themeVars),
+});
+exports.numberBox2ComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NumberBoxMd2, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberBox2Native_1.NumberBox2, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalString(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), step: extractValue(node.props.step), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), maxFractionDigits: extractValue.asOptionalNumber(node.props.maxFractionDigits), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), 
+        //maxLength={extractValue(node.props.maxLength)}
+        label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+});