smoothly 0.1.86 → 0.1.90

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

@@ -1,4 +1,5 @@
 import { Component, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { Language, Locale } from "isoly";
 import { Action, get, StateEditor } from "tidily";
 export class SmoothlyInput {
   constructor() {
@@ -17,27 +18,30 @@ export class SmoothlyInput {
         result = get("price", this.currency);
         break;
       default:
-        result = get(this.type);
+        result = get(this.type, getLocale());
         break;
     }
     return result || get("text");
   }
+  newState(state) {
+    const formatter = this.formatter;
+    return formatter.format(StateEditor.copy(formatter.unformat(StateEditor.copy(state))));
+  }
   valueWatcher(value, before) {
     if (this.lastValue != value) {
       this.lastValue = value;
-      this.state = Object.assign(Object.assign({}, this.state), { value: this.formatter.format(StateEditor.copy(this.formatter.unformat(StateEditor.copy({ value, selection: this.state.selection })))).value });
+      this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(value), selection: this.state.selection }).value });
     }
     if (value != before)
       this.smoothlyChanged.emit({ name: this.name, value });
   }
   componentWillLoad() {
-    const formatter = this.formatter;
-    const value = formatter.toString(this.value) || "";
+    const value = this.formatter.toString(this.value) || "";
     const start = value.length;
-    this.state = formatter.format(StateEditor.copy(formatter.unformat(StateEditor.copy({
+    this.state = this.newState({
       value,
       selection: { start, end: start, direction: "none" },
-    }))));
+    });
   }
   componentDidRender() {
     if (this.keepFocusOnReRender) {
@@ -49,8 +53,7 @@ export class SmoothlyInput {
     this.keepFocusOnReRender = keepFocus;
   }
   async setSelectionRange(start, end, direction) {
-    const formatter = this.formatter;
-    this.state = formatter.format(StateEditor.copy(formatter.unformat(StateEditor.copy(Object.assign(Object.assign({}, this.state), { selection: { start, end, direction: direction != undefined ? direction : this.state.selection.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.updateBackend(after, this.inputElement);
   }
@@ -67,7 +70,7 @@ export class SmoothlyInput {
         end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
         direction: backend.selectionDirection ? backend.selectionDirection : "none",
       } });
-    const after = this.formatter.format(StateEditor.copy(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state)))));
+    const after = this.newState(Object.assign({}, this.state));
     this.updateBackend(after, backend);
   }
   onKeyDown(event) {
@@ -146,9 +149,9 @@ export class SmoothlyInput {
     this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state))).value);
   }
   render() {
-    var _a;
-    return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } },
-      h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? this.state.autocomplete : "off", disabled: this.disabled, pattern: this.state.pattern && this.state.pattern.source, value: this.state.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }),
+    var _a, _b, _c, _d, _e, _f, _g;
+    return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } },
+      h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }),
       h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }),
       h("label", { htmlFor: this.name },
         h("slot", null))));
@@ -345,7 +348,7 @@ export class SmoothlyInput {
       "mutable": false,
       "complexType": {
         "original": "Currency",
-        "resolved": "Currency | undefined",
+        "resolved": "\"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BTN\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHE\" | \"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\" | \"MKD\" | \"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": {
             "location": "import",
@@ -434,3 +437,7 @@ export class SmoothlyInput {
       "methodName": "valueWatcher"
     }]; }
 }
+function getLocale() {
+  const result = navigator.language;
+  return Locale.is(result) ? result : Language.is(result) ? Locale.toLocale(result) : undefined;
+}

package/dist/collection/components/input/style.css

@@ -1,6 +1,7 @@
 :host {
 	display: block;
 	position: relative;
+	font-weight: var(--smoothly-font-weight);
 }
 :host[hidden] {
 	display: none;

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

@@ -1,9 +1,13 @@
-import { Component, Event, h, Prop, Watch } from "@stencil/core";
+import { Component, Event, h, Listen, Prop, Watch } from "@stencil/core";
 import { Date } from "isoly";
 export class InputDate {
   onStart(next) {
     this.valueChanged.emit(next);
   }
+  dateSetHandler(e) {
+    this.open = false;
+    e.stopPropagation();
+  }
   render() {
     var _a;
     return [
@@ -136,4 +140,11 @@ export class InputDate {
       "propName": "value",
       "methodName": "onStart"
     }]; }
+  static get listeners() { return [{
+      "name": "dateSet",
+      "method": "dateSetHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/input-date-range/index.js

@@ -1,19 +1,21 @@
 import { Component, Event, h, Listen, Prop, Watch } from "@stencil/core";
-import { Date } from "isoly";
+import { Date, DateRange } from "isoly";
 export class InputDateRange {
   onValue(next) {
     this.valueChanged.emit(next);
   }
-  onClose(open) {
-    if (open == false && Date.is(this.start) && Date.is(this.end))
-      this.dateRangeSelected.emit({ start: this.start, end: this.end });
-  }
   onStartChanged(event) {
     this.start = event.detail;
   }
   onEndChanged(event) {
     this.end = event.detail;
   }
+  onDateRangeSet(event) {
+    console.log("dateRangeSet", event.detail);
+    this.open = false;
+    event.stopPropagation();
+    DateRange.is(event.detail) && this.dateRangeSelected.emit(event.detail);
+  }
   render() {
     var _a;
     return [
@@ -26,7 +28,7 @@ export class InputDateRange {
         h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : Date.now(), onValueChanged: event => {
             this.value = event.detail;
             event.stopPropagation();
-          }, max: this.max, min: this.min }))) : ([]),
+          }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([]),
     ];
   }
   static get is() { return "smoothly-input-date-range"; }
@@ -210,15 +212,6 @@ export class InputDateRange {
   static get watchers() { return [{
       "propName": "value",
       "methodName": "onValue"
-    }, {
-      "propName": "open",
-      "methodName": "onClose"
-    }, {
-      "propName": "start",
-      "methodName": "onClose"
-    }, {
-      "propName": "end",
-      "methodName": "onClose"
     }]; }
   static get listeners() { return [{
       "name": "startChanged",
@@ -232,5 +225,11 @@ export class InputDateRange {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "dateRangeSet",
+      "method": "onDateRangeSet",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/select-demo/index.js

@@ -26,8 +26,9 @@ export class SmoothlySelectDemo {
         h("option", { value: "1" }, "1"),
         h("option", { value: "2" }, "2"),
         h("option", { value: "3" }, "3")),
-      h("smoothly-input-date", { max: "2021-12-30", min: "2021-10-10" }, "Date"),
-      h("smoothly-input-date-range", { max: "2021-12-30", min: "2021-10-10" }),
+      h("smoothly-input-date", null, "Date"),
+      h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
+      h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
       h("smoothly-selector", null,
         h("smoothly-item", { value: "1" }, "January"),
         h("smoothly-item", { value: "2" }, "February"),

package/dist/collection/index.js

@@ -1,3 +1,3 @@
 export { App } from "./components/App";
-export { ClientIdentifier, Message, Notice, Trigger } from "./model";
+export { ClientIdentifier, GoogleFont, Message, Notice, Trigger, } from "./model";
 export { Cosmetic } from "./utilities";

package/dist/collection/model/GoogleFont.js

@@ -0,0 +1,19 @@
+export var GoogleFont;
+(function (GoogleFont) {
+  function is(value) {
+    return (typeof value == "string" &&
+      !/[</>"'`]/g.test(value) &&
+      /^([a-zA-ZäöüåßÄÖÜÅ+ ])+(:(ital(,)?)?((wght@(([01],\d{3})(;[01],\d{3})+|((\d{3})(;\d{3})+))))?)?$/g.test(value));
+  }
+  GoogleFont.is = is;
+  function getFont(value) {
+    return is(value) ? value.split(":")[0].replace(/\+/g, " ") : undefined;
+  }
+  GoogleFont.getFont = getFont;
+  function styleImportString(value) {
+    return is(value)
+      ? `@import url('https://fonts.googleapis.com/css2?family=${value.replace(/ /g, "+")}&display=swap`
+      : undefined;
+  }
+  GoogleFont.styleImportString = styleImportString;
+})(GoogleFont || (GoogleFont = {}));

package/dist/collection/model/index.js

@@ -1,4 +1,5 @@
 export { ClientIdentifier } from "./ClientIdentifier";
+export { GoogleFont } from "./GoogleFont";
 export { Message } from "./Message";
 export { Notice } from "./Notice";
 export { Trigger } from "./Trigger";

package/dist/custom-elements/index.d.ts

@@ -80,6 +80,12 @@ export const SmoothlyFrame: {
   new (): SmoothlyFrame;
 };
 
+interface SmoothlyGoogleFont extends Components.SmoothlyGoogleFont, HTMLElement {}
+export const SmoothlyGoogleFont: {
+  prototype: SmoothlyGoogleFont;
+  new (): SmoothlyGoogleFont;
+};
+
 interface SmoothlyIcon extends Components.SmoothlyIcon, HTMLElement {}
 export const SmoothlyIcon: {
   prototype: SmoothlyIcon;