@3mo/date-time-fields 0.1.1 → 0.1.3

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 (17) hide show
  1. package/README.md +2 -2
  2. package/dist/FieldDateTime.js +6 -6
  3. package/dist/FieldDateTimeBase.js +104 -104
  4. package/dist/FieldDateTimeRange.js +31 -31
  5. package/dist/FieldTime.js +3 -3
  6. package/dist/selection/DateList.js +25 -25
  7. package/dist/selection/HourList.js +8 -8
  8. package/dist/selection/MinuteList.js +8 -8
  9. package/dist/selection/MonthList.js +14 -14
  10. package/dist/selection/SecondList.js +8 -8
  11. package/dist/selection/YearList.js +8 -8
  12. package/dist/selection/calendar/Calendar.js +72 -72
  13. package/dist/selection/calendar/SelectableCalendar.js +7 -7
  14. package/dist/selection/calendar/SelectableRangeCalendar.d.ts.map +1 -1
  15. package/dist/selection/calendar/SelectableRangeCalendar.js +28 -22
  16. package/dist/tsconfig.tsbuildinfo +1 -1
  17. package/package.json +44 -44
package/dist/selection/calendar/Calendar.js CHANGED
@@ -8,55 +8,55 @@ let Calendar = class Calendar extends Component {
8
8
  this.navigatingValue = new DateTime;
9
9
  }
10
10
  static get styles() {
11
- return css `
12
- :host {
13
- --mo-calendar-day-size: 36px;
14
- --mo-calendar-week-number-width: var(--mo-calendar-day-size);
15
- padding-inline: 10px;
16
- }
17
-
18
- .monthHeader {
19
- color: var(--mo-color-gray);
20
- align-items: center;
21
- }
22
-
23
- .week {
24
- color: var(--mo-color-gray);
25
- }
26
-
27
- .day {
28
- text-align: center;
29
- border-radius: 100px;
30
- cursor: pointer;
31
- transition: 100ms;
32
- font-weight: 500;
33
- user-select: none;
34
- font-size: medium;
35
- width: var(--mo-calendar-day-size);
36
- -webkit-user-select: none;
37
- align-items: center;
38
- justify-content: center;
39
- }
40
-
41
- .day {
42
- height: var(--mo-calendar-day-size);
43
- }
44
-
45
- .day:hover {
46
- background: var(--mo-color-transparent-gray-3);
47
- }
48
-
49
- .day:not(.isInMonth) {
50
- color: var(--mo-color-gray);
51
- }
52
-
53
- .day.today {
54
- outline: 2px dashed var(--mo-color-gray-transparent);
55
- }
56
-
57
- .day.navigation {
58
- background: var(--mo-color-transparent-gray-3);
59
- }
11
+ return css `
12
+ :host {
13
+ --mo-calendar-day-size: 36px;
14
+ --mo-calendar-week-number-width: var(--mo-calendar-day-size);
15
+ padding-inline: 10px;
16
+ }
17
+
18
+ .monthHeader {
19
+ color: var(--mo-color-gray);
20
+ align-items: center;
21
+ }
22
+
23
+ .week {
24
+ color: var(--mo-color-gray);
25
+ }
26
+
27
+ .day {
28
+ text-align: center;
29
+ border-radius: 100px;
30
+ cursor: pointer;
31
+ transition: 100ms;
32
+ font-weight: 500;
33
+ user-select: none;
34
+ font-size: medium;
35
+ width: var(--mo-calendar-day-size);
36
+ -webkit-user-select: none;
37
+ align-items: center;
38
+ justify-content: center;
39
+ }
40
+
41
+ .day {
42
+ height: var(--mo-calendar-day-size);
43
+ }
44
+
45
+ .day:hover {
46
+ background: var(--mo-color-transparent-gray-3);
47
+ }
48
+
49
+ .day:not(.isInMonth) {
50
+ color: var(--mo-color-gray);
51
+ }
52
+
53
+ .day.today {
54
+ outline: 2px dashed var(--mo-color-gray-transparent);
55
+ }
56
+
57
+ .day.navigation {
58
+ background: var(--mo-color-transparent-gray-3);
59
+ }
60
60
  `;
61
61
  }
62
62
  get template() {
@@ -65,25 +65,25 @@ let Calendar = class Calendar extends Component {
65
65
  const range = [...this.rangeOf(start, end)];
66
66
  const weekDaysInMonth = [...range.groupToMap(d => String(d.weekOfYear))]
67
67
  .sort(([, dates1], [, dates2]) => { var _a; return ((_a = dates1[0]) === null || _a === void 0 ? void 0 : _a.isBefore(dates2[0])) ? -1 : +1; });
68
- return html `
69
- <mo-grid class='month'
70
- rows='repeat(auto-fill, var(--mo-calendar-day-size))'
71
- columns=${this.includeWeekNumbers ? 'var(--mo-calendar-week-number-width) repeat(7, var(--mo-calendar-day-size))' : 'repeat(7, var(--mo-calendar-day-size))'}
72
- ${style({ alignItems: 'center', justifyItems: 'center' })}
73
- >
74
- ${this.includeWeekNumbers === false ? nothing : html `<div></div>`}
75
-
76
- ${this.navigatingValue.weekDayNames.map(dayName => html `
77
- <div class='monthHeader'>
78
- ${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
79
- </div>
80
- `)}
81
-
82
- ${weekDaysInMonth.map(([weekNumber, days]) => html `
83
- ${this.includeWeekNumbers === false ? nothing : html `<div class='week'>${weekNumber}</div>`}
84
- ${days.map(day => this.getDayTemplate(day))}
85
- `)}
86
- </mo-grid>
68
+ return html `
69
+ <mo-grid class='month'
70
+ rows='repeat(auto-fill, var(--mo-calendar-day-size))'
71
+ columns=${this.includeWeekNumbers ? 'var(--mo-calendar-week-number-width) repeat(7, var(--mo-calendar-day-size))' : 'repeat(7, var(--mo-calendar-day-size))'}
72
+ ${style({ alignItems: 'center', justifyItems: 'center' })}
73
+ >
74
+ ${this.includeWeekNumbers === false ? nothing : html `<div></div>`}
75
+
76
+ ${this.navigatingValue.weekDayNames.map(dayName => html `
77
+ <div class='monthHeader'>
78
+ ${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
79
+ </div>
80
+ `)}
81
+
82
+ ${weekDaysInMonth.map(([weekNumber, days]) => html `
83
+ ${this.includeWeekNumbers === false ? nothing : html `<div class='week'>${weekNumber}</div>`}
84
+ ${days.map(day => this.getDayTemplate(day))}
85
+ `)}
86
+ </mo-grid>
87
87
  `;
88
88
  }
89
89
  *rangeOf(start, end) {
@@ -93,10 +93,10 @@ let Calendar = class Calendar extends Component {
93
93
  }
94
94
  }
95
95
  getDayTemplate(day) {
96
- return html `
97
- <mo-flex class=${classMap(this.getDayElementClasses(day))} @click=${() => this.handleDayClick(day)}>
98
- ${day.format({ day: 'numeric' })}
99
- </mo-flex>
96
+ return html `
97
+ <mo-flex class=${classMap(this.getDayElementClasses(day))} @click=${() => this.handleDayClick(day)}>
98
+ ${day.format({ day: 'numeric' })}
99
+ </mo-flex>
100
100
  `;
101
101
  }
102
102
  handleDayClick(day) {
package/dist/selection/calendar/SelectableCalendar.js CHANGED
@@ -4,13 +4,13 @@ import { Calendar } from './Calendar.js';
4
4
  /** @fires change {CustomEvent<T>} */
5
5
  let SelectableCalendar = class SelectableCalendar extends Calendar {
6
6
  static get styles() {
7
- return css `
8
- ${super.styles}
9
-
10
- .day.selected {
11
- background: var(--mo-color-accent-transparent);
12
- color: var(--mo-color-accent) !important;
13
- }
7
+ return css `
8
+ ${super.styles}
9
+
10
+ .day.selected {
11
+ background: var(--mo-color-accent-transparent);
12
+ color: var(--mo-color-accent) !important;
13
+ }
14
14
  `;
15
15
  }
16
16
  handleDayClick(day) {
package/dist/selection/calendar/SelectableRangeCalendar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectableRangeCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableRangeCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,qCAAqC;AACrC,qBACa,uBAAwB,SAAQ,kBAAkB;IAClC,SAAS,CAAC,EAAE,aAAa,CAAA;IAErD,WAAoB,MAAM,kCAwBzB;cAEkB,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;;;;CAWrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,uBAAuB,CAAA;KACvD;CACD"}
1
+ {"version":3,"file":"SelectableRangeCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableRangeCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,qCAAqC;AACrC,qBACa,uBAAwB,SAAQ,kBAAkB;IAClC,SAAS,CAAC,EAAE,aAAa,CAAA;IAErD,WAAoB,MAAM,kCA8BzB;cAEkB,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;;;;CAWrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,uBAAuB,CAAA;KACvD;CACD"}
package/dist/selection/calendar/SelectableRangeCalendar.js CHANGED
@@ -4,28 +4,34 @@ import { SelectableCalendar } from './SelectableCalendar.js';
4
4
  /** @fires change {CustomEvent<T>} */
5
5
  let SelectableRangeCalendar = class SelectableRangeCalendar extends SelectableCalendar {
6
6
  static get styles() {
7
- return css `
8
- ${super.styles}
9
-
10
- .day.isInRange:not(.selected) {
11
- background: rgba(var(--mo-color-accent-base), 0.08);
12
- }
13
-
14
- .day.isInRange {
15
- border-radius: 0px;
16
- }
17
-
18
- .day.selected.first {
19
- border-radius: 100px 0 0 100px;
20
- }
21
-
22
- .day.selected.last {
23
- border-radius: 0 100px 100px 0;
24
- }
25
-
26
- .day.selected.first.last {
27
- border-radius: 100px;
28
- }
7
+ return css `
8
+ ${super.styles}
9
+
10
+ .day.isInRange:not(.selected) {
11
+ background: rgba(var(--mo-color-accent-base), 0.08);
12
+ }
13
+
14
+ .day.isInRange {
15
+ border-radius: 0px;
16
+ }
17
+
18
+ .day.selected.first {
19
+ border-start-start-radius: 100px;
20
+ border-start-end-radius: 0;
21
+ border-end-start-radius: 100px;
22
+ border-end-end-radius: 0;
23
+ }
24
+
25
+ .day.selected.last {
26
+ border-start-start-radius: 0;
27
+ border-start-end-radius: 100px;
28
+ border-end-start-radius: 0;
29
+ border-end-end-radius: 100px;
30
+ }
31
+
32
+ .day.selected.first.last {
33
+ border-radius: 100px;
34
+ }
29
35
  `;
30
36
  }
31
37
  getDayElementClasses(day) {