jsl-ui 9.28.3 → 9.28.4

package/lib/components/select/SelectComponent.js

@@ -1,356 +1,352 @@
-import "./SelectStyle.scss";
-import { JSLRender } from "jsl-render";
-import { SelectDDAreaComponent } from "./SelectDDAreaComponent";
-import { EventHandler } from "../../interaction/eventhandler";
-export class SelectComponent {
-    constructor(o) {
-        var _a;
-        this.expanded = false;
-        this.doNotFocus = false;
-        const defaultOptions = {
-            data: undefined,
-            keyColumn: "value",
-            textColumn: "text",
-            dropdownHeight: "10rem",
-            dropDirection: "auto",
-            enableSearch: true,
-            enableAnimation: true,
-            enableKeyboard: true,
-            rowHeight: 28,
-            allowEmpty: true,
-            enabled: true,
-            openOnEnter: true,
-            focusFirstItem: true,
-            autoShrink: true,
-            bindMode: "toModel",
-            onAppend: (dom) => {
-                document.body.appendChild(dom);
-            },
-            onRenderGroup: (args) => {
-                args.node.content = args.groupValue;
-            },
-            onRender: o.multiple ? (args) => {
-                if (args.isCurrent) {
-                    args.node.content = args.data.map((d) => d[this.options.textColumn]).join(", ");
-                }
-                else {
-                    args.node.content = args.data[this.options.textColumn];
-                }
-            } : (args) => {
-                args.node.content = args.data[this.options.textColumn];
-            },
-            matchSearch: (data, term) => { var _a; return (((_a = data[this.options.textColumn]) !== null && _a !== void 0 ? _a : "").toString().toLowerCase().indexOf(term.toLowerCase()) >= 0); }
-        };
-        this.options = { ...defaultOptions, ...o };
-        this.options.onChange = EventHandler.Create(o.onChange);
-        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
-            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-        }
-        this.setValue(this.options.value);
-    }
-    render() {
-        var _a, _b;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            const value = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property];
-            if (value != null) {
-                if (this.options.multiple) {
-                    this.selected = this.options.data.filter((x) => value.indexOf(x[this.options.keyColumn]) >= 0);
-                }
-                else {
-                    this.selected = this.options.data.filter((x) => x[this.options.keyColumn] === value)[0];
-                }
-            }
-            else {
-                this.selected = this.options.multiple ? [] : null;
-            }
-        }
-        return {
-            tag: "div",
-            attr: {
-                style: this.options.style,
-                class: "select-comp " + (this.expanded ? "expanded " : "") + (!this.options.enabled ? "disabled " : "") + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
-                mousedown: (e) => { if (this.expanded || e.which === 3) {
-                    return;
-                } {
-                    this.doNotFocus = true;
-                    this.show();
-                } }
-            },
-            children: [this.renderSelection(), {
-                    tag: "button",
-                    attr: {
-                        disabled: this.options.enabled ? undefined : "disabled",
-                        class: "sel-expander",
-                        keydown: (e) => {
-                            if (this.options.openOnEnter && this.options.enabled) {
-                                if (e.which === SelectComponent.ENTER_KEY) {
-                                    this.toggle();
-                                }
-                                else if (!this.expanded) {
-                                    if (e.key && e.key.length === 1) {
-                                        this.show(e.key);
-                                    }
-                                }
-                            }
-                        },
-                        focus: (e) => {
-                            if (!this.doNotFocus && this.options.openOnFocus && this.options.enabled) {
-                                this.toggle();
-                            }
-                            if (this.doNotFocus) {
-                                this.doNotFocus = false;
-                            }
-                        }, click: (e) => {
-                            e.preventDefault();
-                        }
-                    },
-                    content: this.expanded ? "▲" : "▼"
-                }]
-        };
-    }
-    onCreate(node) {
-        this.dom = node.dom;
-    }
-    onUpdate(node) {
-        this.dom = node.dom;
-    }
-    onInit(renderer) {
-        this.renderer = renderer;
-    }
-    toggle() {
-        this.expanded = !this.expanded;
-        if (this.expanded) {
-            this.show();
-        }
-        else {
-            this.close();
-        }
-    }
-    isExpanded() {
-        return this.expanded;
-    }
-    show(searchTxt) {
-        var _a;
-        if (!this.options.enabled) {
-            return;
-        }
-        this.expanded = true;
-        const dimension = this.dom.getBoundingClientRect();
-        const left = Math.round(dimension.left + window.pageXOffset);
-        const top = Math.round(dimension.top + window.pageYOffset);
-        this.dropdownArea = document.createElement("div");
-        this.dropdownArea.className = "sel-comp-dd " + ((_a = this.options.dropdownClass) !== null && _a !== void 0 ? _a : "");
-        this.dropdownArea.style.width = this.options.dropdownWidth || (Math.round(dimension.width) + "px");
-        this.dropdownArea.style.height = this.options.dropdownHeight;
-        this.dropdownArea.style.left = left + "px";
-        if (this.options.dropDirection === "up") {
-            this.dropdownArea.style.top = "calc(" + top + "px - " + this.options.dropdownHeight + ")";
-            this.dropdownArea.classList.add("sel-comp-dd-up");
-        }
-        else {
-            this.dropdownArea.style.top = Math.round(top + dimension.height) + "px";
-            this.dropdownArea.classList.add("sel-comp-dd-down");
-        }
-        this.options.onAppend(this.dropdownArea);
-        const ddDimension = this.dropdownArea.getBoundingClientRect();
-        if (this.options.dropDirection === "auto") {
-            // check if there is enought room for dropdown at bottom
-            if (ddDimension.bottom > window.innerHeight) {
-                // position "up"
-                this.dropdownArea.style.top = "calc(" + Math.round(top) + "px - " + this.options.dropdownHeight + ")";
-                this.dropdownArea.classList.add("sel-comp-dd-up");
-                this.dropdownArea.classList.remove("sel-comp-dd-down");
-            }
-        }
-        const ddAreaComp = new SelectDDAreaComponent(this.options, this, {
-            renderHeight: ddDimension.height - 2,
-            searchTxt
-        });
-        if (this.options.autoShrink) {
-            ddAreaComp.onRender.subscribe((data) => {
-                let ddHeight;
-                if (this.options.enableSearch) {
-                    ddHeight = Math.min((data.length * this.options.rowHeight + 4), ddDimension.height - 2) + "px + 1.8rem";
-                    this.dropdownArea.style.height = "calc(" + ddHeight + ")";
-                }
-                else {
-                    ddHeight = Math.min((data.length * this.options.rowHeight + 4), ddDimension.height - 2) + "px";
-                    this.dropdownArea.style.height = ddHeight;
-                }
-                if (this.dropdownArea.classList.contains("sel-comp-dd-up")) {
-                    this.dropdownArea.style.top = "calc(" + Math.round(top) + "px - (" + ddHeight + "))";
-                }
-            });
-        }
-        new JSLRender(this.dropdownArea, false).render(ddAreaComp);
-        requestAnimationFrame(() => {
-            const s = this.dropdownArea.querySelector(".sel-search input");
-            s.focus();
-            s.selectionStart = s.selectionEnd = s.value.length;
-        });
-    }
-    destroy() {
-        const x = document.querySelector(".sel-comp-dd");
-        if (x != null && x.parentElement != null) {
-            try {
-                x.parentElement.removeChild(x);
-            }
-            catch (ex) {
-                // under certain conditions the child may not be in the parentElements child collection anymore, although the child node still has that element as its parent (e.g. blur event handler) - weird JavaScript stuff eh
-            }
-        }
-        this.expanded = false;
-    }
-    close() {
-        var _a;
-        this.expanded = false;
-        this.focused = null;
-        this.doNotFocus = true;
-        try {
-            if (((_a = this.dropdownArea) === null || _a === void 0 ? void 0 : _a.parentElement) != null) {
-                this.dropdownArea.parentElement.removeChild(this.dropdownArea);
-            }
-            if (this.renderer != null) {
-                this.renderer.refresh();
-            }
-            this.dom.querySelector(".sel-expander").focus();
-        }
-        catch (e) {
-            // https://stackoverflow.com/questions/21926083/failed-to-execute-removechild-on-node
-        }
-    }
-    setFocus(item) {
-        this.focused = item;
-    }
-    getFocus() {
-        return this.focused;
-    }
-    getValue() {
-        if (this.selected == null) {
-            return null;
-        }
-        if (this.options.multiple) {
-            return this.selected.map((itm) => itm[this.options.keyColumn]);
-        }
-        else {
-            return this.selected[this.options.keyColumn];
-        }
-    }
-    setValue(value) {
-        var _a;
-        if (value != null) {
-            if (this.options.multiple) {
-                this.selected = this.options.data.filter((x) => value.indexOf(x[this.options.keyColumn]) >= 0);
-            }
-            else {
-                this.selected = this.options.data.filter((x) => x[this.options.keyColumn] === value)[0];
-            }
-        }
-        else {
-            this.selected = this.options.multiple ? [] : null;
-        }
-        if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
-            this.options.bindTo[this.options.property] = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
-        }
-        if (this.renderer != null) {
-            this.renderer.refresh();
-        }
-    }
-    getSelected() {
-        return this.selected;
-    }
-    setSelected(item) {
-        var _a;
-        if (this.options.multiple) {
-            if (item == null) {
-                this.selected = [];
-            }
-            else {
-                if (Array.isArray(item)) {
-                    this.selected = item;
-                }
-                else {
-                    this.selected.push(item);
-                }
-            }
-        }
-        else {
-            this.selected = item;
-        }
-        const value = this.getValue();
-        if (this.options.bindMode !== "fromModel" && this.options.bindTo != null && this.options.property != null) {
-            this.options.bindTo[this.options.property] =
-                ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
-        }
-        if (this.options.onChange != null) {
-            this.options.onChange.notify(value, this.selected);
-        }
-        this.renderer.refresh();
-    }
-    focus() {
-        var _a;
-        if (this.dom == null) {
-            requestAnimationFrame(() => {
-                var _a;
-                if (this.dom != null) {
-                    (_a = this.dom.querySelector(".sel-expander")) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            });
-        }
-        else {
-            (_a = this.dom.querySelector(".sel-expander")) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }
-    hasSelection() {
-        if (this.options.multiple) {
-            return this.selected.length > 0;
-        }
-        return this.selected != null;
-    }
-    renderSelection() {
-        let node;
-        if (this.hasSelection()) {
-            node = { tag: "div", attr: { class: "sel-dd-item" } };
-            const res = this.options.onRender({
-                isSelected: true,
-                isCurrent: true,
-                isFocused: false,
-                data: this.selected,
-                node
-            });
-            if (res != null) {
-                node.children = [res];
-            }
-        }
-        let clearbtn;
-        if (this.options.allowEmpty) {
-            clearbtn = {
-                tag: "button", content: "✗",
-                attr: {
-                    disabled: this.options.enabled ? undefined : "disabled",
-                    title: "clear", class: "clear-btn",
-                    mousedown: (e) => {
-                        if (!this.options.enabled) {
-                            return;
-                        }
-                        e.stopImmediatePropagation();
-                        this.setSelected(null);
-                    },
-                    click: (e) => {
-                        e.preventDefault();
-                        this.setSelected(null);
-                    }
-                }
-            };
-        }
-        return {
-            tag: "div", attr: { class: "sel-result" }, content: node != null ? undefined : this.options.placehoder,
-            children: node == null ? undefined : [node, clearbtn]
-        };
-    }
-}
-SelectComponent.ENTER_KEY = 13;
+import "./SelectStyle.scss";
+import { JSLRender } from "jsl-render";
+import { SelectDDAreaComponent } from "./SelectDDAreaComponent";
+import { EventHandler } from "../../interaction/eventhandler";
+export class SelectComponent {
+    constructor(o) {
+        var _a;
+        this.expanded = false;
+        this.doNotFocus = false;
+        const defaultOptions = {
+            data: undefined,
+            keyColumn: "value",
+            textColumn: "text",
+            dropdownHeight: "10rem",
+            dropDirection: "auto",
+            enableSearch: true,
+            enableAnimation: true,
+            enableKeyboard: true,
+            rowHeight: 28,
+            allowEmpty: true,
+            enabled: true,
+            openOnEnter: true,
+            focusFirstItem: true,
+            autoShrink: true,
+            bindMode: "toModel",
+            onAppend: (dom) => {
+                document.body.appendChild(dom);
+            },
+            onRenderGroup: (args) => {
+                args.node.content = args.groupValue;
+            },
+            onRender: o.multiple ? (args) => {
+                if (args.isCurrent) {
+                    args.node.content = args.data.map((d) => d[this.options.textColumn]).join(", ");
+                }
+                else {
+                    args.node.content = args.data[this.options.textColumn];
+                }
+            } : (args) => {
+                args.node.content = args.data[this.options.textColumn];
+            },
+            matchSearch: (data, term) => { var _a; return (((_a = data[this.options.textColumn]) !== null && _a !== void 0 ? _a : "").toString().toLowerCase().indexOf(term.toLowerCase()) >= 0); }
+        };
+        this.options = { ...defaultOptions, ...o };
+        this.options.onChange = EventHandler.Create(o.onChange);
+        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
+            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+        }
+        this.setValue(this.options.value);
+    }
+    render() {
+        var _a, _b;
+        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+            const value = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property];
+            if (value != null) {
+                if (this.options.multiple) {
+                    this.selected = this.options.data.filter((x) => value.indexOf(x[this.options.keyColumn]) >= 0);
+                }
+                else {
+                    this.selected = this.options.data.filter((x) => x[this.options.keyColumn] === value)[0];
+                }
+            }
+            else {
+                this.selected = this.options.multiple ? [] : null;
+            }
+        }
+        return {
+            tag: "div", attr: {
+                style: this.options.style,
+                class: "select-comp " + (this.expanded ? "expanded " : "") + (!this.options.enabled ? "disabled " : "") + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
+                mousedown: (e) => { if (this.expanded || e.which === 3) {
+                    return;
+                } {
+                    this.doNotFocus = true;
+                    this.show();
+                } }
+            },
+            children: [this.renderSelection(), {
+                    tag: "button", attr: {
+                        disabled: this.options.enabled ? undefined : "disabled",
+                        class: "sel-expander", keydown: (e) => {
+                            if (this.options.openOnEnter && this.options.enabled) {
+                                if (e.which === SelectComponent.ENTER_KEY) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    e.stopImmediatePropagation();
+                                    this.toggle();
+                                }
+                                else if (!this.expanded) {
+                                    if (e.key && e.key.length === 1) {
+                                        this.show(e.key);
+                                    }
+                                }
+                            }
+                        }, focus: (e) => {
+                            if (!this.doNotFocus && this.options.openOnFocus && this.options.enabled) {
+                                this.toggle();
+                            }
+                            if (this.doNotFocus) {
+                                this.doNotFocus = false;
+                            }
+                        }, click: (e) => {
+                            e.preventDefault();
+                        }
+                    }, content: this.expanded ? "▲" : "▼"
+                }]
+        };
+    }
+    onCreate(node) {
+        this.dom = node.dom;
+    }
+    onUpdate(node) {
+        this.dom = node.dom;
+    }
+    onInit(renderer) {
+        this.renderer = renderer;
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+        if (this.expanded) {
+            this.show();
+        }
+        else {
+            this.close();
+        }
+    }
+    isExpanded() {
+        return this.expanded;
+    }
+    show(searchTxt) {
+        var _a;
+        if (!this.options.enabled) {
+            return;
+        }
+        this.expanded = true;
+        const dimension = this.dom.getBoundingClientRect();
+        const left = Math.round(dimension.left + window.pageXOffset);
+        const top = Math.round(dimension.top + window.pageYOffset);
+        this.dropdownArea = document.createElement("div");
+        this.dropdownArea.className = "sel-comp-dd " + ((_a = this.options.dropdownClass) !== null && _a !== void 0 ? _a : "");
+        this.dropdownArea.style.width = this.options.dropdownWidth || (Math.round(dimension.width) + "px");
+        this.dropdownArea.style.height = this.options.dropdownHeight;
+        this.dropdownArea.style.left = left + "px";
+        if (this.options.dropDirection === "up") {
+            this.dropdownArea.style.top = "calc(" + top + "px - " + this.options.dropdownHeight + ")";
+            this.dropdownArea.classList.add("sel-comp-dd-up");
+        }
+        else {
+            this.dropdownArea.style.top = Math.round(top + dimension.height) + "px";
+            this.dropdownArea.classList.add("sel-comp-dd-down");
+        }
+        this.options.onAppend(this.dropdownArea);
+        const ddDimension = this.dropdownArea.getBoundingClientRect();
+        if (this.options.dropDirection === "auto") {
+            // check if there is enought room for dropdown at bottom
+            if (ddDimension.bottom > window.innerHeight) {
+                // position "up"
+                this.dropdownArea.style.top = "calc(" + Math.round(top) + "px - " + this.options.dropdownHeight + ")";
+                this.dropdownArea.classList.add("sel-comp-dd-up");
+                this.dropdownArea.classList.remove("sel-comp-dd-down");
+            }
+        }
+        const ddAreaComp = new SelectDDAreaComponent(this.options, this, {
+            renderHeight: ddDimension.height - 2,
+            searchTxt
+        });
+        if (this.options.autoShrink) {
+            ddAreaComp.onRender.subscribe((data) => {
+                let ddHeight;
+                if (this.options.enableSearch) {
+                    ddHeight = Math.min((data.length * this.options.rowHeight + 4), ddDimension.height - 2) + "px + 1.8rem";
+                    this.dropdownArea.style.height = "calc(" + ddHeight + ")";
+                }
+                else {
+                    ddHeight = Math.min((data.length * this.options.rowHeight + 4), ddDimension.height - 2) + "px";
+                    this.dropdownArea.style.height = ddHeight;
+                }
+                if (this.dropdownArea.classList.contains("sel-comp-dd-up")) {
+                    this.dropdownArea.style.top = "calc(" + Math.round(top) + "px - (" + ddHeight + "))";
+                }
+            });
+        }
+        new JSLRender(this.dropdownArea, false).render(ddAreaComp);
+        requestAnimationFrame(() => {
+            const s = this.dropdownArea.querySelector(".sel-search input");
+            s.focus();
+            s.selectionStart = s.selectionEnd = s.value.length;
+        });
+    }
+    destroy() {
+        const x = document.querySelector(".sel-comp-dd");
+        if (x != null && x.parentElement != null) {
+            try {
+                x.parentElement.removeChild(x);
+            }
+            catch (ex) {
+                // under certain conditions the child may not be in the parentElements child collection anymore, although the child node still has that element as its parent (e.g. blur event handler) - weird JavaScript stuff eh
+            }
+        }
+        this.expanded = false;
+    }
+    close() {
+        var _a;
+        this.expanded = false;
+        this.focused = null;
+        this.doNotFocus = true;
+        try {
+            if (((_a = this.dropdownArea) === null || _a === void 0 ? void 0 : _a.parentElement) != null) {
+                this.dropdownArea.parentElement.removeChild(this.dropdownArea);
+            }
+            if (this.renderer != null) {
+                this.renderer.refresh();
+            }
+            this.dom.querySelector(".sel-expander").focus();
+        }
+        catch (e) {
+            // https://stackoverflow.com/questions/21926083/failed-to-execute-removechild-on-node
+        }
+    }
+    setFocus(item) {
+        this.focused = item;
+    }
+    getFocus() {
+        return this.focused;
+    }
+    getValue() {
+        if (this.selected == null) {
+            return null;
+        }
+        if (this.options.multiple) {
+            return this.selected.map((itm) => itm[this.options.keyColumn]);
+        }
+        else {
+            return this.selected[this.options.keyColumn];
+        }
+    }
+    setValue(value) {
+        var _a;
+        if (value != null) {
+            if (this.options.multiple) {
+                this.selected = this.options.data.filter((x) => value.indexOf(x[this.options.keyColumn]) >= 0);
+            }
+            else {
+                this.selected = this.options.data.filter((x) => x[this.options.keyColumn] === value)[0];
+            }
+        }
+        else {
+            this.selected = this.options.multiple ? [] : null;
+        }
+        if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
+            this.options.bindTo[this.options.property] = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
+        }
+        if (this.renderer != null) {
+            this.renderer.refresh();
+        }
+    }
+    getSelected() {
+        return this.selected;
+    }
+    setSelected(item) {
+        var _a;
+        if (this.options.multiple) {
+            if (item == null) {
+                this.selected = [];
+            }
+            else {
+                if (Array.isArray(item)) {
+                    this.selected = item;
+                }
+                else {
+                    this.selected.push(item);
+                }
+            }
+        }
+        else {
+            this.selected = item;
+        }
+        const value = this.getValue();
+        if (this.options.bindMode !== "fromModel" && this.options.bindTo != null && this.options.property != null) {
+            this.options.bindTo[this.options.property] =
+                ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
+        }
+        if (this.options.onChange != null) {
+            this.options.onChange.notify(value, this.selected);
+        }
+        this.renderer.refresh();
+    }
+    focus() {
+        var _a;
+        if (this.dom == null) {
+            requestAnimationFrame(() => {
+                var _a;
+                if (this.dom != null) {
+                    (_a = this.dom.querySelector(".sel-expander")) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            });
+        }
+        else {
+            (_a = this.dom.querySelector(".sel-expander")) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    hasSelection() {
+        if (this.options.multiple) {
+            return this.selected.length > 0;
+        }
+        return this.selected != null;
+    }
+    renderSelection() {
+        let node;
+        if (this.hasSelection()) {
+            node = { tag: "div", attr: { class: "sel-dd-item" } };
+            const res = this.options.onRender({
+                isSelected: true,
+                isCurrent: true,
+                isFocused: false,
+                data: this.selected,
+                node
+            });
+            if (res != null) {
+                node.children = [res];
+            }
+        }
+        let clearbtn;
+        if (this.options.allowEmpty) {
+            clearbtn = {
+                tag: "button", content: "✗", attr: {
+                    disabled: this.options.enabled ? undefined : "disabled",
+                    title: "clear", class: "clear-btn", mousedown: (e) => {
+                        if (!this.options.enabled) {
+                            return;
+                        }
+                        e.stopImmediatePropagation();
+                        this.setSelected(null);
+                    },
+                    click: (e) => {
+                        e.preventDefault();
+                        this.setSelected(null);
+                    }
+                }
+            };
+        }
+        return {
+            tag: "div", attr: { class: "sel-result" }, content: node != null ? undefined : this.options.placehoder,
+            children: node == null ? undefined : [node, clearbtn]
+        };
+    }
+}
+SelectComponent.ENTER_KEY = 13;