jsl-ui 9.18.3 → 9.18.4

package/lib/ui/number.input.css

@@ -0,0 +1,3 @@
+.jsl-number {
+    text-align: right;
+}

package/lib/ui/number.input.d.ts

@@ -0,0 +1,12 @@
+import "./number.input.css";
+import { EventHandler } from "../interaction/eventhandler";
+export interface INumberInputOptions {
+    enabled?: boolean;
+    format?: string;
+    formatOnBlur?: boolean;
+    commitOnEnter?: boolean;
+    placeholder?: boolean | string;
+    value?: number;
+    onChange?: EventHandler<number> | ((value?: number) => void);
+}
+export declare function NumberInput(input: HTMLInputElement | string, options?: INumberInputOptions): HTMLInputElement;

package/lib/ui/number.input.js

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import "./number.input.css";
+import { numeric } from "../core/numeric";
+import { EventHandler } from "../interaction/eventhandler";
+var defaultOptions = { format: "0.###", formatOnBlur: true, commitOnEnter: true, placeholder: false, enabled: true };
+export function NumberInput(input, options) {
+    var el;
+    var o = __assign(__assign({}, defaultOptions), options);
+    o.onChange = EventHandler.Create(o.onChange);
+    if (typeof input === "string") {
+        el = document.querySelector(input);
+    }
+    else {
+        el = input;
+    }
+    if (o.value || o.value === 0) {
+        el.value = numeric.format(o.value, o.format);
+    }
+    if (o.placeholder !== false) {
+        if (o.placeholder === true) {
+            el.placeholder = numeric.format(0, o.format);
+        }
+        else {
+            el.placeholder = o.placeholder;
+        }
+    }
+    el.classList.add("jsl-number");
+    if (o.enabled === false) {
+        el.setAttribute("disabled", "disabled");
+    }
+    else {
+        if (o.formatOnBlur) {
+            el.addEventListener("blur", function (evt) {
+                var val = numeric.parse(el.value);
+                el.value = numeric.format(val, o.format);
+            });
+        }
+        if (o.onChange != null) {
+            el.addEventListener("change", function (evt) {
+                o.onChange.notify(numeric.parse(el.value));
+            });
+        }
+        el.addEventListener("keydown", function (evt) {
+            if (evt.which === 13) {
+                if (o.formatOnBlur) {
+                    var val = numeric.parse(el.value);
+                    el.value = numeric.format(val, o.format);
+                }
+                o.onChange.notify(numeric.parse(el.value));
+            }
+        });
+    }
+    return el;
+}

package/lib/ui/tabs.css

@@ -0,0 +1,53 @@
+/* .jsl-tabs {
+    margin: 2rem;
+  } */
+  .jsl-tabs > ul {
+    float: left;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    border-bottom: 1px solid #ddd;
+  }
+  .jsl-tabs > ul > li {
+    float: left;
+    margin-bottom: -1px;
+  }
+  .jsl-tabs > ul > li > a {
+    float: left;
+    margin-right: 0.2rem;
+    line-height: 1.42857143;
+    padding: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: 4px 4px 0 0;
+    text-decoration: none;
+  }
+  .jsl-tabs > ul > li > a:hover {
+    border-color: #eee #eee #ddd;
+  }
+  .jsl-tabs > ul > li.active > a,
+  .jsl-tabs > ul > li.active > a:hover,
+  .jsl-tabs > ul > li.active > a:focus {
+    color: #555;
+    cursor: default;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-bottom-color: transparent;
+  }
+  .jsl-tabs .tab-content {
+    float: left;
+    width: 100%;
+  }
+
+  .jsl-tabs .tab-content > div {
+    display: none;
+  }
+  .jsl-tabs .tab-content > div.active {
+    display: block;
+    padding: 0.5rem;
+    box-sizing: border-box;
+    /* background-color: #efefef; */
+  }
+  .jsl-tabs .tab-content {
+    border-bottom: solid 1px #ddd;
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsl-ui",
-  "version": "9.18.3",
+  "version": "9.18.4",
   "description": "javascript UI library",
   "main": "lib/index.js",
   "files": [