@universal-material/web 3.0.136 → 3.0.138
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/app-bar/top-app-bar.d.ts +3 -3
- package/app-bar/top-app-bar.d.ts.map +1 -1
- package/app-bar/top-app-bar.js +2 -7
- package/app-bar/top-app-bar.js.map +1 -1
- package/button/button-base.d.ts.map +1 -1
- package/button/button-base.js +3 -8
- package/button/button-base.js.map +1 -1
- package/button/button-set.d.ts.map +1 -1
- package/button/button-set.js +2 -7
- package/button/button-set.js.map +1 -1
- package/button/button.d.ts.map +1 -1
- package/button/button.js +2 -7
- package/button/button.js.map +1 -1
- package/button/button.styles.js +1 -1
- package/button/button.styles.js.map +1 -1
- package/button/fab.d.ts.map +1 -1
- package/button/fab.js +2 -7
- package/button/fab.js.map +1 -1
- package/button/icon-button.d.ts.map +1 -1
- package/button/icon-button.js +2 -7
- package/button/icon-button.js.map +1 -1
- package/button/icon-button.styles.js +1 -1
- package/button/icon-button.styles.js.map +1 -1
- package/button-field/button-field.d.ts +18 -0
- package/button-field/button-field.d.ts.map +1 -0
- package/button-field/button-field.js +54 -0
- package/button-field/button-field.js.map +1 -0
- package/button-field/button-field.styles.d.ts +2 -0
- package/button-field/button-field.styles.d.ts.map +1 -0
- package/button-field/button-field.styles.js +17 -0
- package/button-field/button-field.styles.js.map +1 -0
- package/calendar/calendar-adapter.d.ts +6 -0
- package/calendar/calendar-adapter.d.ts.map +1 -0
- package/calendar/calendar-adapter.js +2 -0
- package/calendar/calendar-adapter.js.map +1 -0
- package/calendar/calendar-base.d.ts +30 -0
- package/calendar/calendar-base.d.ts.map +1 -0
- package/calendar/calendar-base.js +188 -0
- package/calendar/calendar-base.js.map +1 -0
- package/calendar/calendar-base.styles.d.ts +2 -0
- package/calendar/calendar-base.styles.d.ts.map +1 -0
- package/calendar/calendar-base.styles.js +81 -0
- package/calendar/calendar-base.styles.js.map +1 -0
- package/calendar/calendar.d.ts +11 -0
- package/calendar/calendar.d.ts.map +1 -0
- package/calendar/calendar.js +43 -0
- package/calendar/calendar.js.map +1 -0
- package/calendar/calendar.styles.d.ts +2 -0
- package/calendar/calendar.styles.d.ts.map +1 -0
- package/calendar/calendar.styles.js +5 -0
- package/calendar/calendar.styles.js.map +1 -0
- package/calendar/default-calendar-adapter.d.ts +10 -0
- package/calendar/default-calendar-adapter.d.ts.map +1 -0
- package/calendar/default-calendar-adapter.js +32 -0
- package/calendar/default-calendar-adapter.js.map +1 -0
- package/calendar/range-calendar.d.ts +16 -0
- package/calendar/range-calendar.d.ts.map +1 -0
- package/calendar/range-calendar.js +113 -0
- package/calendar/range-calendar.js.map +1 -0
- package/calendar/range-calendar.styles.d.ts +2 -0
- package/calendar/range-calendar.styles.d.ts.map +1 -0
- package/calendar/range-calendar.styles.js +41 -0
- package/calendar/range-calendar.styles.js.map +1 -0
- package/card/card-content.d.ts.map +1 -1
- package/card/card-content.js +1 -6
- package/card/card-content.js.map +1 -1
- package/card/card-media.d.ts.map +1 -1
- package/card/card-media.js +1 -6
- package/card/card-media.js.map +1 -1
- package/card/card.js +1 -6
- package/card/card.js.map +1 -1
- package/checkbox/checkbox-list-item.js +1 -6
- package/checkbox/checkbox-list-item.js.map +1 -1
- package/checkbox/checkbox.d.ts.map +1 -1
- package/checkbox/checkbox.js +2 -8
- package/checkbox/checkbox.js.map +1 -1
- package/chip/chip-set.d.ts.map +1 -1
- package/chip/chip-set.js +2 -7
- package/chip/chip-set.js.map +1 -1
- package/chip/chip.d.ts.map +1 -1
- package/chip/chip.js +2 -7
- package/chip/chip.js.map +1 -1
- package/chip-field/chip-field.d.ts.map +1 -1
- package/chip-field/chip-field.js +2 -7
- package/chip-field/chip-field.js.map +1 -1
- package/config.d.ts.map +1 -1
- package/config.js +8 -8
- package/config.js.map +1 -1
- package/custom-elements.json +7991 -5931
- package/datepicker/datepicker.d.ts +1 -0
- package/datepicker/datepicker.d.ts.map +1 -0
- package/datepicker/datepicker.js +2 -0
- package/datepicker/datepicker.js.map +1 -0
- package/datepicker/datepicker.styles.d.ts +2 -0
- package/datepicker/datepicker.styles.d.ts.map +1 -0
- package/datepicker/datepicker.styles.js +5 -0
- package/datepicker/datepicker.styles.js.map +1 -0
- package/dialog/confirm-dialog-builder.js.map +1 -1
- package/dialog/dialog-builder.js.map +1 -1
- package/dialog/dialog.d.ts.map +1 -1
- package/dialog/dialog.js +2 -7
- package/dialog/dialog.js.map +1 -1
- package/dialog/message-dialog-builder.js.map +1 -1
- package/elevation/elevation.js +2 -7
- package/elevation/elevation.js.map +1 -1
- package/field/field-base.d.ts +2 -2
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js +1 -6
- package/field/field-base.js.map +1 -1
- package/field/field-base.styles.d.ts.map +1 -1
- package/field/field-base.styles.js +4 -3
- package/field/field-base.styles.js.map +1 -1
- package/field/field-defaults.d.ts.map +1 -1
- package/field/field-defaults.js.map +1 -1
- package/field/field.d.ts +1 -1
- package/field/field.d.ts.map +1 -1
- package/field/field.js +1 -6
- package/field/field.js.map +1 -1
- package/index.d.ts +4 -0
- package/index.d.ts.map +1 -1
- package/index.js +4 -0
- package/index.js.map +1 -1
- package/list/list-item.js +1 -6
- package/list/list-item.js.map +1 -1
- package/list/list.js +1 -6
- package/list/list.js.map +1 -1
- package/menu/menu-item.d.ts.map +1 -1
- package/menu/menu-item.js +2 -7
- package/menu/menu-item.js.map +1 -1
- package/menu/menu.d.ts.map +1 -1
- package/menu/menu.js +8 -13
- package/menu/menu.js.map +1 -1
- package/navigation/drawer-item.d.ts.map +1 -1
- package/navigation/drawer-item.js +3 -8
- package/navigation/drawer-item.js.map +1 -1
- package/navigation/drawer.js +2 -7
- package/navigation/drawer.js.map +1 -1
- package/navigation/side-navigation.d.ts.map +1 -1
- package/navigation/side-navigation.js +2 -8
- package/navigation/side-navigation.js.map +1 -1
- package/package.json +40 -31
- package/progress/circular-progress.d.ts.map +1 -1
- package/progress/circular-progress.js +1 -6
- package/progress/circular-progress.js.map +1 -1
- package/progress/progress-bar.d.ts.map +1 -1
- package/progress/progress-bar.js +1 -6
- package/progress/progress-bar.js.map +1 -1
- package/radio/radio-list-item.js +1 -6
- package/radio/radio-list-item.js.map +1 -1
- package/radio/radio.d.ts.map +1 -1
- package/radio/radio.js +2 -7
- package/radio/radio.js.map +1 -1
- package/ripple/ripple.d.ts.map +1 -1
- package/ripple/ripple.js +7 -12
- package/ripple/ripple.js.map +1 -1
- package/ripple/ripple.styles.js +1 -1
- package/ripple/ripple.styles.js.map +1 -1
- package/scss/_css-vars.scss +7 -10
- package/scss/_functions.scss +2 -2
- package/scss/_global.scss +5 -1
- package/scss/_reboot.scss +4 -4
- package/scss/_utilities.scss +1 -0
- package/scss/mixins/_colors.scss +0 -1
- package/scss/mixins/_text-bg.scss +8 -8
- package/scss/table/_table.scss +3 -3
- package/scss/utilities/_scheme.scss +9 -0
- package/select/extended-option.d.ts.map +1 -1
- package/select/extended-option.js.map +1 -1
- package/select/option.d.ts.map +1 -1
- package/select/option.js +2 -9
- package/select/option.js.map +1 -1
- package/select/option.styles.js +1 -1
- package/select/option.styles.js.map +1 -1
- package/select/select-navigation-controller.js +1 -1
- package/select/select-navigation-controller.js.map +1 -1
- package/select/select.d.ts.map +1 -1
- package/select/select.js +2 -8
- package/select/select.js.map +1 -1
- package/shared/button-wrapper.d.ts.map +1 -1
- package/shared/button-wrapper.js +3 -7
- package/shared/button-wrapper.js.map +1 -1
- package/shared/button-wrapper.styles.js +2 -2
- package/shared/button-wrapper.styles.js.map +1 -1
- package/shared/char-count-text-field/native-text-field-wrapper.d.ts.map +1 -1
- package/shared/char-count-text-field/native-text-field-wrapper.js +1 -6
- package/shared/char-count-text-field/native-text-field-wrapper.js.map +1 -1
- package/shared/compare-text.d.ts +1 -1
- package/shared/compare-text.d.ts.map +1 -1
- package/shared/compare-text.js +3 -3
- package/shared/compare-text.js.map +1 -1
- package/shared/events/redispatch-event.d.ts +1 -1
- package/shared/events/redispatch-event.d.ts.map +1 -1
- package/shared/events/redispatch-event.js +2 -2
- package/shared/events/redispatch-event.js.map +1 -1
- package/shared/extract-template-html.d.ts +1 -1
- package/shared/extract-template-html.d.ts.map +1 -1
- package/shared/extract-template-html.js +2 -2
- package/shared/extract-template-html.js.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.js +4 -2
- package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
- package/shared/mixin-attribute-properties.d.ts.map +1 -1
- package/shared/mixin-attribute-properties.js +4 -4
- package/shared/mixin-attribute-properties.js.map +1 -1
- package/shared/mixin.d.ts.map +1 -1
- package/shared/mixin.js.map +1 -1
- package/shared/normalize-text.d.ts +1 -1
- package/shared/normalize-text.d.ts.map +1 -1
- package/shared/normalize-text.js +2 -2
- package/shared/normalize-text.js.map +1 -1
- package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
- package/shared/selection-control/selection-control-list-item.js +1 -6
- package/shared/selection-control/selection-control-list-item.js.map +1 -1
- package/shared/selection-control/selection-control.d.ts +2 -2
- package/shared/selection-control/selection-control.d.ts.map +1 -1
- package/shared/selection-control/selection-control.js +9 -14
- package/shared/selection-control/selection-control.js.map +1 -1
- package/shared/sets/set-base.d.ts.map +1 -1
- package/shared/sets/set-base.js +1 -6
- package/shared/sets/set-base.js.map +1 -1
- package/shared/text-field-base/text-field-base.d.ts.map +1 -1
- package/shared/text-field-base/text-field-base.js +2 -7
- package/shared/text-field-base/text-field-base.js.map +1 -1
- package/snackbar/snackbar.d.ts +1 -1
- package/snackbar/snackbar.d.ts.map +1 -1
- package/snackbar/snackbar.js +2 -7
- package/snackbar/snackbar.js.map +1 -1
- package/switch/switch-list-item.js +1 -6
- package/switch/switch-list-item.js.map +1 -1
- package/switch/switch.d.ts.map +1 -1
- package/switch/switch.js +2 -7
- package/switch/switch.js.map +1 -1
- package/switch/switch.styles.js +1 -1
- package/switch/switch.styles.js.map +1 -1
- package/tab-bar/tab-bar.d.ts +4 -4
- package/tab-bar/tab-bar.d.ts.map +1 -1
- package/tab-bar/tab-bar.js +8 -12
- package/tab-bar/tab-bar.js.map +1 -1
- package/tab-bar/tab.d.ts.map +1 -1
- package/tab-bar/tab.js +2 -7
- package/tab-bar/tab.js.map +1 -1
- package/text-area/text-area.d.ts.map +1 -1
- package/text-area/text-area.js +2 -7
- package/text-area/text-area.js.map +1 -1
- package/text-field/text-field.d.ts +1 -0
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +7 -7
- package/text-field/text-field.js.map +1 -1
- package/text-field/text-field.styles.js +2 -2
- package/text-field/text-field.styles.js.map +1 -1
- package/theme/css-var-builder.d.ts +1 -0
- package/theme/css-var-builder.d.ts.map +1 -1
- package/theme/css-var-builder.js +4 -2
- package/theme/css-var-builder.js.map +1 -1
- package/theme/neutral-colors.d.ts.map +1 -1
- package/theme/neutral-colors.js +1 -1
- package/theme/neutral-colors.js.map +1 -1
- package/theme/theme-builder.d.ts +1 -1
- package/theme/theme-builder.d.ts.map +1 -1
- package/theme/theme-builder.js +20 -33
- package/theme/theme-builder.js.map +1 -1
- package/typeahead/highlight.d.ts.map +1 -1
- package/typeahead/highlight.js +6 -15
- package/typeahead/highlight.js.map +1 -1
- package/typeahead/typeahead.d.ts.map +1 -1
- package/typeahead/typeahead.js +4 -8
- package/typeahead/typeahead.js.map +1 -1
- package/css/universal-material.css +0 -4700
- package/css/universal-material.min.css +0 -2
- package/theme/rgb-color.d.ts +0 -9
- package/theme/rgb-color.d.ts.map +0 -1
- package/theme/rgb-color.js +0 -13
- package/theme/rgb-color.js.map +0 -1
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, LitElement } from 'lit';
|
|
3
|
+
import { property, state } from 'lit/decorators.js';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
+
import { styles } from './calendar-base.styles.js';
|
|
6
|
+
import { DefaultCalendarAdapter } from './default-calendar-adapter.js';
|
|
7
|
+
export class UmCalendarBase extends LitElement {
|
|
8
|
+
static { this.styles = [styles]; }
|
|
9
|
+
get year() {
|
|
10
|
+
return this._displayingMonthDate.getFullYear();
|
|
11
|
+
}
|
|
12
|
+
set year(year) {
|
|
13
|
+
this._displayingMonthDate.setFullYear(year);
|
|
14
|
+
this._displayingMonthDate = new Date(this._displayingMonthDate);
|
|
15
|
+
}
|
|
16
|
+
get month() {
|
|
17
|
+
return this._displayingMonthDate.getMonth();
|
|
18
|
+
}
|
|
19
|
+
set month(month) {
|
|
20
|
+
this._displayingMonthDate.setMonth(month);
|
|
21
|
+
this._displayingMonthDate = new Date(this._displayingMonthDate);
|
|
22
|
+
}
|
|
23
|
+
#currentDate;
|
|
24
|
+
constructor() {
|
|
25
|
+
super();
|
|
26
|
+
this.weekDays = [];
|
|
27
|
+
this.dateRenderer = null;
|
|
28
|
+
this.dateOutsideMonth = false;
|
|
29
|
+
this.#currentDate = new Date();
|
|
30
|
+
this.locale = null;
|
|
31
|
+
this._innerLocale = navigator.language;
|
|
32
|
+
this.adapter = new DefaultCalendarAdapter();
|
|
33
|
+
this.#currentDate.setHours(0);
|
|
34
|
+
this.#currentDate.setMinutes(0);
|
|
35
|
+
this.#currentDate.setSeconds(0);
|
|
36
|
+
this.#currentDate.setMilliseconds(0);
|
|
37
|
+
this._displayingMonthDate = new Date(this.#currentDate);
|
|
38
|
+
this._displayingMonthDate.setDate(1);
|
|
39
|
+
}
|
|
40
|
+
connectedCallback() {
|
|
41
|
+
super.connectedCallback();
|
|
42
|
+
this.#setLocaleDependantProperties();
|
|
43
|
+
window.addEventListener('languagechange', () => {
|
|
44
|
+
if (this.locale !== null) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
this._innerLocale = navigator.language;
|
|
48
|
+
this.#setLocaleDependantProperties();
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
render() {
|
|
52
|
+
return html `
|
|
53
|
+
<div>
|
|
54
|
+
<u-button-set>
|
|
55
|
+
<u-button class="month-button" type="button" variant="text">
|
|
56
|
+
${this.adapter.getMonth(this.#getDisplayingMonthDate())}
|
|
57
|
+
</u-button>
|
|
58
|
+
<u-icon-button class="previous-month-button" @click=${() => this.#addMonth(-1)}>
|
|
59
|
+
<svg
|
|
60
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
61
|
+
height="1em"
|
|
62
|
+
viewBox="0 -960 960 960"
|
|
63
|
+
width="1em"
|
|
64
|
+
fill="currentColor">
|
|
65
|
+
<path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" />
|
|
66
|
+
</svg>
|
|
67
|
+
</u-icon-button>
|
|
68
|
+
<u-icon-button @click=${() => this.#addMonth(1)}>
|
|
69
|
+
<svg
|
|
70
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
71
|
+
height="1em"
|
|
72
|
+
viewBox="0 -960 960 960"
|
|
73
|
+
width="1em"
|
|
74
|
+
fill="currentColor">
|
|
75
|
+
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
|
|
76
|
+
</svg>
|
|
77
|
+
</u-icon-button>
|
|
78
|
+
</u-button-set>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="calendar ${this._getCalendarClassMap()}">${this.#renderWeekDays()}${this.#renderDays()}</div>
|
|
81
|
+
`;
|
|
82
|
+
}
|
|
83
|
+
#renderWeekDays() {
|
|
84
|
+
return this.weekDays.map(weekDay => html `
|
|
85
|
+
<div class="calendar-item">
|
|
86
|
+
<span class="week-day">${weekDay}</span>
|
|
87
|
+
</div>
|
|
88
|
+
`);
|
|
89
|
+
}
|
|
90
|
+
#getDisplayingMonthDate() {
|
|
91
|
+
return this._getDateFromIsoDate(`${this.year}-${this.month + 1}-1`);
|
|
92
|
+
}
|
|
93
|
+
#renderDays() {
|
|
94
|
+
const date = new Date(this._displayingMonthDate);
|
|
95
|
+
date.setDate(date.getDate() - date.getDay());
|
|
96
|
+
const month = this.month;
|
|
97
|
+
const year = this.year;
|
|
98
|
+
const daysTemplates = [];
|
|
99
|
+
do {
|
|
100
|
+
for (let i = 0; i < 7; i++) {
|
|
101
|
+
const dateOutsideMonth = date.getMonth() !== month;
|
|
102
|
+
const dateClasses = this._getSelectedDateClasses(date);
|
|
103
|
+
if (!Object.keys(dateClasses).length && this.#currentDate.getTime() === date.getTime()) {
|
|
104
|
+
dateClasses['current-date'] = true;
|
|
105
|
+
}
|
|
106
|
+
if (dateOutsideMonth) {
|
|
107
|
+
dateClasses['date-outside-month'] = true;
|
|
108
|
+
}
|
|
109
|
+
const classes = classMap(dateClasses);
|
|
110
|
+
const dateTemplate = dateOutsideMonth && !this.dateOutsideMonth
|
|
111
|
+
? null
|
|
112
|
+
: html `
|
|
113
|
+
<u-ripple></u-ripple>
|
|
114
|
+
<span class="date">
|
|
115
|
+
${this.dateRenderer
|
|
116
|
+
? this.dateRenderer(new Date(date), this.adapter.getDay(date))
|
|
117
|
+
: this.adapter.getDay(date)}
|
|
118
|
+
</span>
|
|
119
|
+
`;
|
|
120
|
+
daysTemplates.push(html `
|
|
121
|
+
<div
|
|
122
|
+
class="calendar-item ${classes}"
|
|
123
|
+
@click=${this.#handleDateClick(new Date(date))}>
|
|
124
|
+
${dateTemplate}
|
|
125
|
+
</div>
|
|
126
|
+
`);
|
|
127
|
+
date.setDate(date.getDate() + 1);
|
|
128
|
+
}
|
|
129
|
+
} while (date.getMonth() <= month && date.getFullYear() <= year);
|
|
130
|
+
return daysTemplates;
|
|
131
|
+
}
|
|
132
|
+
#handleDateClick(date) {
|
|
133
|
+
return () => this._selectDate(date);
|
|
134
|
+
}
|
|
135
|
+
_getCalendarClassMap() {
|
|
136
|
+
return null;
|
|
137
|
+
}
|
|
138
|
+
_getDateFromIsoDate(isoDate) {
|
|
139
|
+
const date = new Date(isoDate);
|
|
140
|
+
const offsetMs = date.getTimezoneOffset() * 60 * 1000;
|
|
141
|
+
date.setTime(date.getTime() + offsetMs);
|
|
142
|
+
return date;
|
|
143
|
+
}
|
|
144
|
+
_getDateString(date) {
|
|
145
|
+
if (!date) {
|
|
146
|
+
return '';
|
|
147
|
+
}
|
|
148
|
+
return Intl
|
|
149
|
+
.DateTimeFormat('en-CA', {
|
|
150
|
+
year: 'numeric',
|
|
151
|
+
month: '2-digit',
|
|
152
|
+
day: '2-digit',
|
|
153
|
+
})
|
|
154
|
+
.format(date);
|
|
155
|
+
}
|
|
156
|
+
_getDateFromString(dateString) {
|
|
157
|
+
if (!dateString) {
|
|
158
|
+
return null;
|
|
159
|
+
}
|
|
160
|
+
const dateTime = Date.parse(dateString);
|
|
161
|
+
if (!dateTime && dateTime !== 0) {
|
|
162
|
+
return null;
|
|
163
|
+
}
|
|
164
|
+
return this._getDateFromIsoDate(dateString);
|
|
165
|
+
}
|
|
166
|
+
#addMonth(value) {
|
|
167
|
+
this.month += value;
|
|
168
|
+
}
|
|
169
|
+
#setLocaleDependantProperties() {
|
|
170
|
+
this.weekDays = this.adapter.getWeekDays(this._innerLocale);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
__decorate([
|
|
174
|
+
state()
|
|
175
|
+
], UmCalendarBase.prototype, "weekDays", void 0);
|
|
176
|
+
__decorate([
|
|
177
|
+
state()
|
|
178
|
+
], UmCalendarBase.prototype, "dateRenderer", void 0);
|
|
179
|
+
__decorate([
|
|
180
|
+
property({ type: Boolean })
|
|
181
|
+
], UmCalendarBase.prototype, "dateOutsideMonth", void 0);
|
|
182
|
+
__decorate([
|
|
183
|
+
state()
|
|
184
|
+
], UmCalendarBase.prototype, "_displayingMonthDate", void 0);
|
|
185
|
+
__decorate([
|
|
186
|
+
property()
|
|
187
|
+
], UmCalendarBase.prototype, "locale", void 0);
|
|
188
|
+
//# sourceMappingURL=calendar-base.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-base.js","sourceRoot":"","sources":["../../src/calendar/calendar-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { DirectiveResult } from 'lit-html/directive.js';\nimport { ClassMapDirective } from 'lit-html/directives/class-map';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './calendar-base.styles.js';\nimport { DefaultCalendarAdapter } from './default-calendar-adapter.js';\n\nexport abstract class UmCalendarBase extends LitElement {\n static override styles: CSSResultGroup = [styles];\n\n @state() weekDays: string[] = [];\n @state() dateRenderer: ((date: Date, day: string) => HTMLElement) | null = null;\n @property({ type: Boolean }) dateOutsideMonth = false;\n\n get year(): number {\n return this._displayingMonthDate.getFullYear();\n }\n\n set year(year: number) {\n this._displayingMonthDate.setFullYear(year);\n this._displayingMonthDate = new Date(this._displayingMonthDate);\n }\n\n get month(): number {\n return this._displayingMonthDate.getMonth();\n }\n\n set month(month: number) {\n this._displayingMonthDate.setMonth(month);\n this._displayingMonthDate = new Date(this._displayingMonthDate);\n }\n\n readonly #currentDate = new Date();\n @state() _displayingMonthDate: Date;\n\n @property() locale: string | null = null;\n _innerLocale: string = navigator.language;\n adapter = new DefaultCalendarAdapter();\n\n protected constructor() {\n super();\n\n this.#currentDate.setHours(0);\n this.#currentDate.setMinutes(0);\n this.#currentDate.setSeconds(0);\n this.#currentDate.setMilliseconds(0);\n this._displayingMonthDate = new Date(this.#currentDate);\n this._displayingMonthDate.setDate(1);\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#setLocaleDependantProperties();\n\n window.addEventListener('languagechange', () => {\n if (this.locale !== null) {\n return;\n }\n\n this._innerLocale = navigator.language;\n this.#setLocaleDependantProperties();\n });\n }\n\n override render(): HTMLTemplateResult {\n return html`\n <div>\n <u-button-set>\n <u-button class=\"month-button\" type=\"button\" variant=\"text\">\n ${this.adapter.getMonth(this.#getDisplayingMonthDate())}\n </u-button>\n <u-icon-button class=\"previous-month-button\" @click=${() => this.#addMonth(-1)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 -960 960 960\"\n width=\"1em\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </u-icon-button>\n <u-icon-button @click=${() => this.#addMonth(1)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 -960 960 960\"\n width=\"1em\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </u-icon-button>\n </u-button-set>\n </div>\n <div class=\"calendar ${this._getCalendarClassMap()}\">${this.#renderWeekDays()}${this.#renderDays()}</div>\n `;\n }\n\n #renderWeekDays(): HTMLTemplateResult[] {\n return this.weekDays.map(\n weekDay =>\n html`\n <div class=\"calendar-item\">\n <span class=\"week-day\">${weekDay}</span>\n </div>\n `,\n );\n }\n\n #getDisplayingMonthDate(): Date {\n return this._getDateFromIsoDate(`${this.year}-${this.month + 1}-1`);\n }\n\n #renderDays(): HTMLTemplateResult[] {\n const date = new Date(this._displayingMonthDate);\n\n date.setDate(date.getDate() - date.getDay());\n\n const month = this.month;\n const year = this.year;\n\n const daysTemplates: HTMLTemplateResult[] = [];\n\n do {\n for (let i = 0; i < 7; i++) {\n const dateOutsideMonth = date.getMonth() !== month;\n\n const dateClasses = this._getSelectedDateClasses(date);\n\n if (!Object.keys(dateClasses).length && this.#currentDate.getTime() === date.getTime()) {\n dateClasses['current-date'] = true;\n }\n\n if (dateOutsideMonth) {\n dateClasses['date-outside-month'] = true;\n }\n\n const classes = classMap(dateClasses);\n\n const dateTemplate = dateOutsideMonth && !this.dateOutsideMonth\n ? null\n : html`\n <u-ripple></u-ripple>\n <span class=\"date\">\n ${this.dateRenderer\n ? this.dateRenderer(new Date(date), this.adapter.getDay(date))\n : this.adapter.getDay(date)}\n </span>\n `;\n\n daysTemplates.push(html`\n <div\n class=\"calendar-item ${classes}\"\n @click=${this.#handleDateClick(new Date(date))}>\n ${dateTemplate}\n </div>\n `);\n\n date.setDate(date.getDate() + 1);\n }\n } while (date.getMonth() <= month && date.getFullYear() <= year);\n\n return daysTemplates;\n }\n\n #handleDateClick(date: Date): () => void {\n return () => this._selectDate(date);\n }\n\n protected _getCalendarClassMap(): DirectiveResult<typeof ClassMapDirective> | null {\n return null;\n }\n\n protected abstract _selectDate(date: Date): void;\n protected abstract _getSelectedDateClasses(date: Date): Record<string, boolean>;\n\n protected _getDateFromIsoDate(isoDate: string): Date {\n const date = new Date(isoDate);\n const offsetMs = date.getTimezoneOffset() * 60 * 1000;\n date.setTime(date.getTime() + offsetMs);\n\n return date;\n }\n\n protected _getDateString(date: Date | null): string {\n\n if (!date) {\n return '';\n }\n\n return Intl\n .DateTimeFormat('en-CA', {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n })\n .format(date);\n }\n\n protected _getDateFromString(dateString: string): Date | null {\n if (!dateString) {\n return null;\n }\n\n const dateTime = Date.parse(dateString);\n\n if (!dateTime && dateTime !== 0) {\n return null;\n }\n\n return this._getDateFromIsoDate(dateString);\n }\n\n #addMonth(value: number): void {\n this.month += value;\n }\n\n #setLocaleDependantProperties(): void {\n this.weekDays = this.adapter.getWeekDays(this._innerLocale);\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-base.styles.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar-base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8ElB,CAAC"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `
|
|
3
|
+
:host {
|
|
4
|
+
--_date-size: var(--u-calendar-date-size, 40px);
|
|
5
|
+
display: inline-block;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.calendar {
|
|
9
|
+
display: grid;
|
|
10
|
+
grid-template-columns: repeat(7, 48px);
|
|
11
|
+
align-items: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.calendar-item {
|
|
15
|
+
--u-ripple-border-radius: 9999px;
|
|
16
|
+
position: relative;
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
width: 48px;
|
|
21
|
+
height: 48px;
|
|
22
|
+
}
|
|
23
|
+
.calendar-item:has(.date) {
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
}
|
|
26
|
+
.calendar-item u-ripple {
|
|
27
|
+
padding: 4px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.month-button {
|
|
31
|
+
--u-common-button-padding: var(--u-calendar-month-button--padding, 16px);
|
|
32
|
+
color: var(--u-calendar-month-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.previous-month-button {
|
|
36
|
+
margin-inline-start: auto;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.week-day {
|
|
40
|
+
font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
|
|
41
|
+
line-height: var(--u-calendar-week-day-line-height, var(--u-body-l-line-height, 1.5rem));
|
|
42
|
+
font-size: var(--u-calendar-week-day-font-size, var(--u-body-l-font-size, 1rem));
|
|
43
|
+
letter-spacing: var(--u-calendar-week-day-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
|
|
44
|
+
font-weight: var(--u-calendar-week-day-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
|
|
45
|
+
color: var(--u-calendar-week-day-color, var(--u-color-on-surface, rgb(29, 27, 32)));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.date {
|
|
49
|
+
font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
|
|
50
|
+
line-height: var(--u-calendar-date-line-height, var(--u-body-l-line-height, 1.5rem));
|
|
51
|
+
font-size: var(--u-calendar-date-font-size, var(--u-body-l-font-size, 1rem));
|
|
52
|
+
letter-spacing: var(--u-calendar-date-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
|
|
53
|
+
font-weight: var(--u-calendar-date-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
width: var(--_date-size);
|
|
58
|
+
height: var(--_date-size);
|
|
59
|
+
border-radius: var(--u-calendar-date-border-radius, 9999px);
|
|
60
|
+
color: var(--u-calendar-date-color, var(--u-color-on-surface, rgb(29, 27, 32)));
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.date-outside-month .date {
|
|
64
|
+
color: var(--u-calendar-date-out-of-month-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.current-date .date {
|
|
68
|
+
border: 1px solid var(--u-calendar-current-date-color, var(--u-color-primary, rgb(103, 80, 164)));
|
|
69
|
+
color: var(--u-calendar-current-date-color, var(--u-color-primary, rgb(103, 80, 164)));
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.selected-date .date {
|
|
73
|
+
background-color: var(--u-calendar-selected-date-background-color, var(--u-color-primary, rgb(103, 80, 164)));
|
|
74
|
+
color: var(--u-calendar-selected-date-color, var(--u-color-on-primary, rgb(255, 255, 255)));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.date-out-of-month {
|
|
78
|
+
color: var(--u-calendar-date-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
79
|
+
}
|
|
80
|
+
`;
|
|
81
|
+
//# sourceMappingURL=calendar-base.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-base.styles.js","sourceRoot":"","sources":["../../src/calendar/calendar-base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_date-size: var(--u-calendar-date-size, 40px);\n display: inline-block;\n }\n\n .calendar {\n display: grid;\n grid-template-columns: repeat(7, 48px);\n align-items: center;\n }\n\n .calendar-item {\n --u-ripple-border-radius: 9999px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n }\n .calendar-item:has(.date) {\n cursor: pointer;\n }\n .calendar-item u-ripple {\n padding: 4px;\n }\n\n .month-button {\n --u-common-button-padding: var(--u-calendar-month-button--padding, 16px);\n color: var(--u-calendar-month-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .previous-month-button {\n margin-inline-start: auto;\n }\n\n .week-day {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-calendar-week-day-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-calendar-week-day-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-calendar-week-day-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-calendar-week-day-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n color: var(--u-calendar-week-day-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n\n .date {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-calendar-date-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-calendar-date-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-calendar-date-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-calendar-date-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--_date-size);\n height: var(--_date-size);\n border-radius: var(--u-calendar-date-border-radius, 9999px);\n color: var(--u-calendar-date-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n\n .date-outside-month .date {\n color: var(--u-calendar-date-out-of-month-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .current-date .date {\n border: 1px solid var(--u-calendar-current-date-color, var(--u-color-primary, rgb(103, 80, 164)));\n color: var(--u-calendar-current-date-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .selected-date .date {\n background-color: var(--u-calendar-selected-date-background-color, var(--u-color-primary, rgb(103, 80, 164)));\n color: var(--u-calendar-selected-date-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n .date-out-of-month {\n color: var(--u-calendar-date-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n`;\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
2
|
+
import { UmCalendarBase } from './calendar-base';
|
|
3
|
+
export declare class UmCalendar extends UmCalendarBase {
|
|
4
|
+
static styles: CSSResultGroup;
|
|
5
|
+
dateValue: Date | null;
|
|
6
|
+
get value(): string;
|
|
7
|
+
set value(value: string);
|
|
8
|
+
protected _selectDate(date: Date): void;
|
|
9
|
+
protected _getSelectedDateClasses(date: Date): Record<string, boolean>;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=calendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGjD,qBACa,UAAW,SAAQ,cAAc;IAC5C,OAAgB,MAAM,EAAE,cAAc,CAAmC;IAEhE,SAAS,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEvC,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;cAEkB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;cAe7B,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAMhF"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
3
|
+
import { UmCalendarBase } from './calendar-base';
|
|
4
|
+
import { styles } from './calendar.styles.js';
|
|
5
|
+
let UmCalendar = class UmCalendar extends UmCalendarBase {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.dateValue = null;
|
|
9
|
+
}
|
|
10
|
+
static { this.styles = [styles, UmCalendarBase.styles]; }
|
|
11
|
+
get value() {
|
|
12
|
+
return this._getDateString(this.dateValue);
|
|
13
|
+
}
|
|
14
|
+
set value(value) {
|
|
15
|
+
this.dateValue = this._getDateFromString(value);
|
|
16
|
+
}
|
|
17
|
+
_selectDate(date) {
|
|
18
|
+
this.dateValue = date;
|
|
19
|
+
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
20
|
+
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
21
|
+
if (this.month === date.getMonth() && this.year === date.getFullYear()) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
this.month = date.getMonth();
|
|
25
|
+
this.year = date.getFullYear();
|
|
26
|
+
}
|
|
27
|
+
_getSelectedDateClasses(date) {
|
|
28
|
+
return this.dateValue?.getTime() === date.getTime()
|
|
29
|
+
? { 'selected-date': true }
|
|
30
|
+
: {};
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
__decorate([
|
|
34
|
+
state()
|
|
35
|
+
], UmCalendar.prototype, "dateValue", void 0);
|
|
36
|
+
__decorate([
|
|
37
|
+
property()
|
|
38
|
+
], UmCalendar.prototype, "value", null);
|
|
39
|
+
UmCalendar = __decorate([
|
|
40
|
+
customElement('u-calendar')
|
|
41
|
+
], UmCalendar);
|
|
42
|
+
export { UmCalendar };
|
|
43
|
+
//# sourceMappingURL=calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../src/calendar/calendar.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,cAAc;IAAvC;;QAGI,cAAS,GAAgB,IAAI,CAAC;IAgCzC,CAAC;aAlCiB,WAAM,GAAmB,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,AAAlD,CAAmD;IAKzE,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC7C,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAEkB,WAAW,CAAC,IAAU;QACvC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC/E,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAE3D,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvE,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAEjC,CAAC;IAEkB,uBAAuB,CAAC,IAAU;QACnD,OAAO,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YACjD,CAAC,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE;YAC3B,CAAC,CAAC,EAAE,CAAC;IAET,CAAC;;AA/BQ;IAAR,KAAK,EAAE;6CAA+B;AAGvC;IADC,QAAQ,EAAE;uCAGV;AARU,UAAU;IADtB,aAAa,CAAC,YAAY,CAAC;GACf,UAAU,CAmCtB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmCalendarBase } from './calendar-base';\nimport { styles } from './calendar.styles.js';\n\n@customElement('u-calendar')\nexport class UmCalendar extends UmCalendarBase {\n static override styles: CSSResultGroup = [styles, UmCalendarBase.styles];\n\n @state() dateValue: Date | null = null;\n\n @property()\n get value(): string {\n return this._getDateString(this.dateValue);\n }\n\n set value(value: string) {\n this.dateValue = this._getDateFromString(value);\n }\n\n protected override _selectDate(date: Date): void {\n this.dateValue = date;\n\n this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true }));\n\n if (this.month === date.getMonth() && this.year === date.getFullYear()) {\n return;\n }\n\n this.month = date.getMonth();\n this.year = date.getFullYear();\n\n }\n\n protected override _getSelectedDateClasses(date: Date): Record<string, boolean> {\n return this.dateValue?.getTime() === date.getTime()\n ? { 'selected-date': true }\n : {};\n\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAElB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.styles.js","sourceRoot":"","sources":["../../src/calendar/calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;CAEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n\n`;\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CalendarAdapter } from './calendar-adapter';
|
|
2
|
+
export declare class DefaultCalendarAdapter implements CalendarAdapter {
|
|
3
|
+
#private;
|
|
4
|
+
weekDayFormat: 'long' | 'short' | 'narrow';
|
|
5
|
+
locale: string;
|
|
6
|
+
getWeekDays(locale: string): string[];
|
|
7
|
+
getDay(date: Date): string;
|
|
8
|
+
getMonth(date: Date): string;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=default-calendar-adapter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-calendar-adapter.d.ts","sourceRoot":"","sources":["../../src/calendar/default-calendar-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,qBAAa,sBAAuB,YAAW,eAAe;;IAC5D,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAY;IACtD,MAAM,SAAW;IAEjB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE;IAuBrC,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAI1B,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;CAM7B"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export class DefaultCalendarAdapter {
|
|
2
|
+
constructor() {
|
|
3
|
+
this.weekDayFormat = 'narrow';
|
|
4
|
+
this.locale = 'pt-br';
|
|
5
|
+
}
|
|
6
|
+
getWeekDays(locale) {
|
|
7
|
+
const date = new Date();
|
|
8
|
+
const intlLocale = new Intl.Locale(locale);
|
|
9
|
+
const weekInfo = intlLocale.getWeekInfo ? intlLocale.getWeekInfo() : intlLocale.weekinfo;
|
|
10
|
+
this.#setDateToFirstDayOfWeek(date, weekInfo.firstDay);
|
|
11
|
+
const weekDays = [];
|
|
12
|
+
for (let i = 0; i < 7; i++) {
|
|
13
|
+
weekDays.push(date.toLocaleDateString(locale, { weekday: this.weekDayFormat }));
|
|
14
|
+
date.setDate(date.getDate() + 1);
|
|
15
|
+
}
|
|
16
|
+
return weekDays;
|
|
17
|
+
}
|
|
18
|
+
#setDateToFirstDayOfWeek(date, firstDayOfWeek) {
|
|
19
|
+
const diffToFirstDayOfWeek = (firstDayOfWeek - date.getDay() + 7) % 7;
|
|
20
|
+
date.setDate(date.getDate() + diffToFirstDayOfWeek);
|
|
21
|
+
}
|
|
22
|
+
getDay(date) {
|
|
23
|
+
return date.toLocaleDateString(this.locale, { day: 'numeric' });
|
|
24
|
+
}
|
|
25
|
+
getMonth(date) {
|
|
26
|
+
return date.toLocaleDateString(this.locale, {
|
|
27
|
+
month: 'long',
|
|
28
|
+
year: 'numeric',
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=default-calendar-adapter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-calendar-adapter.js","sourceRoot":"","sources":["../../src/calendar/default-calendar-adapter.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,sBAAsB;IAAnC;QACE,kBAAa,GAAgC,QAAQ,CAAC;QACtD,WAAM,GAAG,OAAO,CAAC;IAmCnB,CAAC;IAjCC,WAAW,CAAC,MAAc;QACxB,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QAExB,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;QAEzF,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACvD,MAAM,QAAQ,GAAa,EAAE,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;YAChF,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,wBAAwB,CAAC,IAAU,EAAE,cAAsB;QACzD,MAAM,oBAAoB,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAEtE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,oBAAoB,CAAC,CAAC;IACtD,CAAC;IAED,MAAM,CAAC,IAAU;QACf,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;IAClE,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE;YAC1C,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,SAAS;SAChB,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import { CalendarAdapter } from './calendar-adapter';\n\nexport class DefaultCalendarAdapter implements CalendarAdapter {\n weekDayFormat: 'long' | 'short' | 'narrow' = 'narrow';\n locale = 'pt-br';\n\n getWeekDays(locale: string): string[] {\n const date = new Date();\n\n const intlLocale = new Intl.Locale(locale);\n const weekInfo = intlLocale.getWeekInfo ? intlLocale.getWeekInfo() : intlLocale.weekinfo;\n\n this.#setDateToFirstDayOfWeek(date, weekInfo.firstDay);\n const weekDays: string[] = [];\n\n for (let i = 0; i < 7; i++) {\n weekDays.push(date.toLocaleDateString(locale, { weekday: this.weekDayFormat }));\n date.setDate(date.getDate() + 1);\n }\n\n return weekDays;\n }\n\n #setDateToFirstDayOfWeek(date: Date, firstDayOfWeek: number): void {\n const diffToFirstDayOfWeek = (firstDayOfWeek - date.getDay() + 7) % 7;\n\n date.setDate(date.getDate() + diffToFirstDayOfWeek);\n }\n\n getDay(date: Date): string {\n return date.toLocaleDateString(this.locale, { day: 'numeric' });\n }\n\n getMonth(date: Date): string {\n return date.toLocaleDateString(this.locale, {\n month: 'long',\n year: 'numeric',\n });\n }\n}\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
2
|
+
import { DirectiveResult } from 'lit-html/directive.js';
|
|
3
|
+
import { ClassMapDirective } from 'lit-html/directives/class-map.js';
|
|
4
|
+
import { UmCalendarBase } from './calendar-base';
|
|
5
|
+
export declare class UmRangeCalendar extends UmCalendarBase {
|
|
6
|
+
#private;
|
|
7
|
+
static styles: CSSResultGroup;
|
|
8
|
+
startDateValue: Date | null;
|
|
9
|
+
endDateValue: Date | null;
|
|
10
|
+
get value(): string | null;
|
|
11
|
+
set value(value: string);
|
|
12
|
+
protected _selectDate(date: Date): void;
|
|
13
|
+
protected _getCalendarClassMap(): DirectiveResult<typeof ClassMapDirective> | null;
|
|
14
|
+
protected _getSelectedDateClasses(date: Date): Record<string, boolean>;
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=range-calendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"range-calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/range-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGjD,qBACa,eAAgB,SAAQ,cAAc;;IACjD,OAAgB,MAAM,EAAE,cAAc,CAAmC;IAEhE,cAAc,EAAE,IAAI,GAAG,IAAI,CAAQ;IACnC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE1C,IACI,KAAK,IAAI,MAAM,GAAG,IAAI,CAMzB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAoBtB;cAUkB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;cAc7B,oBAAoB,IAAI,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG,IAAI;cAgDxE,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAgBhF"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
3
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
4
|
+
import { UmCalendarBase } from './calendar-base';
|
|
5
|
+
import { styles } from './range-calendar.styles.js';
|
|
6
|
+
let UmRangeCalendar = class UmRangeCalendar extends UmCalendarBase {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.startDateValue = null;
|
|
10
|
+
this.endDateValue = null;
|
|
11
|
+
}
|
|
12
|
+
static { this.styles = [styles, UmCalendarBase.styles]; }
|
|
13
|
+
get value() {
|
|
14
|
+
if (!this.startDateValue && !this.endDateValue) {
|
|
15
|
+
return '';
|
|
16
|
+
}
|
|
17
|
+
return `${this._getDateString(this.startDateValue)} - ${this._getDateString(this.endDateValue)}`;
|
|
18
|
+
}
|
|
19
|
+
set value(value) {
|
|
20
|
+
if (!value) {
|
|
21
|
+
this.startDateValue = null;
|
|
22
|
+
this.endDateValue = null;
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
const values = value.split(' - ');
|
|
26
|
+
if (values.length !== 2) {
|
|
27
|
+
this.startDateValue = null;
|
|
28
|
+
this.endDateValue = null;
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
const startDateString = values[0];
|
|
32
|
+
const endDateString = values[1];
|
|
33
|
+
this.startDateValue = this._getDateFromString(startDateString);
|
|
34
|
+
this.endDateValue = this._getDateFromString(endDateString);
|
|
35
|
+
}
|
|
36
|
+
#setStartEndDates(startDate, endDate) {
|
|
37
|
+
this.startDateValue = startDate;
|
|
38
|
+
this.endDateValue = endDate;
|
|
39
|
+
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
40
|
+
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
41
|
+
}
|
|
42
|
+
_selectDate(date) {
|
|
43
|
+
if (!this.startDateValue || !!this.endDateValue) {
|
|
44
|
+
this.#setStartEndDates(date, null);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
if (date > this.startDateValue) {
|
|
48
|
+
this.#setStartEndDates(this.startDateValue, date);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
this.#setStartEndDates(date, this.startDateValue);
|
|
52
|
+
}
|
|
53
|
+
_getCalendarClassMap() {
|
|
54
|
+
const map = {};
|
|
55
|
+
if (!this.startDateValue) {
|
|
56
|
+
return null;
|
|
57
|
+
}
|
|
58
|
+
if (this.startDateValue) {
|
|
59
|
+
const className = this.endDateValue
|
|
60
|
+
? 'selected'
|
|
61
|
+
: 'selecting';
|
|
62
|
+
map[className] = true;
|
|
63
|
+
}
|
|
64
|
+
map[this.#getStartDateClass()] = true;
|
|
65
|
+
if (this.endDateValue) {
|
|
66
|
+
map[this.#getEndDateClass()] = true;
|
|
67
|
+
}
|
|
68
|
+
return classMap(map);
|
|
69
|
+
}
|
|
70
|
+
#getStartDateClass() {
|
|
71
|
+
return this.#getDateClass('start', this.startDateValue);
|
|
72
|
+
}
|
|
73
|
+
#getEndDateClass() {
|
|
74
|
+
return this.#getDateClass('end', this.endDateValue);
|
|
75
|
+
}
|
|
76
|
+
#getDateClass(name, date) {
|
|
77
|
+
const month = date.getMonth();
|
|
78
|
+
const year = date.getFullYear();
|
|
79
|
+
if (this.month === month && this.year === year) {
|
|
80
|
+
return `on-${name}-date-month`;
|
|
81
|
+
}
|
|
82
|
+
if (this.year > year || this.year === year && this.month > month) {
|
|
83
|
+
return `after-${name}-date-month`;
|
|
84
|
+
}
|
|
85
|
+
return `before-${name}-date-month`;
|
|
86
|
+
}
|
|
87
|
+
_getSelectedDateClasses(date) {
|
|
88
|
+
const classes = {};
|
|
89
|
+
if (this.startDateValue?.getTime() === date.getTime()) {
|
|
90
|
+
classes['selected-date'] = true;
|
|
91
|
+
classes['start-date'] = true;
|
|
92
|
+
}
|
|
93
|
+
if (this.endDateValue?.getTime() === date.getTime()) {
|
|
94
|
+
classes['selected-date'] = true;
|
|
95
|
+
classes['end-date'] = true;
|
|
96
|
+
}
|
|
97
|
+
return classes;
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
__decorate([
|
|
101
|
+
state()
|
|
102
|
+
], UmRangeCalendar.prototype, "startDateValue", void 0);
|
|
103
|
+
__decorate([
|
|
104
|
+
state()
|
|
105
|
+
], UmRangeCalendar.prototype, "endDateValue", void 0);
|
|
106
|
+
__decorate([
|
|
107
|
+
property()
|
|
108
|
+
], UmRangeCalendar.prototype, "value", null);
|
|
109
|
+
UmRangeCalendar = __decorate([
|
|
110
|
+
customElement('u-range-calendar')
|
|
111
|
+
], UmRangeCalendar);
|
|
112
|
+
export { UmRangeCalendar };
|
|
113
|
+
//# sourceMappingURL=range-calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"range-calendar.js","sourceRoot":"","sources":["../../src/calendar/range-calendar.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { DirectiveResult } from 'lit-html/directive.js';\nimport { ClassMapDirective } from 'lit-html/directives/class-map.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { UmCalendarBase } from './calendar-base';\nimport { styles } from './range-calendar.styles.js';\n\n@customElement('u-range-calendar')\nexport class UmRangeCalendar extends UmCalendarBase {\n static override styles: CSSResultGroup = [styles, UmCalendarBase.styles];\n\n @state() startDateValue: Date | null = null;\n @state() endDateValue: Date | null = null;\n\n @property()\n get value(): string | null {\n if (!this.startDateValue && !this.endDateValue) {\n return '';\n }\n\n return `${this._getDateString(this.startDateValue)} - ${this._getDateString(this.endDateValue)}`;\n }\n\n set value(value: string) {\n if (!value) {\n this.startDateValue = null;\n this.endDateValue = null;\n return;\n }\n\n const values = value.split(' - ');\n\n if (values.length !== 2) {\n this.startDateValue = null;\n this.endDateValue = null;\n return;\n }\n\n const startDateString = values[0];\n const endDateString = values[1];\n\n this.startDateValue = this._getDateFromString(startDateString);\n this.endDateValue = this._getDateFromString(endDateString);\n }\n\n #setStartEndDates(startDate: Date | null, endDate: Date | null): void {\n this.startDateValue = startDate;\n this.endDateValue = endDate;\n\n this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n protected override _selectDate(date: Date): void {\n if (!this.startDateValue || !!this.endDateValue) {\n this.#setStartEndDates(date, null);\n return;\n }\n\n if (date > this.startDateValue) {\n this.#setStartEndDates(this.startDateValue, date);\n return;\n }\n\n this.#setStartEndDates(date, this.startDateValue);\n }\n\n protected override _getCalendarClassMap(): DirectiveResult<typeof ClassMapDirective> | null {\n\n const map: Record<string, boolean> = {};\n\n if (!this.startDateValue) {\n return null;\n }\n\n if (this.startDateValue) {\n const className = this.endDateValue\n ? 'selected'\n : 'selecting';\n\n map[className] = true;\n }\n\n map[this.#getStartDateClass()] = true;\n\n if (this.endDateValue) {\n map[this.#getEndDateClass()] = true;\n }\n\n return classMap(map);\n }\n\n #getStartDateClass(): string {\n return this.#getDateClass('start', this.startDateValue!);\n }\n\n #getEndDateClass(): string {\n return this.#getDateClass('end', this.endDateValue!);\n }\n\n #getDateClass(name: string, date: Date): string {\n const month = date.getMonth();\n const year = date.getFullYear();\n\n if (this.month === month && this.year === year) {\n return `on-${name}-date-month`;\n }\n\n if (this.year > year || this.year === year && this.month > month) {\n return `after-${name}-date-month`;\n }\n\n return `before-${name}-date-month`;\n }\n\n protected override _getSelectedDateClasses(date: Date): Record<string, boolean> {\n\n const classes: Record<string, boolean> = {};\n\n if (this.startDateValue?.getTime() === date.getTime()) {\n classes['selected-date'] = true;\n classes['start-date'] = true;\n }\n\n if (this.endDateValue?.getTime() === date.getTime()) {\n classes['selected-date'] = true;\n classes['end-date'] = true;\n }\n\n return classes;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"range-calendar.styles.d.ts","sourceRoot":"","sources":["../../src/calendar/range-calendar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsClB,CAAC"}
|