# HG changeset patch
# User cin
# Date 2023-05-03 16:47:52
# Node ID f139e2153e0da5649558b1ed9369da860d442c0d
# Parent  a3fba6b6c42e3c7daacf53969beb426e18d2a13c

added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed.
bind hooks are now specifing 'priority=false' parameter in setters. This will prevent excessive triggering of onChange events.

diff --git a/.vscode/settings.json b/.vscode/settings.json
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,10 +7,12 @@
         "**/.factorypath": true
     },
     "cSpell.words": [
+        "attrmodified",
         "dijit",
         "djbase",
         "djclass",
         "Unsubscribable",
+        "Validatable",
         "wpos"
     ]
 }
\ No newline at end of file
diff --git a/djx/package-lock.json b/djx/package-lock.json
--- a/djx/package-lock.json
+++ b/djx/package-lock.json
@@ -10,7 +10,7 @@
             "license": "BSD-2-Clause",
             "devDependencies": {
                 "@implab/core-amd": "^1.4.6",
-                "@implab/dojo-typings": "1.0.3",
+                "@implab/dojo-typings": "1.0.7",
                 "@types/chai": "4.1.3",
                 "@types/requirejs": "2.1.31",
                 "@types/tap": "15.0.7",
@@ -452,9 +452,9 @@
             }
         },
         "node_modules/@implab/dojo-typings": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.3.tgz",
-            "integrity": "sha512-oyCiuU5ay9MfvdQtZNJSeV30jKufdiLBAcq6rn360pww2hzdqvWEeoU9/New8fMzyNiaEumOlgbcS11EVIH+Jg==",
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.7.tgz",
+            "integrity": "sha512-/d4gi5vWXyl7Y4aI08z24mrZKiKePgScFQUEGW8ko9fdL8yHj5CLIP6beQn5n4ZlIGFFx3vcu0MwxH3lJwY3oA==",
             "dev": true
         },
         "node_modules/@istanbuljs/load-nyc-config": {
@@ -7056,9 +7056,9 @@
             "requires": {}
         },
         "@implab/dojo-typings": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.3.tgz",
-            "integrity": "sha512-oyCiuU5ay9MfvdQtZNJSeV30jKufdiLBAcq6rn360pww2hzdqvWEeoU9/New8fMzyNiaEumOlgbcS11EVIH+Jg==",
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.7.tgz",
+            "integrity": "sha512-/d4gi5vWXyl7Y4aI08z24mrZKiKePgScFQUEGW8ko9fdL8yHj5CLIP6beQn5n4ZlIGFFx3vcu0MwxH3lJwY3oA==",
             "dev": true
         },
         "@istanbuljs/load-nyc-config": {
diff --git a/djx/package.json b/djx/package.json
--- a/djx/package.json
+++ b/djx/package.json
@@ -26,7 +26,7 @@
         "@types/tap": "15.0.7",
         "rxjs": "7.5.6",
         "dojo": "1.16.0",
-        "@implab/dojo-typings": "1.0.3",
+        "@implab/dojo-typings": "1.0.7",
         "@typescript-eslint/eslint-plugin": "^5.23.0",
         "@typescript-eslint/parser": "^5.23.0",
         "eslint": "^8.28.0",
diff --git a/djx/src/main/ts/form/Form.tsx b/djx/src/main/ts/form/Form.tsx
new file mode 100644
--- /dev/null
+++ b/djx/src/main/ts/form/Form.tsx
@@ -0,0 +1,134 @@
+
+import { djbase, djclass } from "../declare";
+import { attach, createElement } from "../tsx";
+import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
+import _FormMixin from "./_FormMixin";
+
+
+/** This widget represents a document section containing interactive controls
+ * for submitting information.
+ */
+@djclass
+export default class Form<T extends object> extends djbase(DjxWidgetBase, _FormMixin) {
+
+    /** Name of form for scripting. */
+    name?: string;
+
+    /** The URL that processes the form submission.  */
+    action?: string;
+
+    /** The HTTP method to submit the form with. */
+    method?: "POST" | "GET" | "DIALOG";
+
+    /** If the value of the method attribute is post, enctype is the MIME type
+     * of the form submission.
+     */
+    enctype?: string;
+
+    /** Comma-separated content types the server accepts.
+     * 
+     * @deprecated This attribute has been deprecated and should not be used.
+     *   Instead, use the accept attribute on <input type=file> elements.
+    */
+    accept?: string;
+
+    /** Space-separated character encodings the server accepts. The browser
+     * uses them in the order in which they are listed. 
+     */
+    "accept-charset"?: string;
+
+    /** Indicates where to display the response after submitting the form. It
+     * is a name/keyword for a browsing context (for example, tab, window, or
+     * iframe).
+     */
+    target?: string;
+
+    /** Indicates whether input elements can by default have their values
+     * automatically completed by the browser. `autocomplete` attributes on form
+     * elements override it on `<form>`.
+     */
+    autocomplete?: "off" | "on";
+
+
+    /** This Boolean attribute indicates that the form shouldn't be validated
+     * when submitted. If this attribute is not set the form is validated, it
+     * can be overridden by a `formnovalidate` attribute on a `<button>`,
+     * `<input type="submit">`, or `<input type="image">` element belonging to
+     * the form.
+     */
+    novalidate?: boolean;
+
+    value?: T;
+
+    containerNode?: HTMLFormElement;
+
+    _resetting = false;
+
+    constructor(opts?: Partial<Form<T>>, srcRef?: string | Node) {
+        super(opts, srcRef);
+    }
+
+    render() {
+        return <form onreset={this._onReset} onsubmit={this._onSubmit} ref={attach(this, "containerNode")}>
+        </form>;
+    }
+
+    postCreate() {
+        super.postCreate();
+
+        this.watch("value", (_prop, _oldValue, newValue) => this.onValueChange(newValue));
+    }
+
+    private readonly _onReset = (evt: Event) => {
+        if (!this._resetting) {
+            // re-dispatch event to replace default reset behavior
+            try {
+                this._resetting = true;
+                evt.preventDefault();
+                if(this.containerNode?.dispatchEvent(new Event(evt.type, evt)))
+                    super.reset();
+            } finally {
+                this._resetting = false;
+            }
+        } else {
+            this.onReset(evt);
+        }
+    };
+
+    private readonly _onSubmit = (evt: SubmitEvent) => {
+        if(!this.novalidate && !this.validate()) {
+            evt.preventDefault();
+            evt.stopPropagation();
+        } else {
+            this.onSubmit(evt);
+        }
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onSubmit(evt: Event) {
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onReset(evt: Event) {
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onValueChange(value?: T) {
+    }
+
+    /** Resets the form. */
+    reset() {
+        if (!this.containerNode)
+            throw new Error("Can't reset the destroyed form");
+        this.containerNode.reset();
+    }
+
+    /** Programmatically submits form, no additional events emitted
+     * or checks made.
+     */
+    submit() {
+        if (!this.containerNode)
+            throw new Error("Can't submit the destroyed form");
+        this.containerNode.submit();
+    }
+}
diff --git a/djx/src/main/ts/form/_FormMixin.ts b/djx/src/main/ts/form/_FormMixin.ts
new file mode 100644
--- /dev/null
+++ b/djx/src/main/ts/form/_FormMixin.ts
@@ -0,0 +1,319 @@
+import { id as mid } from "module";
+import { djbase, djclass } from "../declare";
+import { whenRendered } from "../tsx/render";
+import { TraceSource } from "@implab/core-amd/log/TraceSource";
+import _WidgetBase = require("dijit/_WidgetBase");
+import _FormValueMixin = require("dijit/form/_FormValueMixin");
+import { scrollIntoView } from "dojo/window";
+import { get } from "@implab/core-amd/safe";
+
+const trace = TraceSource.get(mid);
+
+const isValueWidget = <W>(w: W): w is W & _FormValueMixin =>
+    typeof w === "object" && w !== null && "value" in w;
+
+const testMember = <T extends object>(member: keyof T, type?: "function" | "boolean" | "string" | "number" | "object") => type ?
+    <V extends object>(v: V): v is V & T => typeof v === "object" && v !== null && (typeof (v as V & T)[member] === type) :
+    <V extends object>(v: V): v is V & T => typeof v === "object" && v !== null && (member in v);
+
+// reset method support
+type Resettable = { reset(): void };
+
+const isResettable = testMember<Resettable>("reset", "function");
+
+// validation support
+type Validatable = { validate(): boolean };
+
+const isValidatable = testMember<Validatable>("validate", "function");
+
+// checkbox/toggle button/radio widgets support
+type CheckedProp = { checked: boolean };
+
+const hasCheckedProp = testMember<CheckedProp>("checked", "boolean");
+
+// multi-select support
+type MultipleProp = { multiple: unknown };
+
+const hasMultipleProp = testMember<MultipleProp>("multiple");
+
+// declared class
+type DeclaredClassProp = { declaredClass: string };
+
+const hasDeclaredClassProp = testMember<DeclaredClassProp>("declaredClass", "string");
+
+// state
+
+type StateProp = { state: string };
+
+const hasStateProp = testMember<StateProp>("state", "string");
+
+// common type for form members
+type FormValueWidget = _WidgetBase & _FormValueMixin;
+
+/** Traverses child widgets collecting form inputs.
+ * 
+ * @param children Widgets to traverse.
+ * @returns The array of form inputs.
+ */
+const collectDescendantFormWidgets = (children: _WidgetBase[]): (FormValueWidget)[] => children
+    .map(child =>
+        isValueWidget(child) ?
+            [child] :
+            collectDescendantFormWidgets(child.getChildren())
+    )
+    .reduce((res, part) => res.concat(part), []);
+
+// helper functions to manipulate the form value
+
+/** checks whether the value is and object and returns it otherwise returns 
+ * a new empty object. Useful to auto-crete a nested objects on demand.
+ */
+const _obj = (v: unknown) => (typeof v === "object" && v !== null ? v : {}) as Record<string, unknown>;
+
+/** Combines the values
+ * 
+ * @param prev The previous value, `undefined` if none
+ * @param value The new value to store
+ * @param hint The hint how to combine values
+ */
+const _combine = (prev: unknown, value: unknown, hint?: string) =>
+    // write the value as an array and append new values to it
+    hint === "array" ? prev === undefined ? [value] : ([] as unknown[]).concat(prev, value) :
+        // write the value as is and convert it the array when new values are appended
+        hint === "append" ? prev === undefined ? value : ([] as unknown[]).concat(prev, value) :
+            // write the value only if the previous one is undefined
+            hint === "unset" ? prev === undefined ? value : prev :
+                // overwrite
+                value;
+
+/** Merges the specified value to the object. The function takes a path for the
+ * new value and creates a nested objects if needed. The hint is used to control
+ * how to store a new or update the existing value.
+ */
+const _merge = (
+    [prop, ...rest]: string[],
+    obj: Record<string, unknown>,
+    value: unknown,
+    hint?: string
+): unknown => ({
+    ...obj,
+    [prop]: rest.length > 0 ?
+        _merge(rest, _obj(obj[prop]), value) :
+        _combine(obj[prop], value, hint)
+});
+
+/** Merges the specified value to the object. The function takes a path for the
+ * new value and creates a nested objects if needed. The hint is used to control
+ * how to store a new or update the existing value.
+ * 
+ * @param name The path of the property to assign, `x.y.z`
+ * @param value The value for the specified property
+ * @param hint The hint how to store the value. The valid values are:
+ *   `array`, `append`, `unset`.
+ */
+const _assign = (name: string, obj: object, value: unknown, hint?: string) =>
+    _merge(name.split("."), _obj(obj), value, hint) as object;
+
+@djclass
+abstract class _FormMixin extends djbase<_WidgetBase<Record<string, Event>>>() {
+
+    /** The form value. When assigned in the constructor is considered as
+     * initial (reset value) value of the form.
+     */
+    value?: object | undefined;
+
+    _resetValue?: object | undefined;
+
+    private _pending: { value: object; priority?: boolean | null } | undefined;
+
+    state: "Error" | "Incomplete" | "" = "";
+
+    _onChangeDelayTimer = { remove: () => { } };
+
+    /** Fill in form values from according to an Object (in the format returned
+     * by get('value'))
+     * 
+     * This method schedules updating form values after 
+     */
+    _setValueAttr(value: object, priority?: boolean | null) {
+        if (!this._pending) {
+            Promise.resolve() // delay value update
+                .then(whenRendered) // await for the rendering to complete
+                .then(() => {
+                    if (this._pending) { // double check
+                        const { value, priority } = this._pending;
+                        this._pending = undefined;
+                        this._setValueImpl(value, priority);
+                    }
+                }).catch(e => trace.error(e));
+        }
+        this._pending = { value, priority };
+    }
+
+    getDescendantFormWidgets() {
+        return collectDescendantFormWidgets(this.getChildren());
+    }
+
+    /**
+     * Resets contents of the form to initial value if any. If an input doesn't
+     * have a corresponding initial value it is reset to its default value.
+     */
+    reset() {
+        this.getDescendantFormWidgets()
+            .filter(isResettable)
+            .forEach(w => w.reset());
+        if (this._resetValue)
+            this.set("value", this._resetValue);
+    }
+
+    /**
+     * returns if the form is valid - same as isValid - but
+     * provides a few additional (ui-specific) features:
+     * 
+     * 1. it will highlight any sub-widgets that are not valid
+     * 2. it will call focus() on the first invalid sub-widget
+     */
+    validate() {
+        const [firstError] = this.getDescendantFormWidgets()
+            .map(w => {
+                w._hasBeenBlurred = true;
+                const valid = w.disabled || !isValidatable(w) || w.validate();
+                return valid ? null : w;
+            })
+            .filter(Boolean);
+
+        if (firstError) {
+            scrollIntoView(firstError.containerNode || firstError.domNode);
+            firstError.focus();
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    _setValueImpl(obj: object, priority?: boolean | null) {
+        const map = this.getDescendantFormWidgets()
+            .filter(w => w.name)
+            .reduce((g, w) => {
+                const entry = g[w.name];
+                return {
+                    ...g,
+                    [w.name]: entry ? entry.concat(w) : [w]
+                };
+            }, {} as Record<string, FormValueWidget[]>);
+
+        Object.keys(map).forEach(name => {
+            const widgets = map[name];
+            const _values = get(name, obj) as unknown;
+
+            if (_values !== undefined) {
+                const values = ([] as unknown[]).concat(_values);
+
+                const [w] = widgets; // at least one widget per group
+                if (hasCheckedProp(w)) {
+                    widgets.forEach(w =>
+                        w.set("value", values.indexOf(w._get("value")) >= 0, priority)
+                    );
+                } else if (hasMultipleProp(w) && w.multiple) {
+                    w.set("value", values, priority);
+                } else {
+                    widgets.forEach((w, i) => w.set("value", values[i], priority));
+                }
+            }
+        });
+    }
+
+    _getValueAttr() {
+        return this.getDescendantFormWidgets()
+            .map(widget => {
+                const name = widget.name;
+                if (name && !widget.disabled) {
+
+                    const value = widget.get("value") as unknown;
+
+                    if (hasCheckedProp(widget)) {
+                        if (hasDeclaredClassProp(widget) && /Radio/.test(widget.declaredClass)) {
+                            // radio button
+                            if (value !== false) {
+                                return { name, value };
+                            } else {
+                                // give radio widgets a default of null
+                                return { name, value: null, hint: "unset" };
+                            }
+                        } else {
+                            // checkbox/toggle button
+                            if (value !== false)
+                                return { name, value, hint: "array" };
+                        }
+                    } else {
+                        return { name, value, hint: "append" };
+                    }
+                }
+                return {};
+            })
+            .reduce((obj, { name, value, hint }) => name ? _assign(name, obj, value, hint) : obj, {});
+    }
+
+    /** Returns true if all of the widgets are valid.
+     * @deprecated will be removed
+     */
+    isValid() {
+        return this.state === "";
+    }
+
+    /** Triggered when the validity state changes */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onValidStateChange(validity: boolean) {
+    }
+
+    _getState() {
+        const states = this.getDescendantFormWidgets().filter(hasStateProp).map(w => w.get("state"));
+
+        return states.indexOf("Error") >= 0 ? "Error" :
+            states.indexOf("Incomplete") >= 0 ? "Incomplete" : "";
+    }
+
+    _onChildChange(attr: string) {
+        // summary:
+        //		Called when child's value or disabled state changes
+
+        // The unit tests expect state update to be synchronous, so update it immediately.
+        if (!attr || attr == "state" || attr == "disabled") {
+            this._set("state", this._getState());
+        }
+
+        // Use defer() to collapse value changes in multiple children into a single
+        // update to my value.   Multiple updates will occur on:
+        //	1. Form.set()
+        //	2. Form.reset()
+        //	3. user selecting a radio button (which will de-select another radio button,
+        //		 causing two onChange events)
+        if (!attr || attr == "value" || attr == "disabled" || attr == "checked") {
+            if (this._onChangeDelayTimer) {
+                this._onChangeDelayTimer.remove();
+            }
+            this._onChangeDelayTimer = this.defer(() => {
+                this._onChangeDelayTimer = { remove: () => { } };
+                this._set("value", this.get("value"));
+            }, 10);
+        }
+    }
+
+    postCreate() {
+        super.postCreate();
+
+        this._resetValue = this.value;
+
+        this.on("attrmodified-state, attrmodified-disabled, attrmodified-value, attrmodified-checked", this._onAttrModified);
+        this.watch("state", (prop, ov, nv) => this.onValidStateChange(nv === ""));
+    }
+
+    private readonly _onAttrModified = ({ target, type }: Event) => {
+        // ignore events that I fire on myself because my children changed
+        if (target !== this.domNode) {
+            this._onChildChange(type.replace("attrmodified-", ""));
+        }
+    };
+}
+
+export default _FormMixin;
\ No newline at end of file
diff --git a/djx/src/main/ts/tsx.ts b/djx/src/main/ts/tsx.ts
--- a/djx/src/main/ts/tsx.ts
+++ b/djx/src/main/ts/tsx.ts
@@ -130,7 +130,7 @@ export const attach = <W extends DjxWidg
 export const bind = <K extends string, T>(attr: K, subj: Subscribable<T>) => {
     let h = { unsubscribe() { } };
 
-    return (el: Element | { set(name: K, value: T): void; } | undefined) => {
+    return (el: Element | { set(name: K, value: T, priority?: boolean): void; } | undefined) => {
         if (el) {
             if (isElementNode(el)) {
                 h = subj.subscribe({
@@ -138,7 +138,7 @@ export const bind = <K extends string, T
                 });
             } else {
                 h = subj.subscribe({
-                    next: value => el.set(attr, value)
+                    next: value => el.set(attr, value, false)
                 });
             }
         } else {
diff --git a/playground/package-lock.json b/playground/package-lock.json
--- a/playground/package-lock.json
+++ b/playground/package-lock.json
@@ -28,6 +28,15 @@
                 "typescript": "4.8.3"
             }
         },
+        "../djx/build/npm/package": {
+            "name": "@implab/djx",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "peerDependencies": {
+                "@implab/core-amd": "^1.4.6",
+                "dojo": "^1.10.0"
+            }
+        },
         "node_modules/@eslint/eslintrc": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.1.tgz",
@@ -104,13 +113,8 @@
             }
         },
         "node_modules/@implab/djx": {
-            "resolved": "file:../djx/build/npm/package",
-            "dev": true,
-            "license": "BSD-2-Clause",
-            "peerDependencies": {
-                "@implab/core-amd": "^1.4.6",
-                "dojo": "^1.10.0"
-            }
+            "resolved": "../djx/build/npm/package",
+            "link": true
         },
         "node_modules/@implab/dojo-typings": {
             "version": "1.0.2",
@@ -2779,7 +2783,7 @@
             "requires": {}
         },
         "@implab/djx": {
-            "dev": true,
+            "version": "file:../djx/build/npm/package",
             "requires": {}
         },
         "@implab/dojo-typings": {
diff --git a/playground/src/main/ts/main.ts b/playground/src/main/ts/main.ts
--- a/playground/src/main/ts/main.ts
+++ b/playground/src/main/ts/main.ts
@@ -13,5 +13,7 @@ TraceSource.on(source => {
 });
 
 const w = new MainWidget();
+document.body.className = 'tundra';
 w.placeAt(document.body);
+w.startup();
 w.load();
diff --git a/playground/src/main/ts/view/MainWidget.tsx b/playground/src/main/ts/view/MainWidget.tsx
--- a/playground/src/main/ts/view/MainWidget.tsx
+++ b/playground/src/main/ts/view/MainWidget.tsx
@@ -1,12 +1,13 @@
 import { djbase, djclass } from "@implab/djx/declare";
 import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
-import { bind, createElement, prop, watch, watchFor } from "@implab/djx/tsx";
+import { attach, bind, createElement, prop, watch, watchFor } from "@implab/djx/tsx";
 import MainModel from "../model/MainModel";
 import { Observable } from "@implab/djx/observable";
 import { OrderedUpdate } from "@implab/djx/store";
 import { Appointment } from "../model/Appointment";
 import { LocalDate } from "@js-joda/core";
 import Button = require("dijit/form/Button");
+import NewAppointment from "./NewAppointment";
 
 @djclass
 export default class MainWidget extends djbase(DjxWidgetBase) {
@@ -19,6 +20,8 @@ export default class MainWidget extends 
 
     dateFrom?: LocalDate;
 
+    toolbarNode?: HTMLDivElement; 
+
     constructor(opts?: Partial<MainWidget> & ThisType<MainWidget>, srcNode?: string | Node) {
         super(opts, srcNode);
 
@@ -48,7 +51,8 @@ export default class MainWidget extends 
                     )}
                 </ul>
             )}
-            <div>
+            <NewAppointment/>
+            <div ref={attach(this, "toolbarNode")}>
                 <Button onClick={this._onAddAppointmentClick}>Add new appointment</Button>
             </div>
         </div>;
diff --git a/playground/src/main/ts/view/NewAppointment.tsx b/playground/src/main/ts/view/NewAppointment.tsx
new file mode 100644
--- /dev/null
+++ b/playground/src/main/ts/view/NewAppointment.tsx
@@ -0,0 +1,60 @@
+import { id as mid } from "module";
+import { djbase, djclass } from "@implab/djx/declare";
+import { attach, bind, createElement, prop } from "@implab/djx/tsx";
+import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
+import Form from "@implab/djx/form/Form";
+import { LocalDateTime } from "@js-joda/core";
+import { TraceSource } from "@implab/core-amd/log/TraceSource";
+import DateTextBox = require("dijit/form/DateTextBox");
+import Button = require("dijit/form/Button");
+import ValidationTextBox = require("dijit/form/ValidationTextBox");
+
+const trace = TraceSource.get(mid);
+
+interface NewAppointmentProps {
+    title: string;
+
+    startAt?: Date;
+}
+
+@djclass
+export default class NewAppointment extends djbase(DjxWidgetBase) {
+    value: NewAppointmentProps = {title: "Appointment 1"};
+
+    render() {
+        return <section>
+            <Form<NewAppointmentProps> ref={bind("value", prop(this, "value"))}
+                method="DIALOG"
+                onSubmit={this._onSubmit}
+                onReset={this._onReset}
+                onValidStateChange={this._onValidStateChange}
+                onValueChange={this._onValueChange}
+            >
+                <p><label>Title: <ValidationTextBox required name="title"/></label></p>
+                <p><label>Appointment date: <DateTextBox required name="startAt"/></label></p>
+                <footer>
+                    <Button type="submit">Send</Button>
+                    <Button type="reset">Reset</Button>
+                </footer>
+            </Form>
+        </section>;
+    }
+
+    private readonly _onSubmit = (evt: Event) => {
+        trace.debug("onSubmit");
+    };
+
+    private readonly _onValidStateChange = (isValid?: boolean) => {
+        trace.debug("isValid={0}", isValid);
+    };
+
+    private readonly _onValueChange = (value: NewAppointmentProps) => {
+        trace.debug("valueChange={0}", value);
+    };
+
+    private readonly _onReset = (evt: Event) => {
+        trace.debug("onReset");
+        //evt.preventDefault();
+    };
+
+}
\ No newline at end of file