smoothly 0.1.84 → 0.1.88

package/dist/smoothly/smoothly-calendar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, j as getElement } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
-import { w as weekdays, m as month } from './generate-776b3b0f.js';
+import { d as dist } from './index-a5a08f46.js';
+import { w as weekdays, m as month } from './generate-50b98474.js';
 import './_commonjsHelpers-8fe71198.js';
 
 const styleCss = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade));cursor:pointer;user-select:none}td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-danger-tint))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-danger-tint), var(--other-month-opacity))}td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.disable.sc-smoothly-calendar{cursor:not-allowed;background-color:rgb(var(--smoothly-default-tint), 0.5);color:rgb(var(--smoothly-default-contrast), 0.5)}";
@@ -11,6 +11,8 @@ let Calendar = class {
     this.valueChanged = createEvent(this, "valueChanged", 7);
     this.startChanged = createEvent(this, "startChanged", 7);
     this.endChanged = createEvent(this, "endChanged", 7);
+    this.dateSet = createEvent(this, "dateSet", 7);
+    this.dateRangeSet = createEvent(this, "dateRangeSet", 7);
     this.value = dist.Date.now();
     this.clickCounter = 0;
   }
@@ -23,13 +25,33 @@ let Calendar = class {
   onClick(date) {
     this.valueChanged.emit((this.value = date));
     this.clickCounter += 1;
-    if (this.clickCounter % 2 == 1)
-      this.start = this.end = date;
-    else {
-      if (this.start && date > this.start)
-        this.end = date;
-      else
+    if (this.doubleInput) {
+      if (this.clickCounter % 2 == 1)
+        this.start = this.end = this.frozenDate = date;
+      else {
+        if (this.start && date > this.start)
+          this.end = date;
+        else
+          this.start = date;
+      }
+    }
+    !this.doubleInput && this.dateSet.emit(this.value);
+    this.doubleInput &&
+      this.clickCounter % 2 == 0 &&
+      this.start &&
+      this.end &&
+      this.dateRangeSet.emit({ start: this.start, end: this.end });
+  }
+  onHover(date) {
+    if (this.doubleInput && this.clickCounter % 2 == 1) {
+      if (date < this.frozenDate) {
         this.start = date;
+        this.end = this.frozenDate;
+      }
+      else {
+        this.start = this.frozenDate;
+        this.end = date;
+      }
     }
   }
   render() {
@@ -41,11 +63,17 @@ let Calendar = class {
         } }),
       h("table", null, h("thead", null, h("tr", null, weekdays().map(day => (h("th", null, day))))), month((_b = this.month) !== null && _b !== void 0 ? _b : this.value).map(week => (h("tr", null, week.map(date => {
         var _a, _b, _c;
-        return (h("td", { tabindex: 1, onClick: (this.min || this.max) && (date < this.min || date > this.max) ? undefined : () => this.onClick(date), class: (date == this.value ? ["selected"] : [])
+        return (h("td", { tabindex: 1, onMouseOver: () => {
+            !this.doubleInput && (this.min || this.max) && (date < this.min || date > this.max)
+              ? undefined
+              : this.onHover(date);
+          }, onClick: (this.min || this.max) && (date < this.min || date > this.max) ? undefined : () => this.onClick(date), class: (date == this.value ? ["selected"] : [])
             .concat(...(date == dist.Date.now() ? ["today"] : []), dist.Date.firstOfMonth((_a = this.month) !== null && _a !== void 0 ? _a : this.value) == dist.Date.firstOfMonth(date) ? ["currentMonth"] : [], this.doubleInput
-            ? date >= ((_b = this.start) !== null && _b !== void 0 ? _b : "") && date <= ((_c = this.end) !== null && _c !== void 0 ? _c : "")
-              ? ["dateRange"]
-              : []
+            ? this.start == date || this.end == date
+              ? ["selected"]
+              : date >= ((_b = this.start) !== null && _b !== void 0 ? _b : "") && date <= ((_c = this.end) !== null && _c !== void 0 ? _c : "")
+                ? ["dateRange"]
+                : []
             : "")
             .concat(...(this.min || this.max ? (date < this.min || date > this.max ? ["disable"] : []) : ""))
             .join(" ") }, date.substring(8, 10)));

package/dist/smoothly/smoothly-display-amount.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
+import { d as dist } from './index-a5a08f46.js';
 import './_commonjsHelpers-8fe71198.js';
 
 const styleCss = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";

package/dist/smoothly/smoothly-display.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h } from './index-02a70ac1.js';
-import { d as dist } from './index-36a04e8c.js';
+import { d as dist } from './index-37a67c97.js';
 import './_commonjsHelpers-8fe71198.js';
+import './index-a5a08f46.js';
 
 const styleCss = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
 

package/dist/smoothly/smoothly-input-date-range.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
+import { d as dist } from './index-a5a08f46.js';
 import './_commonjsHelpers-8fe71198.js';
 
-const styleCss = ".sc-smoothly-input-date-range-h{position:relative;display:block}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-range-h>smoothly-input.sc-smoothly-input-date-range{padding:0}";
+const styleCss = ".sc-smoothly-input-date-range-h{position:relative;display:block}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-range-h>smoothly-input.sc-smoothly-input-date-range{padding:0}";
 
 let InputDateRange = class {
   constructor(hostRef) {
@@ -13,16 +13,18 @@ let InputDateRange = class {
   onValue(next) {
     this.valueChanged.emit(next);
   }
-  onClose(open) {
-    if (open == false && dist.Date.is(this.start) && dist.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();
+    dist.DateRange.is(event.detail) && this.dateRangeSelected.emit(event.detail);
+  }
   render() {
     var _a;
     return [
@@ -31,14 +33,11 @@ let InputDateRange = class {
       this.open ? (h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : dist.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 watchers() { return {
-    "value": ["onValue"],
-    "open": ["onClose"],
-    "start": ["onClose"],
-    "end": ["onClose"]
+    "value": ["onValue"]
   }; }
 };
 InputDateRange.style = styleCss;

package/dist/smoothly/smoothly-input-date.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
+import { d as dist } from './index-a5a08f46.js';
 import './_commonjsHelpers-8fe71198.js';
 
-const styleCss = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
+const styleCss = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
 
 let InputDate = class {
   constructor(hostRef) {
@@ -12,6 +12,10 @@ let InputDate = class {
   onStart(next) {
     this.valueChanged.emit(next);
   }
+  dateSetHandler(e) {
+    this.open = false;
+    e.stopPropagation();
+  }
   render() {
     var _a;
     return [

package/dist/smoothly/smoothly-input-month.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
-import { y as years, a as months } from './generate-776b3b0f.js';
+import { d as dist } from './index-a5a08f46.js';
+import { y as years, a as months } from './generate-50b98474.js';
 import './_commonjsHelpers-8fe71198.js';
 
 const styleCss = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";

package/dist/smoothly/smoothly-input.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, i as createEvent, h, k as Host } from './index-02a70ac1.js';
-import { d as dist } from './index-36a04e8c.js';
+import { d as dist$1 } from './index-a5a08f46.js';
+import { d as dist } from './index-37a67c97.js';
 import './_commonjsHelpers-8fe71198.js';
 
 const styleCss = ".sc-smoothly-input-h{display:block;position:relative}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-text-tint));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;width:calc(100% - 0.4em);background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+smoothly-icon.sc-smoothly-input{display:block}.has-value.sc-smoothly-input-h>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}.sc-smoothly-input-h:focus-within>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 30px unset inset !important;-webkit-box-shadow:0 0 0 30px unset inset !important}input.sc-smoothly-input:-webkit-autofill{-webkit-text-fill-color:unset !important}input.sc-smoothly-input:-internal-autofill-previewed,input.sc-smoothly-input:-internal-autofill-selected,textarea.sc-smoothly-input:-internal-autofill-previewed,textarea.sc-smoothly-input:-internal-autofill-selected,select.sc-smoothly-input:-internal-autofill-previewed,select.sc-smoothly-input:-internal-autofill-selected{background-color:none !important;background-image:none !important;color:unset !important}";
@@ -23,27 +24,30 @@ let SmoothlyInput = class {
         result = dist.get("price", this.currency);
         break;
       default:
-        result = dist.get(this.type);
+        result = dist.get(this.type, getLocale());
         break;
     }
     return result || dist.get("text");
   }
+  newState(state) {
+    const formatter = this.formatter;
+    return formatter.format(dist.StateEditor.copy(formatter.unformat(dist.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(dist.StateEditor.copy(this.formatter.unformat(dist.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(dist.StateEditor.copy(formatter.unformat(dist.StateEditor.copy({
+    this.state = this.newState({
       value,
       selection: { start, end: start, direction: "none" },
-    }))));
+    });
   }
   componentDidRender() {
     if (this.keepFocusOnReRender) {
@@ -55,8 +59,7 @@ let SmoothlyInput = class {
     this.keepFocusOnReRender = keepFocus;
   }
   async setSelectionRange(start, end, direction) {
-    const formatter = this.formatter;
-    this.state = formatter.format(dist.StateEditor.copy(formatter.unformat(dist.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(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
     this.updateBackend(after, this.inputElement);
   }
@@ -73,7 +76,7 @@ let SmoothlyInput = class {
         end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
         direction: backend.selectionDirection ? backend.selectionDirection : "none",
       } });
-    const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
+    const after = this.newState(Object.assign({}, this.state));
     this.updateBackend(after, backend);
   }
   onKeyDown(event) {
@@ -159,6 +162,10 @@ let SmoothlyInput = class {
     "value": ["valueWatcher"]
   }; }
 };
+function getLocale() {
+  const result = navigator.language;
+  return dist$1.Locale.is(result) ? result : dist$1.Language.is(result) ? dist$1.Locale.toLocale(result) : undefined;
+}
 SmoothlyInput.style = styleCss;
 
 export { SmoothlyInput as smoothly_input };

package/dist/smoothly/smoothly-select-demo.entry.js

@@ -21,8 +21,8 @@ let SmoothlySelectDemo = class {
       h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
       h("smoothly-select", { identifier: "language" }, h("optgroup", { label: "Nordic" }, h("option", { value: "sv" }, "Swedish"), h("option", { value: "da", selected: true }, "Danish"), h("option", { value: "no" }, "Norwegian")), h("optgroup", { label: "Other" }, h("option", { value: "en" }, "English"))),
       h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, 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", { 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"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
       h("button", { onClick: () => this.alertf() }, "press here"),
       h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [

package/dist/smoothly/smoothly.esm.js

@@ -121,5 +121,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["smoothly-app-demo",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-input-demo",[[0,"smoothly-input-demo"]]],["smoothly-select-demo",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-table-demo",[[2,"smoothly-table-demo"]]],["smoothly-display-demo",[[0,"smoothly-display-demo"]]],["smoothly-app",[[4,"smoothly-app",{"color":[1]}]]],["smoothly-dialog-demo",[[0,"smoothly-dialog-demo"]]],["smoothly-icon-demo",[[2,"smoothly-icon-demo"]]],["smoothly-room",[[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]]],["smoothly-input-date-range",[[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"]]]]],["smoothly-notifier",[[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]]],["smoothly-picker",[[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]]]],["smoothly-dialog",[[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]]],["smoothly-checkbox",[[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"selected":[1540],"disabled":[1540],"t":[32]}]]],["smoothly-submit",[[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]]]],["smoothly-urlencoded",[[0,"smoothly-urlencoded",{"data":[1]}]]],["smoothly-accordion",[[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]]]],["smoothly-accordion-item",[[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]]],["smoothly-display-amount",[[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]]],["smoothly-frame",[[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}]]],["smoothly-popup",[[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]]],["smoothly-quiet",[[6,"smoothly-quiet",{"color":[1]}]]],["smoothly-radio",[[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]]],["smoothly-select",[[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]]],["smoothly-tab",[[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]]]],["smoothly-tab-switch",[[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]]]],["smoothly-table",[[6,"smoothly-table",null,[[0,"sort","onSort"]]]]],["smoothly-table-cell",[[6,"smoothly-table-cell"]]],["smoothly-table-expandable-cell",[[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-table-expandable-row",[[6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]]],["smoothly-table-header",[[6,"smoothly-table-header",{"name":[1],"sortDirection":[1025,"sort-direction"]},[[0,"click","onClick"]]]]],["smoothly-table-row",[[6,"smoothly-table-row",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-icon",[[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-selector",[[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]]],["smoothly-input-date",[[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025]}]]],["smoothly-notification",[[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]]],["smoothly-option",[[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537]}]]],["smoothly-menu-options",[[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]]]],["smoothly-display",[[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]]],["smoothly-display-date-time",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-spinner",[[2,"smoothly-spinner",{"active":[516]}]]],["smoothly-tuple",[[0,"smoothly-tuple",{"tuple":[16]}]]],["smoothly-item",[[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]]]],["smoothly-input-month",[[2,"smoothly-input-month",{"value":[1025]}]]],["smoothly-calendar",[[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"]}]]],["smoothly-input",[[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"currency":[513],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}]]],["smoothly-trigger",[[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]]]], options);
+  return bootstrapLazy([["smoothly-app-demo",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-input-demo",[[0,"smoothly-input-demo"]]],["smoothly-select-demo",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-table-demo",[[2,"smoothly-table-demo"]]],["smoothly-display-demo",[[0,"smoothly-display-demo"]]],["smoothly-app",[[4,"smoothly-app",{"color":[1]}]]],["smoothly-dialog-demo",[[0,"smoothly-dialog-demo"]]],["smoothly-icon-demo",[[2,"smoothly-icon-demo"]]],["smoothly-room",[[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]]],["smoothly-input-date-range",[[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]]]],["smoothly-notifier",[[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]]],["smoothly-picker",[[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]]]],["smoothly-dialog",[[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]]],["smoothly-checkbox",[[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"selected":[1540],"disabled":[1540],"t":[32]}]]],["smoothly-submit",[[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]]]],["smoothly-urlencoded",[[0,"smoothly-urlencoded",{"data":[1]}]]],["smoothly-accordion",[[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]]]],["smoothly-accordion-item",[[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]]],["smoothly-display-amount",[[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]]],["smoothly-frame",[[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}]]],["smoothly-popup",[[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]]],["smoothly-quiet",[[6,"smoothly-quiet",{"color":[1]}]]],["smoothly-radio",[[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]]],["smoothly-select",[[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]]],["smoothly-tab",[[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]]]],["smoothly-tab-switch",[[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]]]],["smoothly-table",[[6,"smoothly-table",null,[[0,"sort","onSort"]]]]],["smoothly-table-cell",[[6,"smoothly-table-cell"]]],["smoothly-table-expandable-cell",[[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-table-expandable-row",[[6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]]],["smoothly-table-header",[[6,"smoothly-table-header",{"name":[1],"sortDirection":[1025,"sort-direction"]},[[0,"click","onClick"]]]]],["smoothly-table-row",[[6,"smoothly-table-row",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-icon",[[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-selector",[[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]]],["smoothly-input-date",[[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025]},[[0,"dateSet","dateSetHandler"]]]]],["smoothly-notification",[[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]]],["smoothly-option",[[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537]}]]],["smoothly-menu-options",[[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]]]],["smoothly-display",[[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]]],["smoothly-display-date-time",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-spinner",[[2,"smoothly-spinner",{"active":[516]}]]],["smoothly-tuple",[[0,"smoothly-tuple",{"tuple":[16]}]]],["smoothly-item",[[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]]]],["smoothly-input-month",[[2,"smoothly-input-month",{"value":[1025]}]]],["smoothly-calendar",[[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}]]],["smoothly-input",[[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"currency":[513],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}]]],["smoothly-trigger",[[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]]]], options);
 });

package/dist/types/components/calendar/index.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { Date } from "isoly";
+import { Date, DateRange } from "isoly";
 export declare class Calendar {
   element: HTMLTableRowElement;
   month?: Date;
@@ -12,9 +12,14 @@ export declare class Calendar {
   valueChanged: EventEmitter<Date>;
   startChanged: EventEmitter<Date>;
   endChanged: EventEmitter<Date>;
+  dateSet: EventEmitter<Date>;
+  dateRangeSet: EventEmitter<DateRange>;
+  private frozenDate;
+  firstSelected: boolean;
   onStart(next: Date): void;
   onEnd(next: Date): void;
   private clickCounter;
   private onClick;
+  private onHover;
   render(): any[];
 }

package/dist/types/components/input/index.d.ts

@@ -18,6 +18,7 @@ export declare class SmoothlyInput {
   disabled: boolean;
   currency?: Currency;
   get formatter(): Formatter & Converter<any>;
+  private newState;
   smoothlyChanged: EventEmitter<{
     name: string;
     value: any;

package/dist/types/components/input-date/index.d.ts

@@ -7,5 +7,6 @@ export declare class InputDate {
   min: Date;
   valueChanged: EventEmitter<Date>;
   onStart(next: Date): void;
+  dateSetHandler(e: CustomEvent<Date>): void;
   render(): any[];
 }

package/dist/types/components/input-date-range/index.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { Date } from "isoly";
+import { Date, DateRange } from "isoly";
 export declare class InputDateRange {
   value?: Date;
   start?: Date;
@@ -13,8 +13,8 @@ export declare class InputDateRange {
     end: Date;
   }>;
   onValue(next: Date): void;
-  onClose(open: boolean): void;
   onStartChanged(event: CustomEvent<Date>): void;
   onEndChanged(event: CustomEvent<Date>): void;
+  onDateRangeSet(event: CustomEvent<DateRange>): void;
   render(): any[];
 }

package/dist/types/components.d.ts

@@ -6,7 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Color, Expand, Fill, Message, Notice, OptionType, Trigger } from "./model";
-import { CountryCode, Currency, Date, DateTime } from "isoly";
+import { CountryCode, Currency, Date, DateRange, DateTime } from "isoly";
 import { Direction, Type } from "tidily";
 export namespace Components {
     interface SmoothlyAccordion {
@@ -630,6 +630,8 @@ declare namespace LocalJSX {
         "max"?: Date;
         "min"?: Date;
         "month"?: Date;
+        "onDateRangeSet"?: (event: CustomEvent<DateRange>) => void;
+        "onDateSet"?: (event: CustomEvent<Date>) => void;
         "onEndChanged"?: (event: CustomEvent<Date>) => void;
         "onStartChanged"?: (event: CustomEvent<Date>) => void;
         "onValueChanged"?: (event: CustomEvent<Date>) => void;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { Components, JSX } from "./components";
 export { App } from "./components/App";
 export { Autocomplete, ClientIdentifier, Color, Expand, Fill, Message, Notice, Trigger, OptionType } from "./model";
-export { toCommaRgb } from "./utilities";
+export { Cosmetic } from "./utilities";

package/dist/types/utilities/Cosmetic/Color/CommaRgb.d.ts

@@ -0,0 +1,11 @@
+import { Hex } from "./Hex";
+import { Hsl } from "./Hsl";
+import { Rgb } from "./Rgb";
+export declare type CommaRgb = string;
+export declare namespace CommaRgb {
+  function is(value: any | CommaRgb): value is CommaRgb;
+  function from(color: any): CommaRgb | undefined;
+  function fromHex(hex: Hex): CommaRgb;
+  function fromRgb(rgb: Rgb): CommaRgb;
+  function fromHsl(hsl: Hsl): CommaRgb;
+}

package/dist/types/utilities/Cosmetic/Color/Hex.d.ts

@@ -0,0 +1,4 @@
+export declare type Hex = string;
+export declare namespace Hex {
+  function is(value: any | Hex): value is Hex;
+}

package/dist/types/utilities/Cosmetic/Color/Hsl.d.ts

@@ -0,0 +1,4 @@
+export declare type Hsl = string;
+export declare namespace Hsl {
+  function is(value: any | Hsl): value is Hsl;
+}

package/dist/types/utilities/Cosmetic/Color/Name.d.ts

@@ -0,0 +1,155 @@
+export declare const Names: {
+  readonly aliceblue: "#f0f8ff";
+  readonly antiquewhite: "#faebd7";
+  readonly aqua: "#00ffff";
+  readonly aquamarine: "#7fffd4";
+  readonly azure: "#f0ffff";
+  readonly beige: "#f5f5dc";
+  readonly bisque: "#ffe4c4";
+  readonly black: "#000000";
+  readonly blanchedalmond: "#ffebcd";
+  readonly blue: "#0000ff";
+  readonly blueviolet: "#8a2be2";
+  readonly brown: "#a52a2a";
+  readonly burlywood: "#deb887";
+  readonly cadetblue: "#5f9ea0";
+  readonly chartreuse: "#7fff00";
+  readonly chocolate: "#d2691e";
+  readonly coral: "#ff7f50";
+  readonly cornflowerblue: "#6495ed";
+  readonly cornsilk: "#fff8dc";
+  readonly crimson: "#dc143c";
+  readonly cyan: "#00ffff";
+  readonly darkblue: "#00008b";
+  readonly darkcyan: "#008b8b";
+  readonly darkgoldenrod: "#b8860b";
+  readonly darkgray: "#a9a9a9";
+  readonly darkgreen: "#006400";
+  readonly darkgrey: "#a9a9a9";
+  readonly darkkhaki: "#bdb76b";
+  readonly darkmagenta: "#8b008b";
+  readonly darkolivegreen: "#556b2f";
+  readonly darkorange: "#ff8c00";
+  readonly darkorchid: "#9932cc";
+  readonly darkred: "#8b0000";
+  readonly darksalmon: "#e9967a";
+  readonly darkseagreen: "#8fbc8f";
+  readonly darkslateblue: "#483d8b";
+  readonly darkslategray: "#2f4f4f";
+  readonly darkslategrey: "#2f4f4f";
+  readonly darkturquoise: "#00ced1";
+  readonly darkviolet: "#9400d3";
+  readonly deeppink: "#ff1493";
+  readonly deepskyblue: "#00bfff";
+  readonly dimgray: "#696969";
+  readonly dimgrey: "#696969";
+  readonly dodgerblue: "#1e90ff";
+  readonly firebrick: "#b22222";
+  readonly floralwhite: "#fffaf0";
+  readonly forestgreen: "#228b22";
+  readonly fuchsia: "#ff00ff";
+  readonly gainsboro: "#dcdcdc";
+  readonly ghostwhite: "#f8f8ff";
+  readonly goldenrod: "#daa520";
+  readonly gold: "#ffd700";
+  readonly gray: "#808080";
+  readonly green: "#008000";
+  readonly greenyellow: "#adff2f";
+  readonly grey: "#808080";
+  readonly honeydew: "#f0fff0";
+  readonly hotpink: "#ff69b4";
+  readonly indianred: "#cd5c5c";
+  readonly indigo: "#4b0082";
+  readonly ivory: "#fffff0";
+  readonly khaki: "#f0e68c";
+  readonly lavenderblush: "#fff0f5";
+  readonly lavender: "#e6e6fa";
+  readonly lawngreen: "#7cfc00";
+  readonly lemonchiffon: "#fffacd";
+  readonly lightblue: "#add8e6";
+  readonly lightcoral: "#f08080";
+  readonly lightcyan: "#e0ffff";
+  readonly lightgoldenrodyellow: "#fafad2";
+  readonly lightgray: "#d3d3d3";
+  readonly lightgreen: "#90ee90";
+  readonly lightgrey: "#d3d3d3";
+  readonly lightpink: "#ffb6c1";
+  readonly lightsalmon: "#ffa07a";
+  readonly lightseagreen: "#20b2aa";
+  readonly lightskyblue: "#87cefa";
+  readonly lightslategray: "#778899";
+  readonly lightslategrey: "#778899";
+  readonly lightsteelblue: "#b0c4de";
+  readonly lightyellow: "#ffffe0";
+  readonly lime: "#00ff00";
+  readonly limegreen: "#32cd32";
+  readonly linen: "#faf0e6";
+  readonly magenta: "#ff00ff";
+  readonly maroon: "#800000";
+  readonly mediumaquamarine: "#66cdaa";
+  readonly mediumblue: "#0000cd";
+  readonly mediumorchid: "#ba55d3";
+  readonly mediumpurple: "#9370db";
+  readonly mediumseagreen: "#3cb371";
+  readonly mediumslateblue: "#7b68ee";
+  readonly mediumspringgreen: "#00fa9a";
+  readonly mediumturquoise: "#48d1cc";
+  readonly mediumvioletred: "#c71585";
+  readonly midnightblue: "#191970";
+  readonly mintcream: "#f5fffa";
+  readonly mistyrose: "#ffe4e1";
+  readonly moccasin: "#ffe4b5";
+  readonly navajowhite: "#ffdead";
+  readonly navy: "#000080";
+  readonly oldlace: "#fdf5e6";
+  readonly olive: "#808000";
+  readonly olivedrab: "#6b8e23";
+  readonly orange: "#ffa500";
+  readonly orangered: "#ff4500";
+  readonly orchid: "#da70d6";
+  readonly palegoldenrod: "#eee8aa";
+  readonly palegreen: "#98fb98";
+  readonly paleturquoise: "#afeeee";
+  readonly palevioletred: "#db7093";
+  readonly papayawhip: "#ffefd5";
+  readonly peachpuff: "#ffdab9";
+  readonly peru: "#cd853f";
+  readonly pink: "#ffc0cb";
+  readonly plum: "#dda0dd";
+  readonly powderblue: "#b0e0e6";
+  readonly purple: "#800080";
+  readonly rebeccapurple: "#663399";
+  readonly red: "#ff0000";
+  readonly rosybrown: "#bc8f8f";
+  readonly royalblue: "#4169e1";
+  readonly saddlebrown: "#8b4513";
+  readonly salmon: "#fa8072";
+  readonly sandybrown: "#f4a460";
+  readonly seagreen: "#2e8b57";
+  readonly seashell: "#fff5ee";
+  readonly sienna: "#a0522d";
+  readonly silver: "#c0c0c0";
+  readonly skyblue: "#87ceeb";
+  readonly slateblue: "#6a5acd";
+  readonly slategray: "#708090";
+  readonly slategrey: "#708090";
+  readonly snow: "#fffafa";
+  readonly springgreen: "#00ff7f";
+  readonly steelblue: "#4682b4";
+  readonly tan: "#d2b48c";
+  readonly teal: "#008080";
+  readonly thistle: "#d8bfd8";
+  readonly tomato: "#ff6347";
+  readonly turquoise: "#40e0d0";
+  readonly violet: "#ee82ee";
+  readonly wheat: "#f5deb3";
+  readonly white: "#ffffff";
+  readonly whitesmoke: "#f5f5f5";
+  readonly yellow: "#ffff00";
+  readonly yellowgreen: "#9acd32";
+};
+export declare type Name = keyof typeof Names;
+export declare namespace Name {
+  const types: () => string[];
+  function is(value: any | Name): value is Name;
+}

package/dist/types/utilities/Cosmetic/Color/Rgb.d.ts

@@ -0,0 +1,4 @@
+export declare type Rgb = string;
+export declare namespace Rgb {
+  function is(value: any | Rgb): value is Rgb;
+}