smoothly 1.0.0-alpha.99 → 1.0.0

package/dist/collection/components/input/index.js

@@ -1,54 +1,56 @@
 import { h, Host } from "@stencil/core";
-import { Language, Locale } from "isoly";
-import { Action, get, StateEditor } from "tidily";
+import { isoly } from "isoly";
+import { tidily } from "tidily";
 export class SmoothlyInput {
   constructor() {
     this.keepFocusOnReRender = false;
+    this.uneditable = this.readonly;
     this.listener = {};
     this.color = undefined;
+    this.delay = 0;
     this.looks = "plain";
     this.name = undefined;
     this.value = undefined;
     this.type = "text";
     this.required = false;
-    this.minLength = 0;
     this.showLabel = true;
-    this.maxLength = Number.POSITIVE_INFINITY;
     this.autocomplete = true;
-    this.pattern = undefined;
     this.placeholder = undefined;
     this.disabled = false;
     this.readonly = false;
     this.currency = undefined;
-    this.initialValue = undefined;
     this.changed = false;
+    this.formatter = undefined;
+    this.initialValue = undefined;
   }
-  listen(property, listener) {
+  async listen(property, listener) {
     this.listener[property] = listener;
     listener(this);
   }
   async SmoothlyInputLoadHandler(event) {
-    event.stopPropagation();
-    event.detail(this);
+    if (!(event.target && "name" in event.target && event.target.name == this.name)) {
+      event.stopPropagation();
+      event.detail(this);
+    }
   }
-  get formatter() {
+  typeChange() {
     let result;
     switch (this.type) {
       case "price":
-        result = get("price", this.currency);
+        result = tidily.get("price", this.currency);
         break;
       default:
-        result = get(this.type, getLocale());
+        result = tidily.get(this.type, getLocale());
         break;
     }
-    return result || get("text");
+    this.formatter = result || tidily.get("text");
   }
   newState(state) {
-    const formatter = this.formatter;
-    return formatter.format(StateEditor.copy(formatter.unformat(StateEditor.copy(state))));
+    return this.formatter.format(tidily.StateEditor.copy(this.formatter.unformat(tidily.StateEditor.copy(state))));
   }
   valueWatcher(value, before) {
     var _a, _b;
+    this.changed = this.initialValue !== this.value;
     if (this.lastValue != value) {
       this.lastValue = value;
       this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(value), selection: this.state.selection }).value });
@@ -56,22 +58,45 @@ export class SmoothlyInput {
     if (value != before) {
       if (typeof value == "string")
         value = value.trim();
-      this.smoothlyInput.emit({ [this.name]: value });
+      this.smoothlyInputEmit(value);
     }
-    this.changed = Boolean(this.value);
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
+  async smoothlyInputEmit(value) {
+    var _a;
+    (_a = this.abortInputEvent) === null || _a === void 0 ? void 0 : _a.call(this);
+    const timeout = window.setTimeout(() => {
+      this.abortInputEvent = undefined;
+      this.smoothlyInput.emit({ [this.name]: value });
+    }, this.delay * 1000);
+    this.abortInputEvent = () => {
+      this.abortInputEvent = undefined;
+      window.clearTimeout(timeout);
+    };
+  }
+  watchingReadonly() {
+    var _a, _b;
     (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
   onCurrency() {
     this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).value, pattern: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).pattern });
   }
   componentWillLoad() {
+    var _a, _b;
+    this.typeChange();
     const value = this.formatter.toString(this.value) || "";
+    this.lastValue = this.initialValue = this.value;
     const start = value.length;
     this.state = this.newState({
       value,
       selection: { start, end: start, direction: "none" },
     });
     this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+    this.smoothlyInputLoad.emit(() => {
+      return;
+    });
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
   componentDidRender() {
     if (this.keepFocusOnReRender) {
@@ -80,7 +105,18 @@ export class SmoothlyInput {
     }
   }
   async clear() {
-    this.value = undefined;
+    !this.uneditable && (this.value = undefined);
+  }
+  async edit(editable) {
+    !this.uneditable && (this.readonly = !editable);
+  }
+  async reset() {
+    !this.uneditable && (this.value = this.initialValue);
+  }
+  async setInitialValue() {
+    this.changed = false;
+    this.initialValue = this.value;
+    this.smoothlyInput.emit({ [this.name]: this.value });
   }
   async getFormData(name) {
     const result = {};
@@ -108,39 +144,44 @@ export class SmoothlyInput {
     this.keepFocusOnReRender = keepFocus;
   }
   async setSelectionRange(start, end, direction) {
-    this.state = this.newState(Object.assign(Object.assign({}, this.state), { selection: { start, end, direction: direction != undefined ? direction : this.state.selection.direction } }));
-    const after = this.formatter.format(StateEditor.copy(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state)))));
+    this.state = this.newState(Object.assign(Object.assign({}, this.state), { selection: { start, end, direction: direction !== null && direction !== void 0 ? direction : this.state.selection.direction } }));
+    const after = this.formatter.format(tidily.StateEditor.copy(this.formatter.unformat(tidily.StateEditor.copy(Object.assign({}, this.state)))));
     this.updateBackend(after, this.inputElement);
   }
   onBlur(event) {
     this.smoothlyBlur.emit();
+    if (this.abortInputEvent) {
+      this.abortInputEvent();
+      const value = typeof this.value == "string" ? this.value.trim() : this.value;
+      this.smoothlyInput.emit({ [this.name]: value });
+    }
     if (this.initialValue != this.value)
       this.smoothlyChange.emit({ [this.name]: this.value });
-    this.initialValue = undefined;
   }
   onFocus(event) {
-    this.initialValue = this.value;
-    const after = this.formatter.format(StateEditor.copy(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state)))));
+    const after = this.formatter.format(tidily.StateEditor.copy(this.formatter.unformat(tidily.StateEditor.copy(Object.assign({}, this.state)))));
     if (event.target)
-      this.updateBackend(after, event.target);
+      this.updateBackend(after, event.target, false);
   }
   onClick(event) {
+    var _a, _b, _c;
     const backend = event.target;
     this.state = Object.assign(Object.assign({}, this.state), { value: backend.value, selection: {
-        start: backend.selectionStart != undefined ? backend.selectionStart : backend.value.length,
-        end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
-        direction: backend.selectionDirection ? backend.selectionDirection : "none",
+        start: (_a = backend.selectionStart) !== null && _a !== void 0 ? _a : backend.value.length,
+        end: (_b = backend.selectionEnd) !== null && _b !== void 0 ? _b : backend.value.length,
+        direction: (_c = backend.selectionDirection) !== null && _c !== void 0 ? _c : "none",
       } });
     const after = this.newState(Object.assign({}, this.state));
     this.updateBackend(after, backend);
   }
   onKeyDown(event) {
+    var _a, _b, _c;
     if (event.key && !(event.key == "Unidentified")) {
       const backend = event.target;
       this.state = Object.assign(Object.assign({}, this.state), { value: backend.value, selection: {
-          start: backend.selectionStart != undefined ? backend.selectionStart : backend.value.length,
-          end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
-          direction: backend.selectionDirection ? backend.selectionDirection : "none",
+          start: (_a = backend.selectionStart) !== null && _a !== void 0 ? _a : backend.value.length,
+          end: (_b = backend.selectionEnd) !== null && _b !== void 0 ? _b : backend.value.length,
+          direction: (_c = backend.selectionDirection) !== null && _c !== void 0 ? _c : "none",
         } });
       if ((!((event.ctrlKey || event.metaKey) && (event.key == "v" || event.key == "x" || event.key == "c")) &&
         event.key.length == 1) ||
@@ -162,8 +203,7 @@ export class SmoothlyInput {
     let pasted = event.clipboardData ? event.clipboardData.getData("text") : "";
     const backend = event.target;
     pasted = this.expiresAutocompleteFix(backend, pasted);
-    for (const letter of pasted)
-      this.processKey({ key: letter }, backend);
+    this.processPaste(pasted, backend);
   }
   onInput(event) {
     var _a;
@@ -195,22 +235,31 @@ export class SmoothlyInput {
             : value;
     return value;
   }
+  processPaste(pasted, backend) {
+    if (!this.readonly) {
+      const after = tidily.Action.paste(this.formatter, this.state, pasted);
+      this.updateBackend(after, backend);
+    }
+  }
   processKey(event, backend) {
     if (!this.readonly) {
-      const after = Action.apply(this.formatter, this.state, event);
+      const after = tidily.Action.apply(this.formatter, this.state, event);
       this.updateBackend(after, backend);
     }
   }
-  updateBackend(after, backend) {
+  updateBackend(after, backend, setSelection = true) {
+    var _a;
     if (after.value != backend.value)
       backend.value = after.value;
-    if (backend.selectionStart != undefined && after.selection.start != backend.selectionStart)
-      backend.selectionStart = after.selection.start;
-    if (backend.selectionEnd != undefined && after.selection.end != backend.selectionEnd)
-      backend.selectionEnd = after.selection.end;
-    backend.selectionDirection = after.selection.direction ? after.selection.direction : backend.selectionDirection;
+    if (setSelection) {
+      if (backend.selectionStart != undefined && after.selection.start != backend.selectionStart)
+        backend.selectionStart = after.selection.start;
+      if (backend.selectionEnd != undefined && after.selection.end != backend.selectionEnd)
+        backend.selectionEnd = after.selection.end;
+      backend.selectionDirection = (_a = after.selection.direction) !== null && _a !== void 0 ? _a : backend.selectionDirection;
+    }
     this.state = after;
-    this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state))).value);
+    this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(tidily.StateEditor.copy(Object.assign({}, this.state))).value);
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -252,12 +301,30 @@ export class SmoothlyInput {
         "attribute": "color",
         "reflect": true
       },
+      "delay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
       "looks": {
         "type": "string",
         "mutable": true,
         "complexType": {
           "original": "Looks",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
           "references": {
             "Looks": {
               "location": "import",
@@ -313,9 +380,14 @@ export class SmoothlyInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "tidily.Type",
+          "resolved": "\"text\" | \"divisor\" | \"card-csc\" | \"card-expires\" | \"card-number\" | \"date\" | \"date-time\" | \"duration\" | \"email\" | \"identifier-code\" | \"identifier-pascal\" | \"identifier-snake\" | \"identifier-camel\" | \"identifier-attribute\" | \"identity-number\" | \"integer\" | \"password\" | \"percent\" | \"phone\" | \"postal-code\" | \"price\"",
+          "references": {
+            "tidily": {
+              "location": "import",
+              "path": "tidily"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -329,7 +401,7 @@ export class SmoothlyInput {
       },
       "required": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -345,24 +417,6 @@ export class SmoothlyInput {
         "reflect": true,
         "defaultValue": "false"
       },
-      "minLength": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "min-length",
-        "reflect": false,
-        "defaultValue": "0"
-      },
       "showLabel": {
         "type": "boolean",
         "mutable": false,
@@ -381,27 +435,9 @@ export class SmoothlyInput {
         "reflect": true,
         "defaultValue": "true"
       },
-      "maxLength": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "max-length",
-        "reflect": false,
-        "defaultValue": "Number.POSITIVE_INFINITY"
-      },
       "autocomplete": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -417,28 +453,9 @@ export class SmoothlyInput {
         "reflect": false,
         "defaultValue": "true"
       },
-      "pattern": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "RegExp | undefined",
-          "resolved": "RegExp | undefined",
-          "references": {
-            "RegExp": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
       "placeholder": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string | undefined",
           "resolved": "string | undefined",
@@ -455,7 +472,7 @@ export class SmoothlyInput {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -493,10 +510,10 @@ export class SmoothlyInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Currency",
+          "original": "isoly.Currency",
           "resolved": "\"BTN\" | \"CHE\" | \"MKD\" | \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\" | undefined",
           "references": {
-            "Currency": {
+            "isoly": {
               "location": "import",
               "path": "isoly"
             }
@@ -526,13 +543,14 @@ export class SmoothlyInput {
           "text": ""
         },
         "attribute": "changed",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
+      "formatter": {},
       "initialValue": {}
     };
   }
@@ -549,7 +567,7 @@ export class SmoothlyInput {
         },
         "complexType": {
           "original": "(looks: Looks, color: Color) => void",
-          "resolved": "(looks: Looks, color: Color) => void",
+          "resolved": "(looks: \"line\" | \"grid\" | \"plain\" | \"border\" | \"transparent\", color: \"success\" | \"default\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | \"danger\" | \"light\" | \"medium\" | \"dark\") => void",
           "references": {
             "Looks": {
               "location": "import",
@@ -561,6 +579,40 @@ export class SmoothlyInput {
             }
           }
         }
+      }, {
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyFormDisable",
+        "name": "smoothlyFormDisable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(disabled: boolean) => void",
+          "resolved": "(disabled: boolean) => void",
+          "references": {}
+        }
       }, {
         "method": "smoothlyBlur",
         "name": "smoothlyBlur",
@@ -618,6 +670,32 @@ export class SmoothlyInput {
   }
   static get methods() {
     return {
+      "listen": {
+        "complexType": {
+          "signature": "(property: \"changed\", listener: (parent: Editable) => Promise<void>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Editable": {
+              "location": "import",
+              "path": "./Editable"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "clear": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -634,6 +712,57 @@ export class SmoothlyInput {
           "tags": []
         }
       },
+      "edit": {
+        "complexType": {
+          "signature": "(editable: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setInitialValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "getFormData": {
         "complexType": {
           "signature": "(name: string) => Promise<Record<string, any>>",
@@ -677,7 +806,7 @@ export class SmoothlyInput {
       },
       "setSelectionRange": {
         "complexType": {
-          "signature": "(start: number, end: number, direction?: Direction) => Promise<void>",
+          "signature": "(start: number, end: number, direction?: tidily.Direction) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -692,7 +821,7 @@ export class SmoothlyInput {
             "Promise": {
               "location": "global"
             },
-            "Direction": {
+            "tidily": {
               "location": "import",
               "path": "tidily"
             }
@@ -708,8 +837,14 @@ export class SmoothlyInput {
   }
   static get watchers() {
     return [{
+        "propName": "type",
+        "methodName": "typeChange"
+      }, {
         "propName": "value",
         "methodName": "valueWatcher"
+      }, {
+        "propName": "readonly",
+        "methodName": "watchingReadonly"
       }, {
         "propName": "currency",
         "methodName": "onCurrency"
@@ -727,6 +862,6 @@ export class SmoothlyInput {
 }
 function getLocale() {
   const result = navigator.language;
-  return Locale.is(result) ? result : Language.is(result) ? Locale.toLocale(result) : undefined;
+  return isoly.Locale.is(result) ? result : isoly.Language.is(result) ? isoly.Locale.toLocale(result) : undefined;
 }
 //# sourceMappingURL=index.js.map