@exmg/exm-date-picker 1.2.12
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/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker-base.d.ts +31 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker-base.js +152 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker-input-base.d.ts +57 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker-input-base.js +245 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker-input.d.ts +18 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker-input.js +21 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker-year-grid.d.ts +14 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker-year-grid.js +74 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker.d.ts +18 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/exm-date-picker.js +21 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/index.d.ts +8 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/index.js +9 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-input-styles-css.d.ts +1 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-input-styles-css.js +23 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-styles-css.d.ts +1 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-styles-css.js +122 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-year-grid-styles-css.d.ts +1 -0
- package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-year-grid-styles-css.js +31 -0
- package/README.md +0 -0
- package/dist/exm-date-picker-base.d.ts +31 -0
- package/dist/exm-date-picker-base.js +155 -0
- package/dist/exm-date-picker-input-base.d.ts +57 -0
- package/dist/exm-date-picker-input-base.js +248 -0
- package/dist/exm-date-picker-input.d.ts +18 -0
- package/dist/exm-date-picker-input.js +23 -0
- package/dist/exm-date-picker-year-grid.d.ts +14 -0
- package/dist/exm-date-picker-year-grid.js +76 -0
- package/dist/exm-date-picker.d.ts +18 -0
- package/dist/exm-date-picker.js +23 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +9 -0
- package/dist/styles/exm-date-picker-input-styles-css.d.ts +1 -0
- package/dist/styles/exm-date-picker-input-styles-css.js +26 -0
- package/dist/styles/exm-date-picker-styles-css.d.ts +1 -0
- package/dist/styles/exm-date-picker-styles-css.js +125 -0
- package/dist/styles/exm-date-picker-year-grid-styles-css.d.ts +1 -0
- package/dist/styles/exm-date-picker-year-grid-styles-css.js +34 -0
- package/package.json +47 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ExmgElement } from '@exmg/lit-base';
|
|
2
|
+
import 'cally';
|
|
3
|
+
import '@material/web/icon/icon.js';
|
|
4
|
+
import '@material/web/button/text-button.js';
|
|
5
|
+
import './exm-date-picker-year-grid.js';
|
|
6
|
+
export interface CalendarDateElement extends HTMLInputElement {
|
|
7
|
+
value: string;
|
|
8
|
+
focusedDate: string;
|
|
9
|
+
focus(options?: unknown): void;
|
|
10
|
+
}
|
|
11
|
+
export declare class ExmDatePickerBase extends ExmgElement {
|
|
12
|
+
locale?: string;
|
|
13
|
+
value: string;
|
|
14
|
+
min?: number;
|
|
15
|
+
max?: number;
|
|
16
|
+
confirmInput: boolean;
|
|
17
|
+
firstDayOfWeek: number;
|
|
18
|
+
showYears: boolean;
|
|
19
|
+
focusedDate: any;
|
|
20
|
+
yearPage: any;
|
|
21
|
+
calendarDate: CalendarDateElement;
|
|
22
|
+
handleFocusDay(event: CustomEvent<Date>): void;
|
|
23
|
+
handleYearChange(event: CustomEvent<number>): void;
|
|
24
|
+
handleDateChange(): void;
|
|
25
|
+
focusDate(): void;
|
|
26
|
+
handleYearsShift(event: Event, direction: 'next' | 'previous'): void;
|
|
27
|
+
handleYearToggle(): Promise<void>;
|
|
28
|
+
handleConfirmClick(): void;
|
|
29
|
+
handleCancelClick(): void;
|
|
30
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
31
|
+
}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, nothing } from 'lit';
|
|
3
|
+
import { ExmgElement } from '@exmg/lit-base';
|
|
4
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
5
|
+
import { DateTime } from 'luxon';
|
|
6
|
+
import 'cally';
|
|
7
|
+
import '@material/web/icon/icon.js';
|
|
8
|
+
import '@material/web/button/text-button.js';
|
|
9
|
+
import './exm-date-picker-year-grid.js';
|
|
10
|
+
// TODO: Implement form association / validation
|
|
11
|
+
export class ExmDatePickerBase extends ExmgElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.value = '';
|
|
15
|
+
this.confirmInput = true;
|
|
16
|
+
this.firstDayOfWeek = 0;
|
|
17
|
+
this.showYears = false;
|
|
18
|
+
this.focusedDate = DateTime.now();
|
|
19
|
+
this.yearPage = this.focusedDate.year;
|
|
20
|
+
}
|
|
21
|
+
handleFocusDay(event) {
|
|
22
|
+
this.focusedDate = DateTime.fromJSDate(event.detail);
|
|
23
|
+
}
|
|
24
|
+
handleYearChange(event) {
|
|
25
|
+
this.focusedDate = this.focusedDate.set({
|
|
26
|
+
year: event.detail,
|
|
27
|
+
day: 1,
|
|
28
|
+
});
|
|
29
|
+
this.showYears = false;
|
|
30
|
+
}
|
|
31
|
+
handleDateChange() {
|
|
32
|
+
this.value = this.calendarDate.value;
|
|
33
|
+
if (!this.confirmInput) {
|
|
34
|
+
this.fire('date-change', this.value, true);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
focusDate() {
|
|
38
|
+
const date = DateTime.fromISO(this.value);
|
|
39
|
+
if (!date.isValid) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
this.focusedDate = date;
|
|
43
|
+
this.calendarDate.focusedDate = this.value;
|
|
44
|
+
this.calendarDate.focus({ target: 'day' });
|
|
45
|
+
}
|
|
46
|
+
handleYearsShift(event, direction) {
|
|
47
|
+
if (!this.showYears)
|
|
48
|
+
return;
|
|
49
|
+
event.stopPropagation();
|
|
50
|
+
this.yearPage += direction === 'next' ? 24 : -24;
|
|
51
|
+
}
|
|
52
|
+
async handleYearToggle() {
|
|
53
|
+
if (this.showYears) {
|
|
54
|
+
this.yearPage = this.focusedDate.year;
|
|
55
|
+
}
|
|
56
|
+
await this.updateComplete;
|
|
57
|
+
this.showYears = !this.showYears;
|
|
58
|
+
}
|
|
59
|
+
handleConfirmClick() {
|
|
60
|
+
this.fire('date-change', this.value, true);
|
|
61
|
+
}
|
|
62
|
+
handleCancelClick() {
|
|
63
|
+
this.fire('date-cancel', this.value, true);
|
|
64
|
+
}
|
|
65
|
+
render() {
|
|
66
|
+
const year = this.focusedDate.year;
|
|
67
|
+
const heading = this.focusedDate.setLocale(this.locale).toFormat('LLL yyyy');
|
|
68
|
+
const focusedDate = this.focusedDate.toISODate();
|
|
69
|
+
// Cally only supports ISO date string
|
|
70
|
+
const min = this.min ? DateTime.fromMillis(this.min).toISODate() : undefined;
|
|
71
|
+
const max = this.max ? DateTime.fromMillis(this.max).toISODate() : undefined;
|
|
72
|
+
return html `
|
|
73
|
+
<calendar-date
|
|
74
|
+
.locale=${this.locale}
|
|
75
|
+
.value=${this.value}
|
|
76
|
+
.focusedDate=${focusedDate}
|
|
77
|
+
.min=${min}
|
|
78
|
+
.max=${max}
|
|
79
|
+
@focusday=${this.handleFocusDay}
|
|
80
|
+
@change=${this.handleDateChange}
|
|
81
|
+
first-day-of-week=${this.firstDayOfWeek}
|
|
82
|
+
show-outside-days
|
|
83
|
+
>
|
|
84
|
+
<md-text-button slot="heading" @click=${this.handleYearToggle}>
|
|
85
|
+
<span class="heading">
|
|
86
|
+
${heading}
|
|
87
|
+
<md-icon> ${this.showYears ? 'arrow_drop_up' : 'arrow_drop_down'} </md-icon>
|
|
88
|
+
</span>
|
|
89
|
+
</md-text-button>
|
|
90
|
+
|
|
91
|
+
<md-icon class="arrow" slot="previous" @click=${(event) => this.handleYearsShift(event, 'previous')}>
|
|
92
|
+
chevron_left
|
|
93
|
+
</md-icon>
|
|
94
|
+
|
|
95
|
+
<md-icon class="arrow" slot="next" @click=${(event) => this.handleYearsShift(event, 'next')}>
|
|
96
|
+
chevron_right
|
|
97
|
+
</md-icon>
|
|
98
|
+
|
|
99
|
+
${this.showYears
|
|
100
|
+
? html `
|
|
101
|
+
<exm-date-picker-year-grid
|
|
102
|
+
.year=${year}
|
|
103
|
+
.min=${this.min}
|
|
104
|
+
.max=${this.max}
|
|
105
|
+
.displayYear=${this.yearPage}
|
|
106
|
+
@year-change=${this.handleYearChange}
|
|
107
|
+
></exm-date-picker-year-grid>
|
|
108
|
+
`
|
|
109
|
+
: html ` <calendar-month></calendar-month> `}
|
|
110
|
+
${this.confirmInput
|
|
111
|
+
? html `
|
|
112
|
+
<div class="actions">
|
|
113
|
+
<md-text-button @click="${this.handleCancelClick}">Cancel</md-text-button>
|
|
114
|
+
<md-text-button @click="${this.handleConfirmClick}">Ok</md-text-button>
|
|
115
|
+
</div>
|
|
116
|
+
`
|
|
117
|
+
: nothing}
|
|
118
|
+
</calendar-date>
|
|
119
|
+
`;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
__decorate([
|
|
123
|
+
property({ type: String })
|
|
124
|
+
], ExmDatePickerBase.prototype, "locale", void 0);
|
|
125
|
+
__decorate([
|
|
126
|
+
property({ type: String })
|
|
127
|
+
], ExmDatePickerBase.prototype, "value", void 0);
|
|
128
|
+
__decorate([
|
|
129
|
+
property({ type: Number })
|
|
130
|
+
], ExmDatePickerBase.prototype, "min", void 0);
|
|
131
|
+
__decorate([
|
|
132
|
+
property({ type: Number })
|
|
133
|
+
], ExmDatePickerBase.prototype, "max", void 0);
|
|
134
|
+
__decorate([
|
|
135
|
+
property({ type: Boolean, attribute: 'confirm-input' })
|
|
136
|
+
], ExmDatePickerBase.prototype, "confirmInput", void 0);
|
|
137
|
+
__decorate([
|
|
138
|
+
property({ type: Number })
|
|
139
|
+
], ExmDatePickerBase.prototype, "firstDayOfWeek", void 0);
|
|
140
|
+
__decorate([
|
|
141
|
+
state()
|
|
142
|
+
], ExmDatePickerBase.prototype, "showYears", void 0);
|
|
143
|
+
__decorate([
|
|
144
|
+
state()
|
|
145
|
+
], ExmDatePickerBase.prototype, "focusedDate", void 0);
|
|
146
|
+
__decorate([
|
|
147
|
+
state()
|
|
148
|
+
], ExmDatePickerBase.prototype, "yearPage", void 0);
|
|
149
|
+
__decorate([
|
|
150
|
+
query('calendar-date')
|
|
151
|
+
], ExmDatePickerBase.prototype, "calendarDate", void 0);
|
|
152
|
+
//# sourceMappingURL=exm-date-picker-base.js.map
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { PropertyValues } from 'lit';
|
|
2
|
+
import { ExmgElement } from '@exmg/lit-base';
|
|
3
|
+
import '@material/web/textfield/outlined-text-field.js';
|
|
4
|
+
import '@material/web/menu/menu.js';
|
|
5
|
+
import '@material/web/icon/icon.js';
|
|
6
|
+
export declare class ExmDatePickerInputBase extends ExmgElement {
|
|
7
|
+
static formAssociated: boolean;
|
|
8
|
+
private internals;
|
|
9
|
+
static shadowRootOptions: {
|
|
10
|
+
delegatesFocus: boolean;
|
|
11
|
+
clonable?: boolean;
|
|
12
|
+
customElementRegistry?: CustomElementRegistry;
|
|
13
|
+
mode: ShadowRootMode;
|
|
14
|
+
serializable?: boolean;
|
|
15
|
+
slotAssignment?: SlotAssignmentMode;
|
|
16
|
+
};
|
|
17
|
+
label: string;
|
|
18
|
+
value?: number;
|
|
19
|
+
name?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Display/input format.
|
|
22
|
+
*/
|
|
23
|
+
format: string;
|
|
24
|
+
locale: string;
|
|
25
|
+
/**
|
|
26
|
+
* Timezone as IANA timezone string
|
|
27
|
+
*/
|
|
28
|
+
timezone: string;
|
|
29
|
+
closeOnSelect: boolean;
|
|
30
|
+
disabled: boolean;
|
|
31
|
+
required: boolean;
|
|
32
|
+
supportingText: string;
|
|
33
|
+
min?: number;
|
|
34
|
+
max?: number;
|
|
35
|
+
private menu;
|
|
36
|
+
private input;
|
|
37
|
+
private datePickers;
|
|
38
|
+
get dateTime(): any;
|
|
39
|
+
get displayValue(): any;
|
|
40
|
+
get datePickerValue(): any;
|
|
41
|
+
constructor();
|
|
42
|
+
protected firstUpdated(): void;
|
|
43
|
+
protected updated(changedProperties: PropertyValues<this>): void;
|
|
44
|
+
validate(): void;
|
|
45
|
+
private updateFormValue;
|
|
46
|
+
private formatTimestamp;
|
|
47
|
+
private updateDatePickerValue;
|
|
48
|
+
private handleDatePickerToggle;
|
|
49
|
+
private handleDateChange;
|
|
50
|
+
private handleDateCancel;
|
|
51
|
+
private handleInputChange;
|
|
52
|
+
syncDatePicker(): void;
|
|
53
|
+
checkValidity(): boolean;
|
|
54
|
+
reportValidity(): boolean;
|
|
55
|
+
private setValidity;
|
|
56
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
57
|
+
}
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { property, query, queryAssignedElements } from 'lit/decorators.js';
|
|
4
|
+
import { ExmgElement } from '@exmg/lit-base';
|
|
5
|
+
import { DateTime } from 'luxon';
|
|
6
|
+
import '@material/web/textfield/outlined-text-field.js';
|
|
7
|
+
import '@material/web/menu/menu.js';
|
|
8
|
+
import '@material/web/icon/icon.js';
|
|
9
|
+
export class ExmDatePickerInputBase extends ExmgElement {
|
|
10
|
+
get dateTime() {
|
|
11
|
+
if (this.value === undefined) {
|
|
12
|
+
return undefined;
|
|
13
|
+
}
|
|
14
|
+
const date = DateTime.fromMillis(this.value, {
|
|
15
|
+
zone: this.timezone,
|
|
16
|
+
locale: this.locale,
|
|
17
|
+
});
|
|
18
|
+
return date.isValid ? date : undefined;
|
|
19
|
+
}
|
|
20
|
+
get displayValue() {
|
|
21
|
+
var _a, _b;
|
|
22
|
+
return (_b = (_a = this.dateTime) === null || _a === void 0 ? void 0 : _a.toFormat(this.format)) !== null && _b !== void 0 ? _b : '';
|
|
23
|
+
}
|
|
24
|
+
get datePickerValue() {
|
|
25
|
+
var _a, _b;
|
|
26
|
+
return (_b = (_a = this.dateTime) === null || _a === void 0 ? void 0 : _a.toISODate()) !== null && _b !== void 0 ? _b : '';
|
|
27
|
+
}
|
|
28
|
+
constructor() {
|
|
29
|
+
super();
|
|
30
|
+
this.internals = this.attachInternals();
|
|
31
|
+
this.label = 'Select Date';
|
|
32
|
+
/**
|
|
33
|
+
* Display/input format.
|
|
34
|
+
*/
|
|
35
|
+
this.format = 'dd-MM-yyyy';
|
|
36
|
+
this.locale = 'en-US';
|
|
37
|
+
/**
|
|
38
|
+
* Timezone as IANA timezone string
|
|
39
|
+
*/
|
|
40
|
+
this.timezone = 'local';
|
|
41
|
+
this.closeOnSelect = true;
|
|
42
|
+
this.disabled = false;
|
|
43
|
+
this.required = false;
|
|
44
|
+
this.supportingText = '';
|
|
45
|
+
this.addEventListener('invalid', (event) => {
|
|
46
|
+
// NOTE: Prevent browser ui
|
|
47
|
+
event.preventDefault();
|
|
48
|
+
this.input.error = true;
|
|
49
|
+
this.input.errorText = this.internals.validationMessage;
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
firstUpdated() {
|
|
53
|
+
this.syncDatePicker();
|
|
54
|
+
}
|
|
55
|
+
updated(changedProperties) {
|
|
56
|
+
if (changedProperties.has('value') || changedProperties.has('required')) {
|
|
57
|
+
this.updateFormValue();
|
|
58
|
+
}
|
|
59
|
+
if (changedProperties.has('value') || changedProperties.has('timezone')) {
|
|
60
|
+
this.updateDatePickerValue();
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
validate() {
|
|
64
|
+
if (this.required && this.value === undefined) {
|
|
65
|
+
this.setValidity({ valueMissing: true }, 'Please select a date');
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
// Min validation
|
|
69
|
+
if (this.value !== undefined && this.min !== undefined && this.value < this.min) {
|
|
70
|
+
this.setValidity({ rangeUnderflow: true }, `Date must be on or after ${this.formatTimestamp(this.min)}`);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
// Max validation
|
|
74
|
+
if (this.value !== undefined && this.max !== undefined && this.value > this.max) {
|
|
75
|
+
this.setValidity({ rangeOverflow: true }, `Date must be on or before ${this.formatTimestamp(this.max)}`);
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
this.setValidity();
|
|
79
|
+
}
|
|
80
|
+
updateFormValue() {
|
|
81
|
+
this.internals.setFormValue(this.value !== undefined ? String(this.value) : null);
|
|
82
|
+
this.validate();
|
|
83
|
+
}
|
|
84
|
+
formatTimestamp(timestamp) {
|
|
85
|
+
return DateTime.fromMillis(timestamp, {
|
|
86
|
+
zone: this.timezone,
|
|
87
|
+
locale: this.locale,
|
|
88
|
+
}).toFormat(this.format);
|
|
89
|
+
}
|
|
90
|
+
updateDatePickerValue() {
|
|
91
|
+
const picker = this.datePickers[0];
|
|
92
|
+
if (!picker) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
const value = this.datePickerValue;
|
|
96
|
+
if (picker.value !== value) {
|
|
97
|
+
picker.value = value;
|
|
98
|
+
if (value) {
|
|
99
|
+
picker.focusDate();
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
handleDatePickerToggle(event) {
|
|
104
|
+
event.preventDefault();
|
|
105
|
+
if (this.disabled) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
this.menu.open = !this.menu.open;
|
|
109
|
+
}
|
|
110
|
+
handleDateChange(event) {
|
|
111
|
+
const date = DateTime.fromISO(event.detail, {
|
|
112
|
+
zone: this.timezone,
|
|
113
|
+
locale: this.locale,
|
|
114
|
+
}).startOf('day');
|
|
115
|
+
if (!date.isValid) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
this.value = date.toMillis();
|
|
119
|
+
if (this.closeOnSelect) {
|
|
120
|
+
this.menu.open = false;
|
|
121
|
+
}
|
|
122
|
+
this.fire('change', this.value);
|
|
123
|
+
}
|
|
124
|
+
handleDateCancel() {
|
|
125
|
+
this.menu.open = false;
|
|
126
|
+
}
|
|
127
|
+
handleInputChange(event) {
|
|
128
|
+
const input = event.currentTarget;
|
|
129
|
+
const date = DateTime.fromFormat(input.value, this.format, {
|
|
130
|
+
locale: this.locale,
|
|
131
|
+
zone: this.timezone,
|
|
132
|
+
}).startOf('day');
|
|
133
|
+
if (!date.isValid) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
this.value = date.toMillis();
|
|
137
|
+
this.fire('change', this.value);
|
|
138
|
+
}
|
|
139
|
+
syncDatePicker() {
|
|
140
|
+
const picker = this.datePickers[0];
|
|
141
|
+
if (!picker) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
picker.min = this.min;
|
|
145
|
+
picker.max = this.max;
|
|
146
|
+
picker.locale = this.locale;
|
|
147
|
+
}
|
|
148
|
+
checkValidity() {
|
|
149
|
+
const valid = this.internals.checkValidity();
|
|
150
|
+
return valid;
|
|
151
|
+
}
|
|
152
|
+
reportValidity() {
|
|
153
|
+
const valid = this.internals.reportValidity();
|
|
154
|
+
if (valid) {
|
|
155
|
+
this.input.error = false;
|
|
156
|
+
this.input.errorText = '';
|
|
157
|
+
}
|
|
158
|
+
return valid;
|
|
159
|
+
}
|
|
160
|
+
// NOTE: To sync validity with the input field
|
|
161
|
+
setValidity(flags = {}, message = '') {
|
|
162
|
+
this.internals.setValidity(flags, message);
|
|
163
|
+
if (!message) {
|
|
164
|
+
this.input.error = false;
|
|
165
|
+
this.input.errorText = '';
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
if (this.input.error) {
|
|
169
|
+
this.input.errorText = message;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
// TODO: Option for supporting different inputs
|
|
173
|
+
render() {
|
|
174
|
+
return html `
|
|
175
|
+
<md-outlined-text-field
|
|
176
|
+
id="date-input"
|
|
177
|
+
label=${this.label}
|
|
178
|
+
.value=${this.displayValue}
|
|
179
|
+
?disabled=${this.disabled}
|
|
180
|
+
?required=${this.required}
|
|
181
|
+
@change=${this.handleInputChange}
|
|
182
|
+
supporting-text=${this.supportingText}
|
|
183
|
+
>
|
|
184
|
+
<md-icon class="icon" slot="trailing-icon" @click=${this.handleDatePickerToggle}>calendar_month</md-icon>
|
|
185
|
+
</md-outlined-text-field>
|
|
186
|
+
|
|
187
|
+
<!-- NOTE: Might need some position tweaking -->
|
|
188
|
+
<md-menu anchor="date-input" positioning="popover">
|
|
189
|
+
<slot @date-change=${this.handleDateChange} @date-cancel=${this.handleDateCancel}></slot>
|
|
190
|
+
</md-menu>
|
|
191
|
+
`;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
ExmDatePickerInputBase.formAssociated = true;
|
|
195
|
+
// NOTE: For an issue where the browser don't know what to focus on if invalid, might need another solution after testing
|
|
196
|
+
ExmDatePickerInputBase.shadowRootOptions = {
|
|
197
|
+
...ExmgElement.shadowRootOptions,
|
|
198
|
+
delegatesFocus: true,
|
|
199
|
+
};
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: String })
|
|
202
|
+
], ExmDatePickerInputBase.prototype, "label", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property({ type: Number })
|
|
205
|
+
], ExmDatePickerInputBase.prototype, "value", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property({ type: String })
|
|
208
|
+
], ExmDatePickerInputBase.prototype, "name", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
property({ type: String })
|
|
211
|
+
], ExmDatePickerInputBase.prototype, "format", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
property({ type: String })
|
|
214
|
+
], ExmDatePickerInputBase.prototype, "locale", void 0);
|
|
215
|
+
__decorate([
|
|
216
|
+
property({ type: String, reflect: true })
|
|
217
|
+
], ExmDatePickerInputBase.prototype, "timezone", void 0);
|
|
218
|
+
__decorate([
|
|
219
|
+
property({ type: Boolean, attribute: 'close-on-select' })
|
|
220
|
+
], ExmDatePickerInputBase.prototype, "closeOnSelect", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
property({ type: Boolean, reflect: true })
|
|
223
|
+
], ExmDatePickerInputBase.prototype, "disabled", void 0);
|
|
224
|
+
__decorate([
|
|
225
|
+
property({ type: Boolean })
|
|
226
|
+
], ExmDatePickerInputBase.prototype, "required", void 0);
|
|
227
|
+
__decorate([
|
|
228
|
+
property({ type: String, attribute: 'supporting-text' })
|
|
229
|
+
], ExmDatePickerInputBase.prototype, "supportingText", void 0);
|
|
230
|
+
__decorate([
|
|
231
|
+
property({ type: Number })
|
|
232
|
+
], ExmDatePickerInputBase.prototype, "min", void 0);
|
|
233
|
+
__decorate([
|
|
234
|
+
property({ type: Number })
|
|
235
|
+
], ExmDatePickerInputBase.prototype, "max", void 0);
|
|
236
|
+
__decorate([
|
|
237
|
+
query('md-menu')
|
|
238
|
+
], ExmDatePickerInputBase.prototype, "menu", void 0);
|
|
239
|
+
__decorate([
|
|
240
|
+
query('md-outlined-text-field')
|
|
241
|
+
], ExmDatePickerInputBase.prototype, "input", void 0);
|
|
242
|
+
__decorate([
|
|
243
|
+
queryAssignedElements({ selector: 'exm-date-picker' })
|
|
244
|
+
], ExmDatePickerInputBase.prototype, "datePickers", void 0);
|
|
245
|
+
//# sourceMappingURL=exm-date-picker-input-base.js.map
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import '@material/web/progress/circular-progress.js';
|
|
2
|
+
import { ExmDatePickerInputBase } from './exm-date-picker-input-base.js';
|
|
3
|
+
/**
|
|
4
|
+
* exm-date-picker-input
|
|
5
|
+
*
|
|
6
|
+
* Material 3 styled date picker with input, form associated.
|
|
7
|
+
*
|
|
8
|
+
* @customElement exm-date-picker-input
|
|
9
|
+
* @extends ExmDatePickerInputBase
|
|
10
|
+
*/
|
|
11
|
+
export declare class ExmDatePickerInput extends ExmDatePickerInputBase {
|
|
12
|
+
static styles: import("lit").CSSResult[];
|
|
13
|
+
}
|
|
14
|
+
declare global {
|
|
15
|
+
interface HTMLElementTagNameMap {
|
|
16
|
+
'exm-date-picker-input': ExmDatePickerInput;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators/custom-element.js';
|
|
3
|
+
import '@material/web/progress/circular-progress.js';
|
|
4
|
+
import { ExmDatePickerInputBase } from './exm-date-picker-input-base.js';
|
|
5
|
+
import { style } from './styles/exm-date-picker-input-styles-css.js';
|
|
6
|
+
/**
|
|
7
|
+
* exm-date-picker-input
|
|
8
|
+
*
|
|
9
|
+
* Material 3 styled date picker with input, form associated.
|
|
10
|
+
*
|
|
11
|
+
* @customElement exm-date-picker-input
|
|
12
|
+
* @extends ExmDatePickerInputBase
|
|
13
|
+
*/
|
|
14
|
+
let ExmDatePickerInput = class ExmDatePickerInput extends ExmDatePickerInputBase {
|
|
15
|
+
};
|
|
16
|
+
ExmDatePickerInput.styles = [style];
|
|
17
|
+
ExmDatePickerInput = __decorate([
|
|
18
|
+
customElement('exm-date-picker-input')
|
|
19
|
+
], ExmDatePickerInput);
|
|
20
|
+
export { ExmDatePickerInput };
|
|
21
|
+
//# sourceMappingURL=exm-date-picker-input.js.map
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import '@material/web/button/text-button.js';
|
|
2
|
+
import { ExmgElement } from '@exmg/lit-base';
|
|
3
|
+
export declare class ExmDatePickerYearGrid extends ExmgElement {
|
|
4
|
+
year: any;
|
|
5
|
+
displayYear: any;
|
|
6
|
+
min?: number;
|
|
7
|
+
max?: number;
|
|
8
|
+
currentYear: any;
|
|
9
|
+
static styles: import("lit").CSSResult[];
|
|
10
|
+
private get years();
|
|
11
|
+
private isYearDisabled;
|
|
12
|
+
private selectYear;
|
|
13
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { style } from './styles/exm-date-picker-year-grid-styles-css.js';
|
|
4
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
5
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
6
|
+
import '@material/web/button/text-button.js';
|
|
7
|
+
import { ExmgElement } from '@exmg/lit-base';
|
|
8
|
+
import { DateTime } from 'luxon';
|
|
9
|
+
let ExmDatePickerYearGrid = class ExmDatePickerYearGrid extends ExmgElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.year = DateTime.now().year;
|
|
13
|
+
this.displayYear = this.year;
|
|
14
|
+
this.currentYear = DateTime.now().year;
|
|
15
|
+
}
|
|
16
|
+
get years() {
|
|
17
|
+
const start = Math.floor(this.displayYear / 24) * 24;
|
|
18
|
+
return Array.from({ length: 24 }, (_, i) => start + i);
|
|
19
|
+
}
|
|
20
|
+
isYearDisabled(year) {
|
|
21
|
+
if (this.min && year < DateTime.fromMillis(this.min).year) {
|
|
22
|
+
return true;
|
|
23
|
+
}
|
|
24
|
+
if (this.max && year > DateTime.fromMillis(this.max).year) {
|
|
25
|
+
return true;
|
|
26
|
+
}
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
selectYear(year) {
|
|
30
|
+
if (this.isYearDisabled(year)) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
this.fire('year-change', year);
|
|
34
|
+
}
|
|
35
|
+
render() {
|
|
36
|
+
return html `
|
|
37
|
+
<div class="grid">
|
|
38
|
+
${this.years.map((year) => html `
|
|
39
|
+
<md-text-button
|
|
40
|
+
class=${classMap({
|
|
41
|
+
selected: year === this.year,
|
|
42
|
+
current: year === this.currentYear,
|
|
43
|
+
})}
|
|
44
|
+
?disabled=${this.isYearDisabled(year)}
|
|
45
|
+
@click=${() => this.selectYear(year)}
|
|
46
|
+
>
|
|
47
|
+
<span class="year">${year}</span>
|
|
48
|
+
</md-text-button>
|
|
49
|
+
`)}
|
|
50
|
+
</div>
|
|
51
|
+
`;
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
ExmDatePickerYearGrid.styles = [style];
|
|
55
|
+
__decorate([
|
|
56
|
+
property({ type: Number })
|
|
57
|
+
], ExmDatePickerYearGrid.prototype, "year", void 0);
|
|
58
|
+
__decorate([
|
|
59
|
+
property({ type: Number })
|
|
60
|
+
], ExmDatePickerYearGrid.prototype, "displayYear", void 0);
|
|
61
|
+
__decorate([
|
|
62
|
+
property({ type: Number })
|
|
63
|
+
], ExmDatePickerYearGrid.prototype, "min", void 0);
|
|
64
|
+
__decorate([
|
|
65
|
+
property({ type: Number })
|
|
66
|
+
], ExmDatePickerYearGrid.prototype, "max", void 0);
|
|
67
|
+
__decorate([
|
|
68
|
+
state()
|
|
69
|
+
], ExmDatePickerYearGrid.prototype, "currentYear", void 0);
|
|
70
|
+
ExmDatePickerYearGrid = __decorate([
|
|
71
|
+
customElement('exm-date-picker-year-grid')
|
|
72
|
+
], ExmDatePickerYearGrid);
|
|
73
|
+
export { ExmDatePickerYearGrid };
|
|
74
|
+
//# sourceMappingURL=exm-date-picker-year-grid.js.map
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import '@material/web/progress/circular-progress.js';
|
|
2
|
+
import { ExmDatePickerBase } from './exm-date-picker-base.js';
|
|
3
|
+
/**
|
|
4
|
+
* exm-date-picker
|
|
5
|
+
*
|
|
6
|
+
* Material 3 styled date picker component.
|
|
7
|
+
*
|
|
8
|
+
* @customElement exm-date-picker
|
|
9
|
+
* @extends ExmDatePickerBase
|
|
10
|
+
*/
|
|
11
|
+
export declare class ExmDatePicker extends ExmDatePickerBase {
|
|
12
|
+
static styles: import("lit").CSSResult[];
|
|
13
|
+
}
|
|
14
|
+
declare global {
|
|
15
|
+
interface HTMLElementTagNameMap {
|
|
16
|
+
'exm-date-picker': ExmDatePicker;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators/custom-element.js';
|
|
3
|
+
import '@material/web/progress/circular-progress.js';
|
|
4
|
+
import { style } from './styles/exm-date-picker-styles-css.js';
|
|
5
|
+
import { ExmDatePickerBase } from './exm-date-picker-base.js';
|
|
6
|
+
/**
|
|
7
|
+
* exm-date-picker
|
|
8
|
+
*
|
|
9
|
+
* Material 3 styled date picker component.
|
|
10
|
+
*
|
|
11
|
+
* @customElement exm-date-picker
|
|
12
|
+
* @extends ExmDatePickerBase
|
|
13
|
+
*/
|
|
14
|
+
let ExmDatePicker = class ExmDatePicker extends ExmDatePickerBase {
|
|
15
|
+
};
|
|
16
|
+
ExmDatePicker.styles = [style];
|
|
17
|
+
ExmDatePicker = __decorate([
|
|
18
|
+
customElement('exm-date-picker')
|
|
19
|
+
], ExmDatePicker);
|
|
20
|
+
export { ExmDatePicker };
|
|
21
|
+
//# sourceMappingURL=exm-date-picker.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { ExmDatePicker } from './exm-date-picker.js';
|
|
2
|
+
export { ExmDatePickerBase } from './exm-date-picker-base.js';
|
|
3
|
+
export { ExmDatePickerInput } from './exm-date-picker-input.js';
|
|
4
|
+
export { ExmDatePickerInputBase } from './exm-date-picker-input-base.js';
|
|
5
|
+
export { ExmDatePickerYearGrid } from './exm-date-picker-year-grid.js';
|
|
6
|
+
export { style as datePickerInputStyles } from './styles/exm-date-picker-input-styles-css.js';
|
|
7
|
+
export { style as datePickerYearGridStyles } from './styles/exm-date-picker-year-grid-styles-css.js';
|
|
8
|
+
export { style as datePickerStyles } from './styles/exm-date-picker-styles-css.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { ExmDatePicker } from './exm-date-picker.js';
|
|
2
|
+
export { ExmDatePickerBase } from './exm-date-picker-base.js';
|
|
3
|
+
export { ExmDatePickerInput } from './exm-date-picker-input.js';
|
|
4
|
+
export { ExmDatePickerInputBase } from './exm-date-picker-input-base.js';
|
|
5
|
+
export { ExmDatePickerYearGrid } from './exm-date-picker-year-grid.js';
|
|
6
|
+
export { style as datePickerInputStyles } from './styles/exm-date-picker-input-styles-css.js';
|
|
7
|
+
export { style as datePickerYearGridStyles } from './styles/exm-date-picker-year-grid-styles-css.js';
|
|
8
|
+
export { style as datePickerStyles } from './styles/exm-date-picker-styles-css.js';
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|