smoothly 0.1.84 → 0.1.88

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/cjs/{generate-a6821b82.js → generate-f9a36f25.js} +1 -1
  2. package/dist/cjs/{index-fc82954f.js → index-ac32385c.js} +230 -184
  3. package/dist/cjs/index-bc3845e8.js +1670 -0
  4. package/dist/cjs/index.cjs.js +214 -116
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/smoothly-accordion_47.cjs.entry.js +1163 -19143
  7. package/dist/cjs/smoothly-calendar.cjs.entry.js +40 -12
  8. package/dist/cjs/smoothly-display-amount.cjs.entry.js +1 -1
  9. package/dist/cjs/smoothly-display.cjs.entry.js +2 -1
  10. package/dist/cjs/smoothly-input-date-range.cjs.entry.js +10 -11
  11. package/dist/cjs/smoothly-input-date.cjs.entry.js +6 -2
  12. package/dist/cjs/smoothly-input-month.cjs.entry.js +2 -2
  13. package/dist/cjs/smoothly-input.cjs.entry.js +17 -10
  14. package/dist/cjs/smoothly-select-demo.cjs.entry.js +2 -2
  15. package/dist/cjs/smoothly.cjs.js +1 -1
  16. package/dist/collection/components/calendar/index.js +80 -11
  17. package/dist/collection/components/display/index.js +1 -1
  18. package/dist/collection/components/input/index.js +17 -10
  19. package/dist/collection/components/input-date/index.js +12 -1
  20. package/dist/collection/components/input-date/style.css +4 -0
  21. package/dist/collection/components/input-date-range/index.js +14 -15
  22. package/dist/collection/components/input-date-range/style.css +4 -0
  23. package/dist/collection/components/select-demo/index.js +2 -2
  24. package/dist/collection/index.js +1 -1
  25. package/dist/collection/utilities/Cosmetic/Color/CommaRgb.js +90 -0
  26. package/dist/collection/utilities/Cosmetic/Color/Hex.js +11 -0
  27. package/dist/collection/utilities/Cosmetic/Color/Hsl.js +32 -0
  28. package/dist/collection/utilities/{colorNames.js → Cosmetic/Color/Name.js} +9 -1
  29. package/dist/collection/utilities/Cosmetic/Color/Rgb.js +19 -0
  30. package/dist/collection/utilities/Cosmetic/Color/index.js +23 -0
  31. package/dist/collection/utilities/Cosmetic/index.js +40 -0
  32. package/dist/collection/utilities/index.js +1 -1
  33. package/dist/custom-elements/index.js +1539 -19619
  34. package/dist/esm/{generate-776b3b0f.js → generate-50b98474.js} +1 -1
  35. package/dist/esm/index-37a67c97.js +1668 -0
  36. package/dist/{smoothly/index-a28d88cf.js → esm/index-a5a08f46.js} +230 -184
  37. package/dist/esm/index.js +215 -116
  38. package/dist/esm/loader.js +1 -1
  39. package/dist/esm/smoothly-accordion_47.entry.js +1163 -19143
  40. package/dist/esm/smoothly-calendar.entry.js +40 -12
  41. package/dist/esm/smoothly-display-amount.entry.js +1 -1
  42. package/dist/esm/smoothly-display.entry.js +2 -1
  43. package/dist/esm/smoothly-input-date-range.entry.js +10 -11
  44. package/dist/esm/smoothly-input-date.entry.js +6 -2
  45. package/dist/esm/smoothly-input-month.entry.js +2 -2
  46. package/dist/esm/smoothly-input.entry.js +17 -10
  47. package/dist/esm/smoothly-select-demo.entry.js +2 -2
  48. package/dist/esm/smoothly.js +1 -1
  49. package/dist/smoothly/{generate-776b3b0f.js → generate-50b98474.js} +1 -1
  50. package/dist/smoothly/index-37a67c97.js +1668 -0
  51. package/dist/{esm/index-a28d88cf.js → smoothly/index-a5a08f46.js} +230 -184
  52. package/dist/smoothly/index.esm.js +215 -116
  53. package/dist/smoothly/p-0286085b.entry.js +1 -0
  54. package/dist/smoothly/smoothly-calendar.entry.js +40 -12
  55. package/dist/smoothly/smoothly-display-amount.entry.js +1 -1
  56. package/dist/smoothly/smoothly-display.entry.js +2 -1
  57. package/dist/smoothly/smoothly-input-date-range.entry.js +10 -11
  58. package/dist/smoothly/smoothly-input-date.entry.js +6 -2
  59. package/dist/smoothly/smoothly-input-month.entry.js +2 -2
  60. package/dist/smoothly/smoothly-input.entry.js +17 -10
  61. package/dist/smoothly/smoothly-select-demo.entry.js +2 -2
  62. package/dist/smoothly/smoothly.esm.js +1 -1
  63. package/dist/types/components/calendar/index.d.ts +6 -1
  64. package/dist/types/components/input/index.d.ts +1 -0
  65. package/dist/types/components/input-date/index.d.ts +1 -0
  66. package/dist/types/components/input-date-range/index.d.ts +2 -2
  67. package/dist/types/components.d.ts +3 -1
  68. package/dist/types/index.d.ts +1 -1
  69. package/dist/types/utilities/Cosmetic/Color/CommaRgb.d.ts +11 -0
  70. package/dist/types/utilities/Cosmetic/Color/Hex.d.ts +4 -0
  71. package/dist/types/utilities/Cosmetic/Color/Hsl.d.ts +4 -0
  72. package/dist/types/utilities/Cosmetic/Color/Name.d.ts +155 -0
  73. package/dist/types/utilities/Cosmetic/Color/Rgb.d.ts +4 -0
  74. package/dist/types/utilities/Cosmetic/Color/index.d.ts +170 -0
  75. package/dist/types/utilities/Cosmetic/index.d.ts +23 -0
  76. package/dist/types/utilities/index.d.ts +1 -1
  77. package/package.json +3 -3
  78. package/dist/cjs/index-42db74b3.js +0 -19931
  79. package/dist/collection/utilities/colorTransform.js +0 -120
  80. package/dist/esm/index-36a04e8c.js +0 -19929
  81. package/dist/smoothly/index-36a04e8c.js +0 -19929
  82. package/dist/smoothly/p-5ca32c49.entry.js +0 -1
  83. package/dist/types/utilities/colorNames.d.ts +0 -3
  84. package/dist/types/utilities/colorTransform.d.ts +0 -8
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, i as createEvent, h, j as getElement } from './index-02a70ac1.js';
2
- import { d as dist } from './index-a28d88cf.js';
3
- import { w as weekdays, m as month } from './generate-776b3b0f.js';
2
+ import { d as dist } from './index-a5a08f46.js';
3
+ import { w as weekdays, m as month } from './generate-50b98474.js';
4
4
  import './_commonjsHelpers-8fe71198.js';
5
5
 
6
6
  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 {
11
11
  this.valueChanged = createEvent(this, "valueChanged", 7);
12
12
  this.startChanged = createEvent(this, "startChanged", 7);
13
13
  this.endChanged = createEvent(this, "endChanged", 7);
14
+ this.dateSet = createEvent(this, "dateSet", 7);
15
+ this.dateRangeSet = createEvent(this, "dateRangeSet", 7);
14
16
  this.value = dist.Date.now();
15
17
  this.clickCounter = 0;
16
18
  }
@@ -23,13 +25,33 @@ let Calendar = class {
23
25
  onClick(date) {
24
26
  this.valueChanged.emit((this.value = date));
25
27
  this.clickCounter += 1;
26
- if (this.clickCounter % 2 == 1)
27
- this.start = this.end = date;
28
- else {
29
- if (this.start && date > this.start)
30
- this.end = date;
31
- else
28
+ if (this.doubleInput) {
29
+ if (this.clickCounter % 2 == 1)
30
+ this.start = this.end = this.frozenDate = date;
31
+ else {
32
+ if (this.start && date > this.start)
33
+ this.end = date;
34
+ else
35
+ this.start = date;
36
+ }
37
+ }
38
+ !this.doubleInput && this.dateSet.emit(this.value);
39
+ this.doubleInput &&
40
+ this.clickCounter % 2 == 0 &&
41
+ this.start &&
42
+ this.end &&
43
+ this.dateRangeSet.emit({ start: this.start, end: this.end });
44
+ }
45
+ onHover(date) {
46
+ if (this.doubleInput && this.clickCounter % 2 == 1) {
47
+ if (date < this.frozenDate) {
32
48
  this.start = date;
49
+ this.end = this.frozenDate;
50
+ }
51
+ else {
52
+ this.start = this.frozenDate;
53
+ this.end = date;
54
+ }
33
55
  }
34
56
  }
35
57
  render() {
@@ -41,11 +63,17 @@ let Calendar = class {
41
63
  } }),
42
64
  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 => {
43
65
  var _a, _b, _c;
44
- 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"] : [])
66
+ return (h("td", { tabindex: 1, onMouseOver: () => {
67
+ !this.doubleInput && (this.min || this.max) && (date < this.min || date > this.max)
68
+ ? undefined
69
+ : this.onHover(date);
70
+ }, onClick: (this.min || this.max) && (date < this.min || date > this.max) ? undefined : () => this.onClick(date), class: (date == this.value ? ["selected"] : [])
45
71
  .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
46
- ? date >= ((_b = this.start) !== null && _b !== void 0 ? _b : "") && date <= ((_c = this.end) !== null && _c !== void 0 ? _c : "")
47
- ? ["dateRange"]
48
- : []
72
+ ? this.start == date || this.end == date
73
+ ? ["selected"]
74
+ : date >= ((_b = this.start) !== null && _b !== void 0 ? _b : "") && date <= ((_c = this.end) !== null && _c !== void 0 ? _c : "")
75
+ ? ["dateRange"]
76
+ : []
49
77
  : "")
50
78
  .concat(...(this.min || this.max ? (date < this.min || date > this.max ? ["disable"] : []) : ""))
51
79
  .join(" ") }, date.substring(8, 10)));
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance } from './index-02a70ac1.js';
2
- import { d as dist } from './index-a28d88cf.js';
2
+ import { d as dist } from './index-a5a08f46.js';
3
3
  import './_commonjsHelpers-8fe71198.js';
4
4
 
5
5
  const styleCss = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
@@ -1,6 +1,7 @@
1
1
  import { r as registerInstance, h } from './index-02a70ac1.js';
2
- import { d as dist } from './index-36a04e8c.js';
2
+ import { d as dist } from './index-37a67c97.js';
3
3
  import './_commonjsHelpers-8fe71198.js';
4
+ import './index-a5a08f46.js';
4
5
 
5
6
  const styleCss = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
6
7
 
@@ -1,8 +1,8 @@
1
1
  import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
2
- import { d as dist } from './index-a28d88cf.js';
2
+ import { d as dist } from './index-a5a08f46.js';
3
3
  import './_commonjsHelpers-8fe71198.js';
4
4
 
5
- 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}";
5
+ 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}";
6
6
 
7
7
  let InputDateRange = class {
8
8
  constructor(hostRef) {
@@ -13,16 +13,18 @@ let InputDateRange = class {
13
13
  onValue(next) {
14
14
  this.valueChanged.emit(next);
15
15
  }
16
- onClose(open) {
17
- if (open == false && dist.Date.is(this.start) && dist.Date.is(this.end))
18
- this.dateRangeSelected.emit({ start: this.start, end: this.end });
19
- }
20
16
  onStartChanged(event) {
21
17
  this.start = event.detail;
22
18
  }
23
19
  onEndChanged(event) {
24
20
  this.end = event.detail;
25
21
  }
22
+ onDateRangeSet(event) {
23
+ console.log("dateRangeSet", event.detail);
24
+ this.open = false;
25
+ event.stopPropagation();
26
+ dist.DateRange.is(event.detail) && this.dateRangeSelected.emit(event.detail);
27
+ }
26
28
  render() {
27
29
  var _a;
28
30
  return [
@@ -31,14 +33,11 @@ let InputDateRange = class {
31
33
  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 => {
32
34
  this.value = event.detail;
33
35
  event.stopPropagation();
34
- }, max: this.max, min: this.min }))) : ([]),
36
+ }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([]),
35
37
  ];
36
38
  }
37
39
  static get watchers() { return {
38
- "value": ["onValue"],
39
- "open": ["onClose"],
40
- "start": ["onClose"],
41
- "end": ["onClose"]
40
+ "value": ["onValue"]
42
41
  }; }
43
42
  };
44
43
  InputDateRange.style = styleCss;
@@ -1,8 +1,8 @@
1
1
  import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
2
- import { d as dist } from './index-a28d88cf.js';
2
+ import { d as dist } from './index-a5a08f46.js';
3
3
  import './_commonjsHelpers-8fe71198.js';
4
4
 
5
- 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))}";
5
+ 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))}";
6
6
 
7
7
  let InputDate = class {
8
8
  constructor(hostRef) {
@@ -12,6 +12,10 @@ let InputDate = class {
12
12
  onStart(next) {
13
13
  this.valueChanged.emit(next);
14
14
  }
15
+ dateSetHandler(e) {
16
+ this.open = false;
17
+ e.stopPropagation();
18
+ }
15
19
  render() {
16
20
  var _a;
17
21
  return [
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
2
- import { d as dist } from './index-a28d88cf.js';
3
- import { y as years, a as months } from './generate-776b3b0f.js';
2
+ import { d as dist } from './index-a5a08f46.js';
3
+ import { y as years, a as months } from './generate-50b98474.js';
4
4
  import './_commonjsHelpers-8fe71198.js';
5
5
 
6
6
  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}";
@@ -1,5 +1,6 @@
1
1
  import { r as registerInstance, i as createEvent, h, k as Host } from './index-02a70ac1.js';
2
- import { d as dist } from './index-36a04e8c.js';
2
+ import { d as dist$1 } from './index-a5a08f46.js';
3
+ import { d as dist } from './index-37a67c97.js';
3
4
  import './_commonjsHelpers-8fe71198.js';
4
5
 
5
6
  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 {
23
24
  result = dist.get("price", this.currency);
24
25
  break;
25
26
  default:
26
- result = dist.get(this.type);
27
+ result = dist.get(this.type, getLocale());
27
28
  break;
28
29
  }
29
30
  return result || dist.get("text");
30
31
  }
32
+ newState(state) {
33
+ const formatter = this.formatter;
34
+ return formatter.format(dist.StateEditor.copy(formatter.unformat(dist.StateEditor.copy(state))));
35
+ }
31
36
  valueWatcher(value, before) {
32
37
  if (this.lastValue != value) {
33
38
  this.lastValue = value;
34
- 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 });
39
+ this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(value), selection: this.state.selection }).value });
35
40
  }
36
41
  if (value != before)
37
42
  this.smoothlyChanged.emit({ name: this.name, value });
38
43
  }
39
44
  componentWillLoad() {
40
- const formatter = this.formatter;
41
- const value = formatter.toString(this.value) || "";
45
+ const value = this.formatter.toString(this.value) || "";
42
46
  const start = value.length;
43
- this.state = formatter.format(dist.StateEditor.copy(formatter.unformat(dist.StateEditor.copy({
47
+ this.state = this.newState({
44
48
  value,
45
49
  selection: { start, end: start, direction: "none" },
46
- }))));
50
+ });
47
51
  }
48
52
  componentDidRender() {
49
53
  if (this.keepFocusOnReRender) {
@@ -55,8 +59,7 @@ let SmoothlyInput = class {
55
59
  this.keepFocusOnReRender = keepFocus;
56
60
  }
57
61
  async setSelectionRange(start, end, direction) {
58
- const formatter = this.formatter;
59
- 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 } })))));
62
+ this.state = this.newState(Object.assign(Object.assign({}, this.state), { selection: { start, end, direction: direction != undefined ? direction : this.state.selection.direction } }));
60
63
  const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
61
64
  this.updateBackend(after, this.inputElement);
62
65
  }
@@ -73,7 +76,7 @@ let SmoothlyInput = class {
73
76
  end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
74
77
  direction: backend.selectionDirection ? backend.selectionDirection : "none",
75
78
  } });
76
- const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
79
+ const after = this.newState(Object.assign({}, this.state));
77
80
  this.updateBackend(after, backend);
78
81
  }
79
82
  onKeyDown(event) {
@@ -159,6 +162,10 @@ let SmoothlyInput = class {
159
162
  "value": ["valueWatcher"]
160
163
  }; }
161
164
  };
165
+ function getLocale() {
166
+ const result = navigator.language;
167
+ return dist$1.Locale.is(result) ? result : dist$1.Language.is(result) ? dist$1.Locale.toLocale(result) : undefined;
168
+ }
162
169
  SmoothlyInput.style = styleCss;
163
170
 
164
171
  export { SmoothlyInput as smoothly_input };
@@ -21,8 +21,8 @@ let SmoothlySelectDemo = class {
21
21
  h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
22
22
  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"))),
23
23
  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")),
24
- h("smoothly-input-date", { max: "2021-12-30", min: "2021-10-10" }, "Date"),
25
- h("smoothly-input-date-range", { max: "2021-12-30", min: "2021-10-10" }),
24
+ h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
25
+ h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
26
26
  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")),
27
27
  h("button", { onClick: () => this.alertf() }, "press here"),
28
28
  h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
@@ -121,5 +121,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
121
121
 
122
122
  patchBrowser().then(options => {
123
123
  globalScripts();
124
- 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);
124
+ 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);
125
125
  });
@@ -1,4 +1,4 @@
1
- import { d as dist } from './index-a28d88cf.js';
1
+ import { d as dist } from './index-a5a08f46.js';
2
2
 
3
3
  function month(date) {
4
4
  const d = new Date(date);