@3mo/date-time-fields 0.0.15 → 0.1.0
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.
- package/dist/DateParser.js +21 -21
- package/dist/DateRangeParser.js +6 -6
- package/dist/FieldDate.d.ts +5 -15
- package/dist/FieldDate.d.ts.map +1 -1
- package/dist/FieldDate.js +6 -34
- package/dist/FieldDateRange.d.ts +5 -27
- package/dist/FieldDateRange.d.ts.map +1 -1
- package/dist/FieldDateRange.js +7 -113
- package/dist/FieldDateTime.d.ts +17 -0
- package/dist/FieldDateTime.d.ts.map +1 -0
- package/dist/FieldDateTime.js +36 -0
- package/dist/FieldDateTimeBase.d.ts +50 -0
- package/dist/FieldDateTimeBase.d.ts.map +1 -0
- package/dist/FieldDateTimeBase.js +236 -0
- package/dist/FieldDateTimeRange.d.ts +35 -0
- package/dist/FieldDateTimeRange.d.ts.map +1 -0
- package/dist/FieldDateTimeRange.js +91 -0
- package/dist/FieldTime.d.ts.map +1 -1
- package/dist/FieldTime.js +1 -0
- package/dist/index.d.ts +8 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -2
- package/dist/selection/DateList.d.ts +17 -0
- package/dist/selection/DateList.d.ts.map +1 -0
- package/dist/selection/DateList.js +68 -0
- package/dist/selection/HourList.d.ts +10 -0
- package/dist/selection/HourList.d.ts.map +1 -0
- package/dist/selection/HourList.js +23 -0
- package/dist/selection/MinuteList.d.ts +10 -0
- package/dist/selection/MinuteList.d.ts.map +1 -0
- package/dist/selection/MinuteList.js +23 -0
- package/dist/selection/MonthList.d.ts +12 -0
- package/dist/selection/MonthList.d.ts.map +1 -0
- package/dist/selection/MonthList.js +38 -0
- package/dist/selection/SecondList.d.ts +10 -0
- package/dist/selection/SecondList.d.ts.map +1 -0
- package/dist/selection/SecondList.js +23 -0
- package/dist/selection/YearList.d.ts +11 -0
- package/dist/selection/YearList.d.ts.map +1 -0
- package/dist/selection/YearList.js +27 -0
- package/dist/selection/calendar/Calendar.d.ts +18 -0
- package/dist/selection/calendar/Calendar.d.ts.map +1 -0
- package/dist/selection/calendar/Calendar.js +123 -0
- package/dist/selection/calendar/SelectableCalendar.d.ts +18 -0
- package/dist/selection/calendar/SelectableCalendar.d.ts.map +1 -0
- package/dist/selection/calendar/SelectableCalendar.js +34 -0
- package/dist/selection/calendar/SelectableRangeCalendar.d.ts +19 -0
- package/dist/selection/calendar/SelectableRangeCalendar.d.ts.map +1 -0
- package/dist/selection/calendar/SelectableRangeCalendar.js +45 -0
- package/dist/selection/calendar/index.d.ts +4 -0
- package/dist/selection/calendar/index.d.ts.map +1 -0
- package/dist/{calendar → selection/calendar}/index.js +1 -1
- package/dist/selection/index.d.ts +7 -0
- package/dist/selection/index.d.ts.map +1 -0
- package/dist/selection/index.js +6 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +12 -7
- package/dist/FieldDateBase.d.ts +0 -29
- package/dist/FieldDateBase.d.ts.map +0 -1
- package/dist/FieldDateBase.js +0 -111
- package/dist/calendar/Calendar.d.ts +0 -30
- package/dist/calendar/Calendar.d.ts.map +0 -1
- package/dist/calendar/Calendar.js +0 -203
- package/dist/calendar/CalendarSelectionAdapter.d.ts +0 -11
- package/dist/calendar/CalendarSelectionAdapter.d.ts.map +0 -1
- package/dist/calendar/CalendarSelectionAdapter.js +0 -11
- package/dist/calendar/SelectableCalendar.d.ts +0 -17
- package/dist/calendar/SelectableCalendar.d.ts.map +0 -1
- package/dist/calendar/SelectableCalendar.js +0 -35
- package/dist/calendar/index.d.ts +0 -4
- package/dist/calendar/index.d.ts.map +0 -1
package/dist/FieldDateBase.d.ts
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { InputFieldComponent } from '@3mo/field';
|
|
2
|
-
import { MaterialIcon } from '@3mo/icon';
|
|
3
|
-
import { CalendarSelectionAdapter, SelectableCalendar } from './calendar/index.js';
|
|
4
|
-
/**
|
|
5
|
-
* @attr open - Whether the date picker is open
|
|
6
|
-
* @attr hideDatePicker - Hide the date picker
|
|
7
|
-
* @attr shortcutReferenceDate - The date to use as a reference for shortcuts
|
|
8
|
-
*/
|
|
9
|
-
export declare abstract class FieldDateBase<T> extends InputFieldComponent<T> {
|
|
10
|
-
open: boolean;
|
|
11
|
-
hideDatePicker: boolean;
|
|
12
|
-
shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
|
|
13
|
-
protected readonly calendarElement?: SelectableCalendar<T>;
|
|
14
|
-
protected readonly abstract calendarSelectionAdapterConstructor: Constructor<CalendarSelectionAdapter<T>>;
|
|
15
|
-
protected handleChange(value?: T, e?: Event): void;
|
|
16
|
-
protected get isActive(): boolean;
|
|
17
|
-
static get styles(): import("@a11d/lit").CSSResult;
|
|
18
|
-
protected get template(): import("lit-html").TemplateResult<1>;
|
|
19
|
-
protected get endSlotTemplate(): import("lit-html").TemplateResult<1>;
|
|
20
|
-
protected get inputTemplate(): import("lit-html").TemplateResult<1>;
|
|
21
|
-
protected abstract inputValueToValue(value: string): T | undefined;
|
|
22
|
-
protected abstract valueToInputValue(value: T | undefined): string;
|
|
23
|
-
protected get calendarIconButtonTemplate(): import("lit-html").HTMLTemplateResult;
|
|
24
|
-
protected get popoverTemplate(): import("lit-html").HTMLTemplateResult;
|
|
25
|
-
protected get calendarTemplate(): import("lit-html").HTMLTemplateResult;
|
|
26
|
-
protected readonly calendarIconButtonIcon: MaterialIcon;
|
|
27
|
-
protected handleCalendarChange(value: T): void;
|
|
28
|
-
}
|
|
29
|
-
//# sourceMappingURL=FieldDateBase.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FieldDateBase.d.ts","sourceRoot":"","sources":["../FieldDateBase.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAElF;;;;GAIG;AACH,8BAAsB,aAAa,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IACxB,IAAI,UAAQ;IAC3B,cAAc,UAAQ;IACvB,qBAAqB,gDAAe;IAE/B,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAA;IAE3F,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,mCAAmC,EAAE,WAAW,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAA;cAEtF,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,WAAoB,MAAM,kCAgBzB;IAED,cAAuB,QAAQ,yCAK9B;IAED,cAAuB,eAAe,yCAKrC;IAED,cAAuB,aAAa,yCAYnC;IAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;uBACtC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM;IAE3E,SAAS,KAAK,0BAA0B,0CAQvC;IAED,SAAS,KAAK,eAAe,0CAU5B;IAED,SAAS,KAAK,gBAAgB,0CAQ7B;IAED,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,CAAC;CAIvC"}
|
package/dist/FieldDateBase.js
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { cache, css, html, live, nothing, property, query, style } from '@a11d/lit';
|
|
3
|
-
import { InputFieldComponent } from '@3mo/field';
|
|
4
|
-
/**
|
|
5
|
-
* @attr open - Whether the date picker is open
|
|
6
|
-
* @attr hideDatePicker - Hide the date picker
|
|
7
|
-
* @attr shortcutReferenceDate - The date to use as a reference for shortcuts
|
|
8
|
-
*/
|
|
9
|
-
export class FieldDateBase extends InputFieldComponent {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
this.open = false;
|
|
13
|
-
this.hideDatePicker = false;
|
|
14
|
-
this.shortcutReferenceDate = new DateTime;
|
|
15
|
-
this.calendarIconButtonIcon = 'today';
|
|
16
|
-
}
|
|
17
|
-
handleChange(value, e) {
|
|
18
|
-
super.handleChange(value, e);
|
|
19
|
-
this.inputStringValue = this.valueToInputValue(value);
|
|
20
|
-
}
|
|
21
|
-
get isActive() {
|
|
22
|
-
return super.isActive || this.open;
|
|
23
|
-
}
|
|
24
|
-
static get styles() {
|
|
25
|
-
return css `
|
|
26
|
-
${super.styles}
|
|
27
|
-
|
|
28
|
-
:host {
|
|
29
|
-
position: relative;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
mo-popover {
|
|
33
|
-
background: var(--mo-color-background);
|
|
34
|
-
box-shadow: var(--mo-shadow);
|
|
35
|
-
border-radius: var(--mo-border-radius);
|
|
36
|
-
color: var(--mo-color-foreground);
|
|
37
|
-
padding: 10px 4px;
|
|
38
|
-
}
|
|
39
|
-
`;
|
|
40
|
-
}
|
|
41
|
-
get template() {
|
|
42
|
-
return html `
|
|
43
|
-
${super.template}
|
|
44
|
-
${this.popoverTemplate}
|
|
45
|
-
`;
|
|
46
|
-
}
|
|
47
|
-
get endSlotTemplate() {
|
|
48
|
-
return html `
|
|
49
|
-
${super.endSlotTemplate}
|
|
50
|
-
${this.calendarIconButtonTemplate}
|
|
51
|
-
`;
|
|
52
|
-
}
|
|
53
|
-
get inputTemplate() {
|
|
54
|
-
return html `
|
|
55
|
-
<input
|
|
56
|
-
part='input'
|
|
57
|
-
?readonly=${this.readonly}
|
|
58
|
-
?required=${this.required}
|
|
59
|
-
?disabled=${this.disabled}
|
|
60
|
-
.value=${live(this.inputStringValue || '')}
|
|
61
|
-
@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
62
|
-
@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
63
|
-
>
|
|
64
|
-
`;
|
|
65
|
-
}
|
|
66
|
-
get calendarIconButtonTemplate() {
|
|
67
|
-
return this.hideDatePicker ? nothing : html `
|
|
68
|
-
<mo-icon-button tabindex='-1' dense slot='end'
|
|
69
|
-
icon=${this.calendarIconButtonIcon}
|
|
70
|
-
${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
|
|
71
|
-
@click=${() => this.open = !this.open}>
|
|
72
|
-
</mo-icon-button>
|
|
73
|
-
`;
|
|
74
|
-
}
|
|
75
|
-
get popoverTemplate() {
|
|
76
|
-
return this.hideDatePicker ? nothing : html `
|
|
77
|
-
<mo-popover tabindex='-1' openOnFocus fixed
|
|
78
|
-
.anchor=${this}
|
|
79
|
-
?open=${this.open}
|
|
80
|
-
@openChange=${(e) => this.open = e.detail}
|
|
81
|
-
>
|
|
82
|
-
${cache(this.calendarTemplate)}
|
|
83
|
-
</mo-popover>
|
|
84
|
-
`;
|
|
85
|
-
}
|
|
86
|
-
get calendarTemplate() {
|
|
87
|
-
return !this.open ? nothing : html `
|
|
88
|
-
<mo-selectable-calendar
|
|
89
|
-
.selectionAdapterConstructor=${this.calendarSelectionAdapterConstructor}
|
|
90
|
-
.value=${this.value}
|
|
91
|
-
@change=${(e) => this.handleCalendarChange(e.detail)}
|
|
92
|
-
></mo-selectable-calendar>
|
|
93
|
-
`;
|
|
94
|
-
}
|
|
95
|
-
handleCalendarChange(value) {
|
|
96
|
-
this.value = value;
|
|
97
|
-
this.change.dispatch(value);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
__decorate([
|
|
101
|
-
property({ type: Boolean, reflect: true })
|
|
102
|
-
], FieldDateBase.prototype, "open", void 0);
|
|
103
|
-
__decorate([
|
|
104
|
-
property({ type: Boolean })
|
|
105
|
-
], FieldDateBase.prototype, "hideDatePicker", void 0);
|
|
106
|
-
__decorate([
|
|
107
|
-
property({ type: Object })
|
|
108
|
-
], FieldDateBase.prototype, "shortcutReferenceDate", void 0);
|
|
109
|
-
__decorate([
|
|
110
|
-
query('mo-selectable-calendar')
|
|
111
|
-
], FieldDateBase.prototype, "calendarElement", void 0);
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { Component } from '@a11d/lit';
|
|
2
|
-
import '@a11d/array.prototype.group';
|
|
3
|
-
export declare class Calendar extends Component {
|
|
4
|
-
private static readonly startingYearDate;
|
|
5
|
-
includeWeekNumbers: boolean;
|
|
6
|
-
protected navigatingDate: import("@3mo/date-time/DateTime.js").DateTime;
|
|
7
|
-
private yearSelection;
|
|
8
|
-
private readonly selectedYearElement;
|
|
9
|
-
private readonly today;
|
|
10
|
-
private readonly years;
|
|
11
|
-
static get styles(): import("@a11d/lit").CSSResult;
|
|
12
|
-
protected get template(): import("lit-html").TemplateResult<1>;
|
|
13
|
-
private get daySelectionTemplate();
|
|
14
|
-
protected getDayTemplate(day: DateTime): import("lit-html").TemplateResult<1>;
|
|
15
|
-
protected getDefaultDayElementClasses(day: DateTime): {
|
|
16
|
-
day: boolean;
|
|
17
|
-
today: boolean;
|
|
18
|
-
isInMonth: boolean;
|
|
19
|
-
};
|
|
20
|
-
private get yearSelectionTemplate();
|
|
21
|
-
private selectYear;
|
|
22
|
-
private toggleYearSelection;
|
|
23
|
-
private rangeOf;
|
|
24
|
-
}
|
|
25
|
-
declare global {
|
|
26
|
-
interface HTMLElementTagNameMap {
|
|
27
|
-
'mo-calendar': Calendar;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
//# sourceMappingURL=Calendar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../calendar/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA0E,MAAM,WAAW,CAAA;AAE7G,OAAO,6BAA6B,CAAA;AAEpC,qBACa,QAAS,SAAQ,SAAS;IACtC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAA2B;IAEvB,kBAAkB,UAAQ;IAE7D,SAAS,CAAC,cAAc,gDAAiB;IACzC,OAAO,CAAC,aAAa,CAAQ;IAEb,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAO;IAEpE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAuE;IAC7F,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAuF;IAE7G,WAAoB,MAAM,kCAoEzB;IAED,cAAuB,QAAQ,yCAmB9B;IAED,OAAO,KAAK,oBAAoB,GA+B/B;IAED,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAMtC,SAAS,CAAC,2BAA2B,CAAC,GAAG,EAAE,QAAQ;;;;;IAWnD,OAAO,KAAK,qBAAqB,GAYhC;IAED,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,OAAO;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}
|
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
var Calendar_1;
|
|
2
|
-
import { __decorate } from "tslib";
|
|
3
|
-
import { Component, css, component, html, state, nothing, property, query, classMap, style } from '@a11d/lit';
|
|
4
|
-
import '@a11d/array.prototype.group';
|
|
5
|
-
let Calendar = Calendar_1 = class Calendar extends Component {
|
|
6
|
-
constructor() {
|
|
7
|
-
super(...arguments);
|
|
8
|
-
this.includeWeekNumbers = false;
|
|
9
|
-
this.navigatingDate = new DateTime();
|
|
10
|
-
this.yearSelection = false;
|
|
11
|
-
this.today = new DateTime().round({ smallestUnit: 'day', roundingMode: 'floor' });
|
|
12
|
-
this.years = new Array(200).fill(undefined).map((_n, i) => Calendar_1.startingYearDate.addYears(i));
|
|
13
|
-
}
|
|
14
|
-
static get styles() {
|
|
15
|
-
return css `
|
|
16
|
-
:host {
|
|
17
|
-
--mo-calendar-max-width: 325px;
|
|
18
|
-
--mo-calendar-min-height: 230px;
|
|
19
|
-
--mo-calendar-day-size: 36px;
|
|
20
|
-
--mo-calendar-week-number-width: var(--mo-calendar-day-size);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.monthHeader, .week {
|
|
24
|
-
color: var(--mo-color-gray);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.monthHeader {
|
|
28
|
-
align-items: center;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.navigatingMonth, .navigatingYear {
|
|
32
|
-
font-size: large;
|
|
33
|
-
transition: 250ms;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.navigatingYear:hover {
|
|
37
|
-
color: var(--mo-color-accent);
|
|
38
|
-
cursor: pointer;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.day, .year {
|
|
42
|
-
text-align: center;
|
|
43
|
-
border-radius: 100px;
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
transition: 250ms;
|
|
46
|
-
font-weight: 500;
|
|
47
|
-
user-select: none;
|
|
48
|
-
font-size: medium;
|
|
49
|
-
width: var(--mo-calendar-day-size);
|
|
50
|
-
-webkit-user-select: none;
|
|
51
|
-
align-items: center;
|
|
52
|
-
justify-content: center;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.year {
|
|
56
|
-
width: 100%;
|
|
57
|
-
justify-content: center;
|
|
58
|
-
align-items: center;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.selected {
|
|
62
|
-
background: var(--mo-color-accent);
|
|
63
|
-
color: var(--mo-color-on-accent) !important;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.day {
|
|
67
|
-
height: var(--mo-calendar-day-size);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.day:hover, .year:hover {
|
|
71
|
-
background: var(--mo-color-transparent-gray-3);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.day:not(.isInMonth) {
|
|
75
|
-
color: var(--mo-color-gray);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.day.today {
|
|
79
|
-
color: var(--mo-color-accent);
|
|
80
|
-
}
|
|
81
|
-
`;
|
|
82
|
-
}
|
|
83
|
-
get template() {
|
|
84
|
-
return html `
|
|
85
|
-
<mo-flex alignItems='center' justifyContent='center' ${style({ width: 'var(--mo-calendar-max-width)', minHeight: 'var(--mo-calendar-min-height)' })}>
|
|
86
|
-
<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' ${style({ width: '100%' })}>
|
|
87
|
-
<mo-icon-button icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
|
|
88
|
-
@click=${() => this.navigatingDate = this.navigatingDate.addMonths(-1)}
|
|
89
|
-
></mo-icon-button>
|
|
90
|
-
<div>
|
|
91
|
-
<a class='navigatingMonth'>${this.navigatingDate.monthName}</a>
|
|
92
|
-
<a class='navigatingYear' @click=${() => this.toggleYearSelection()}>${this.navigatingDate.yearName}</a>
|
|
93
|
-
</div>
|
|
94
|
-
<mo-icon-button icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
|
|
95
|
-
@click=${() => this.navigatingDate = this.navigatingDate.addMonths(+1)}
|
|
96
|
-
></mo-icon-button>
|
|
97
|
-
</mo-flex>
|
|
98
|
-
|
|
99
|
-
${this.yearSelection ? this.yearSelectionTemplate : this.daySelectionTemplate}
|
|
100
|
-
</mo-flex>
|
|
101
|
-
`;
|
|
102
|
-
}
|
|
103
|
-
get daySelectionTemplate() {
|
|
104
|
-
var _a, _b;
|
|
105
|
-
const start = (_a = this.navigatingDate.monthStart) === null || _a === void 0 ? void 0 : _a.weekStart;
|
|
106
|
-
const end = (_b = this.navigatingDate.monthEnd) === null || _b === void 0 ? void 0 : _b.weekEnd;
|
|
107
|
-
const range = this.rangeOf(start, end);
|
|
108
|
-
const weekDaysInMonth = [...range.groupToMap(d => String(d.weekOfYear))]
|
|
109
|
-
.sort(([, dates1], [, dates2]) => { var _a; return ((_a = dates1[0]) === null || _a === void 0 ? void 0 : _a.isBefore(dates2[0])) ? -1 : +1; });
|
|
110
|
-
return html `
|
|
111
|
-
<mo-grid class='month'
|
|
112
|
-
rows='repeat(auto-fill, var(--mo-calendar-day-size))'
|
|
113
|
-
columns=${this.includeWeekNumbers ? 'var(--mo-calendar-week-number-width) repeat(7, var(--mo-calendar-day-size))' : 'repeat(7, var(--mo-calendar-day-size))'}
|
|
114
|
-
${style({ alignItems: 'center', justifyItems: 'center' })}
|
|
115
|
-
>
|
|
116
|
-
${this.includeWeekNumbers === false ? nothing : html `<div></div>`}
|
|
117
|
-
|
|
118
|
-
${DateTime.getWeekDayNames().map(dayName => html `
|
|
119
|
-
<div class='monthHeader'>
|
|
120
|
-
${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
|
|
121
|
-
</div>
|
|
122
|
-
`)}
|
|
123
|
-
|
|
124
|
-
${weekDaysInMonth.map(([weekNumber, days]) => html `
|
|
125
|
-
${this.includeWeekNumbers === false ? nothing : html `
|
|
126
|
-
<div class='week'>
|
|
127
|
-
${weekNumber}
|
|
128
|
-
</div>
|
|
129
|
-
`}
|
|
130
|
-
|
|
131
|
-
${days.map(day => this.getDayTemplate(day))}
|
|
132
|
-
`)}
|
|
133
|
-
</mo-grid>
|
|
134
|
-
`;
|
|
135
|
-
}
|
|
136
|
-
getDayTemplate(day) {
|
|
137
|
-
return html `
|
|
138
|
-
<mo-flex class=${classMap(this.getDefaultDayElementClasses(day))}>${day.format({ day: 'numeric' })}</mo-flex>
|
|
139
|
-
`;
|
|
140
|
-
}
|
|
141
|
-
getDefaultDayElementClasses(day) {
|
|
142
|
-
var _a, _b;
|
|
143
|
-
const monthRange = this.rangeOf(day.monthStart, day.monthEnd);
|
|
144
|
-
const daysOfMonth = (_a = [...monthRange.groupToMap(day => String(day.month))]
|
|
145
|
-
.sort(([, days1], [, days2]) => days1.length > days2.length ? -1 : +1)[0]) === null || _a === void 0 ? void 0 : _a[1];
|
|
146
|
-
return {
|
|
147
|
-
day: true,
|
|
148
|
-
today: day.equals(this.today),
|
|
149
|
-
isInMonth: day.localMonth === ((_b = daysOfMonth === null || daysOfMonth === void 0 ? void 0 : daysOfMonth[0]) === null || _b === void 0 ? void 0 : _b.localMonth),
|
|
150
|
-
};
|
|
151
|
-
}
|
|
152
|
-
get yearSelectionTemplate() {
|
|
153
|
-
return html `
|
|
154
|
-
<mo-scroller ${style({ height: '*' })}>
|
|
155
|
-
<mo-grid rows='repeat(50, var(--mo-calendar-day-size))' columns='repeat(4, 1fr)'>
|
|
156
|
-
${this.years.map(year => html `
|
|
157
|
-
<mo-flex class=${classMap({ year: true, selected: this.navigatingDate.year === year.year })} @click=${() => this.selectYear(year.year)}>
|
|
158
|
-
${year.yearName}
|
|
159
|
-
</mo-flex>
|
|
160
|
-
`)}
|
|
161
|
-
</mo-grid>
|
|
162
|
-
</mo-scroller>
|
|
163
|
-
`;
|
|
164
|
-
}
|
|
165
|
-
selectYear(year) {
|
|
166
|
-
this.navigatingDate.setFullYear(year);
|
|
167
|
-
this.yearSelection = false;
|
|
168
|
-
}
|
|
169
|
-
toggleYearSelection() {
|
|
170
|
-
this.yearSelection = !this.yearSelection;
|
|
171
|
-
if (this.yearSelection) {
|
|
172
|
-
new Promise(() => setTimeout(() => {
|
|
173
|
-
this.selectedYearElement.scrollIntoView({
|
|
174
|
-
behavior: 'smooth',
|
|
175
|
-
block: 'center',
|
|
176
|
-
inline: 'center'
|
|
177
|
-
});
|
|
178
|
-
}, 1));
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
rangeOf(start, end) {
|
|
182
|
-
return new Array(Math.abs(Math.round(end.until(start).days)) + 1)
|
|
183
|
-
.fill(undefined)
|
|
184
|
-
.map((_, i) => start.addDays(i));
|
|
185
|
-
}
|
|
186
|
-
};
|
|
187
|
-
Calendar.startingYearDate = new DateTime(1900, 6, 1);
|
|
188
|
-
__decorate([
|
|
189
|
-
property({ type: Boolean, reflect: true })
|
|
190
|
-
], Calendar.prototype, "includeWeekNumbers", void 0);
|
|
191
|
-
__decorate([
|
|
192
|
-
state()
|
|
193
|
-
], Calendar.prototype, "navigatingDate", void 0);
|
|
194
|
-
__decorate([
|
|
195
|
-
state()
|
|
196
|
-
], Calendar.prototype, "yearSelection", void 0);
|
|
197
|
-
__decorate([
|
|
198
|
-
query('.year.selected')
|
|
199
|
-
], Calendar.prototype, "selectedYearElement", void 0);
|
|
200
|
-
Calendar = Calendar_1 = __decorate([
|
|
201
|
-
component('mo-calendar')
|
|
202
|
-
], Calendar);
|
|
203
|
-
export { Calendar };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { ClassInfo, HTMLTemplateResult } from '@a11d/lit';
|
|
2
|
-
import { SelectableCalendar } from './SelectableCalendar.js';
|
|
3
|
-
export declare abstract class CalendarSelectionAdapter<T> {
|
|
4
|
-
protected readonly calendar: SelectableCalendar<T>;
|
|
5
|
-
constructor(calendar: SelectableCalendar<T>);
|
|
6
|
-
get styles(): import("@a11d/lit").CSSResult;
|
|
7
|
-
abstract getDayTemplate(day: DateTime, classInfo: ClassInfo): HTMLTemplateResult;
|
|
8
|
-
abstract getNavigatingDate(value: T | undefined): DateTime;
|
|
9
|
-
protected select(value: T): void;
|
|
10
|
-
}
|
|
11
|
-
//# sourceMappingURL=CalendarSelectionAdapter.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarSelectionAdapter.d.ts","sourceRoot":"","sources":["../../calendar/CalendarSelectionAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,8BAAsB,wBAAwB,CAAC,CAAC;IACnC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;gBAA/B,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE9D,IAAI,MAAM,kCAAmB;IAE7B,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,kBAAkB;IAEhF,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,QAAQ;IAE1D,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;CAIzB"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { css } from '@a11d/lit';
|
|
2
|
-
export class CalendarSelectionAdapter {
|
|
3
|
-
constructor(calendar) {
|
|
4
|
-
this.calendar = calendar;
|
|
5
|
-
}
|
|
6
|
-
get styles() { return css ``; }
|
|
7
|
-
select(value) {
|
|
8
|
-
this.calendar.value = value;
|
|
9
|
-
this.calendar.change.dispatch(value);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { CalendarSelectionAdapter } from './index.js';
|
|
2
|
-
import { Calendar } from './Calendar.js';
|
|
3
|
-
/** @fires change {CustomEvent<T>} */
|
|
4
|
-
export declare class SelectableCalendar<T> extends Calendar {
|
|
5
|
-
readonly change: EventDispatcher<T>;
|
|
6
|
-
selectionAdapterConstructor: Constructor<CalendarSelectionAdapter<T>>;
|
|
7
|
-
value?: T;
|
|
8
|
-
private _selectionAdapter?;
|
|
9
|
-
get selectionAdapter(): CalendarSelectionAdapter<T>;
|
|
10
|
-
protected getDayTemplate(day: DateTime): import("lit-html").HTMLTemplateResult;
|
|
11
|
-
}
|
|
12
|
-
declare global {
|
|
13
|
-
interface HTMLElementTagNameMap {
|
|
14
|
-
'mo-selectable-calendar': SelectableCalendar<unknown>;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
//# sourceMappingURL=SelectableCalendar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableCalendar.d.ts","sourceRoot":"","sources":["../../calendar/SelectableCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qCAAqC;AACrC,qBACa,kBAAkB,CAAC,CAAC,CAAE,SAAQ,QAAQ;IACzC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,CAAC,CAAC,CAAA;IAEjB,2BAA2B,EAAG,WAAW,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAA;IAK/F,KAAK,CAAC,EAAE,CAAC,CAAA;IAEZ,OAAO,CAAC,iBAAiB,CAAC,CAA6B;IACvD,IAAI,gBAAgB,gCAOnB;cAEkB,cAAc,CAAC,GAAG,EAAE,QAAQ;CAG/C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAA;KACrD;CACD"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
var SelectableCalendar_1;
|
|
2
|
-
import { __decorate } from "tslib";
|
|
3
|
-
import { component, property, event } from '@a11d/lit';
|
|
4
|
-
import { Calendar } from './Calendar.js';
|
|
5
|
-
/** @fires change {CustomEvent<T>} */
|
|
6
|
-
let SelectableCalendar = SelectableCalendar_1 = class SelectableCalendar extends Calendar {
|
|
7
|
-
get selectionAdapter() {
|
|
8
|
-
if (this._selectionAdapter) {
|
|
9
|
-
return this._selectionAdapter;
|
|
10
|
-
}
|
|
11
|
-
this._selectionAdapter = new this.selectionAdapterConstructor(this);
|
|
12
|
-
SelectableCalendar_1.elementStyles.push(this._selectionAdapter.styles);
|
|
13
|
-
return this._selectionAdapter;
|
|
14
|
-
}
|
|
15
|
-
getDayTemplate(day) {
|
|
16
|
-
return this.selectionAdapter.getDayTemplate(day, this.getDefaultDayElementClasses(day));
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
__decorate([
|
|
20
|
-
event()
|
|
21
|
-
], SelectableCalendar.prototype, "change", void 0);
|
|
22
|
-
__decorate([
|
|
23
|
-
property({ type: Object })
|
|
24
|
-
], SelectableCalendar.prototype, "selectionAdapterConstructor", void 0);
|
|
25
|
-
__decorate([
|
|
26
|
-
property({
|
|
27
|
-
type: Object, updated() {
|
|
28
|
-
this.navigatingDate = this.selectionAdapter.getNavigatingDate(this.value);
|
|
29
|
-
}
|
|
30
|
-
})
|
|
31
|
-
], SelectableCalendar.prototype, "value", void 0);
|
|
32
|
-
SelectableCalendar = SelectableCalendar_1 = __decorate([
|
|
33
|
-
component('mo-selectable-calendar')
|
|
34
|
-
], SelectableCalendar);
|
|
35
|
-
export { SelectableCalendar };
|
package/dist/calendar/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|