@melodicdev/components 1.5.12 → 1.5.13
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/assets/melodic-components.js +443 -44
- package/assets/melodic-components.js.map +1 -1
- package/assets/melodic-components.min.js +1706 -1361
- package/lib/components/forms/date-picker/calendar.component.d.ts +48 -0
- package/lib/components/forms/date-picker/calendar.component.d.ts.map +1 -1
- package/lib/components/forms/date-picker/calendar.component.js +231 -3
- package/lib/components/forms/date-picker/calendar.styles.d.ts.map +1 -1
- package/lib/components/forms/date-picker/calendar.styles.js +104 -2
- package/lib/components/forms/date-picker/calendar.template.d.ts.map +1 -1
- package/lib/components/forms/date-picker/calendar.template.js +128 -39
- package/lib/components/forms/date-picker/date-picker.component.d.ts +4 -0
- package/lib/components/forms/date-picker/date-picker.component.d.ts.map +1 -1
- package/lib/components/forms/date-picker/date-picker.component.js +5 -1
- package/lib/components/forms/date-picker/date-picker.template.d.ts.map +1 -1
- package/lib/components/forms/date-picker/date-picker.template.js +2 -0
- package/package.json +1 -1
|
@@ -1,55 +1,144 @@
|
|
|
1
|
-
import { html, classMap, repeat } from '@melodicdev/core';
|
|
1
|
+
import { html, classMap, repeat, when } from '@melodicdev/core';
|
|
2
|
+
function dayGrid(c) {
|
|
3
|
+
return html `
|
|
4
|
+
<div class="ml-calendar__weekdays" role="row">
|
|
5
|
+
${repeat(c.weekdays, (d) => d, (d) => html `
|
|
6
|
+
<span class="ml-calendar__weekday" role="columnheader">${d}</span>
|
|
7
|
+
`)}
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div class="ml-calendar__grid" @keydown=${c.handleGridKeyDown}>
|
|
11
|
+
${repeat(c.days, (day) => day.iso, (day) => html `
|
|
12
|
+
<button
|
|
13
|
+
type="button"
|
|
14
|
+
class=${classMap({
|
|
15
|
+
'ml-calendar__day': true,
|
|
16
|
+
'ml-calendar__day--other-month': !day.isCurrentMonth,
|
|
17
|
+
'ml-calendar__day--today': day.isToday,
|
|
18
|
+
'ml-calendar__day--selected': day.isSelected,
|
|
19
|
+
'ml-calendar__day--disabled': day.isDisabled
|
|
20
|
+
})}
|
|
21
|
+
?disabled=${day.isDisabled || !day.isCurrentMonth}
|
|
22
|
+
tabindex=${day.isCurrentMonth ? '0' : '-1'}
|
|
23
|
+
aria-selected=${day.isSelected ? 'true' : 'false'}
|
|
24
|
+
aria-label=${day.iso}
|
|
25
|
+
@click=${() => c.selectDay(day)}
|
|
26
|
+
>
|
|
27
|
+
<span class="ml-calendar__day-number">${day.date}</span>
|
|
28
|
+
${day.isToday ? html `<span class="ml-calendar__today-dot"></span>` : ''}
|
|
29
|
+
</button>
|
|
30
|
+
`)}
|
|
31
|
+
</div>
|
|
32
|
+
`;
|
|
33
|
+
}
|
|
34
|
+
function monthGrid(c) {
|
|
35
|
+
return html `
|
|
36
|
+
<div class="ml-calendar__cell-grid" @keydown=${c.handleGridKeyDown}>
|
|
37
|
+
${repeat(c.months, (m) => m.index, (m) => html `
|
|
38
|
+
<button
|
|
39
|
+
type="button"
|
|
40
|
+
class=${classMap({
|
|
41
|
+
'ml-calendar__cell': true,
|
|
42
|
+
'ml-calendar__cell--selected': m.isSelected,
|
|
43
|
+
'ml-calendar__cell--current': m.isCurrent,
|
|
44
|
+
'ml-calendar__cell--disabled': m.isDisabled
|
|
45
|
+
})}
|
|
46
|
+
?disabled=${m.isDisabled}
|
|
47
|
+
tabindex="0"
|
|
48
|
+
aria-selected=${m.isSelected ? 'true' : 'false'}
|
|
49
|
+
aria-label=${m.label}
|
|
50
|
+
@click=${() => c.selectViewMonth(m)}
|
|
51
|
+
>
|
|
52
|
+
${m.label}
|
|
53
|
+
</button>
|
|
54
|
+
`)}
|
|
55
|
+
</div>
|
|
56
|
+
`;
|
|
57
|
+
}
|
|
58
|
+
function yearGrid(c) {
|
|
59
|
+
return html `
|
|
60
|
+
<div class="ml-calendar__cell-grid" @keydown=${c.handleGridKeyDown}>
|
|
61
|
+
${repeat(c.years, (y) => y.year, (y) => html `
|
|
62
|
+
<button
|
|
63
|
+
type="button"
|
|
64
|
+
class=${classMap({
|
|
65
|
+
'ml-calendar__cell': true,
|
|
66
|
+
'ml-calendar__cell--selected': y.isSelected,
|
|
67
|
+
'ml-calendar__cell--current': y.isCurrent,
|
|
68
|
+
'ml-calendar__cell--disabled': y.isDisabled
|
|
69
|
+
})}
|
|
70
|
+
?disabled=${y.isDisabled}
|
|
71
|
+
tabindex=${y.isDisabled ? '-1' : '0'}
|
|
72
|
+
aria-selected=${y.isSelected ? 'true' : 'false'}
|
|
73
|
+
aria-label=${String(y.year)}
|
|
74
|
+
@click=${() => c.selectViewYear(y)}
|
|
75
|
+
>
|
|
76
|
+
${y.year}
|
|
77
|
+
</button>
|
|
78
|
+
`)}
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
|
81
|
+
}
|
|
2
82
|
export function calendarTemplate(c) {
|
|
3
83
|
return html `
|
|
4
|
-
<div class
|
|
84
|
+
<div class=${classMap({
|
|
85
|
+
'ml-calendar': true,
|
|
86
|
+
[`ml-calendar--view-${c.view}`]: true
|
|
87
|
+
})} role="grid" aria-label=${c.headerLabel}>
|
|
5
88
|
<div class="ml-calendar__header">
|
|
6
89
|
<div class="ml-calendar__nav-group">
|
|
7
|
-
<button type="button" class="ml-calendar__nav" aria-label="Previous
|
|
90
|
+
<button type="button" class="ml-calendar__nav" aria-label="Previous" @click=${c.headerPrevFar}>
|
|
8
91
|
<ml-icon icon="caret-double-left" size="sm"></ml-icon>
|
|
9
92
|
</button>
|
|
10
|
-
|
|
11
|
-
<
|
|
12
|
-
|
|
93
|
+
${when(c.view === 'day', () => html `
|
|
94
|
+
<button type="button" class="ml-calendar__nav" aria-label="Previous month" @click=${c.prevMonth}>
|
|
95
|
+
<ml-icon icon="caret-left" size="sm"></ml-icon>
|
|
96
|
+
</button>
|
|
97
|
+
`)}
|
|
13
98
|
</div>
|
|
14
|
-
|
|
99
|
+
|
|
100
|
+
${when(c.view === 'day', () => html `
|
|
101
|
+
<div class="ml-calendar__title">
|
|
102
|
+
<button
|
|
103
|
+
type="button"
|
|
104
|
+
class="ml-calendar__title-btn"
|
|
105
|
+
aria-label="Select month"
|
|
106
|
+
aria-expanded="false"
|
|
107
|
+
@click=${c.openMonthView}
|
|
108
|
+
>${c.monthLabel}</button>
|
|
109
|
+
<button
|
|
110
|
+
type="button"
|
|
111
|
+
class="ml-calendar__title-btn"
|
|
112
|
+
aria-label="Select year"
|
|
113
|
+
aria-expanded="false"
|
|
114
|
+
@click=${c.openYearView}
|
|
115
|
+
>${c.viewYear}</button>
|
|
116
|
+
</div>
|
|
117
|
+
`, () => html `
|
|
118
|
+
<button
|
|
119
|
+
type="button"
|
|
120
|
+
class="ml-calendar__title-btn ml-calendar__title-btn--wide"
|
|
121
|
+
aria-label=${c.view === 'month' ? 'Back to day view' : 'Select year'}
|
|
122
|
+
aria-expanded="true"
|
|
123
|
+
@click=${c.view === 'month' ? c.openMonthView : c.openYearView}
|
|
124
|
+
>${c.headerLabel}</button>
|
|
125
|
+
`)}
|
|
126
|
+
|
|
15
127
|
<div class="ml-calendar__nav-group">
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
128
|
+
${when(c.view === 'day', () => html `
|
|
129
|
+
<button type="button" class="ml-calendar__nav" aria-label="Next month" @click=${c.nextMonth}>
|
|
130
|
+
<ml-icon icon="caret-right" size="sm"></ml-icon>
|
|
131
|
+
</button>
|
|
132
|
+
`)}
|
|
133
|
+
<button type="button" class="ml-calendar__nav" aria-label="Next" @click=${c.headerNextFar}>
|
|
20
134
|
<ml-icon icon="caret-double-right" size="sm"></ml-icon>
|
|
21
135
|
</button>
|
|
22
136
|
</div>
|
|
23
137
|
</div>
|
|
24
138
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
`)}
|
|
29
|
-
</div>
|
|
30
|
-
|
|
31
|
-
<div class="ml-calendar__grid">
|
|
32
|
-
${repeat(c.days, (day) => day.iso, (day) => html `
|
|
33
|
-
<button
|
|
34
|
-
type="button"
|
|
35
|
-
class=${classMap({
|
|
36
|
-
'ml-calendar__day': true,
|
|
37
|
-
'ml-calendar__day--other-month': !day.isCurrentMonth,
|
|
38
|
-
'ml-calendar__day--today': day.isToday,
|
|
39
|
-
'ml-calendar__day--selected': day.isSelected,
|
|
40
|
-
'ml-calendar__day--disabled': day.isDisabled
|
|
41
|
-
})}
|
|
42
|
-
?disabled=${day.isDisabled || !day.isCurrentMonth}
|
|
43
|
-
tabindex=${day.isCurrentMonth ? '0' : '-1'}
|
|
44
|
-
aria-selected=${day.isSelected ? 'true' : 'false'}
|
|
45
|
-
aria-label=${day.iso}
|
|
46
|
-
@click=${() => c.selectDay(day)}
|
|
47
|
-
>
|
|
48
|
-
<span class="ml-calendar__day-number">${day.date}</span>
|
|
49
|
-
${day.isToday ? html `<span class="ml-calendar__today-dot"></span>` : ''}
|
|
50
|
-
</button>
|
|
51
|
-
`)}
|
|
52
|
-
</div>
|
|
139
|
+
${when(c.view === 'day', () => dayGrid(c))}
|
|
140
|
+
${when(c.view === 'month', () => monthGrid(c))}
|
|
141
|
+
${when(c.view === 'year', () => yearGrid(c))}
|
|
53
142
|
|
|
54
143
|
<div class="ml-calendar__footer">
|
|
55
144
|
<button type="button" class="ml-calendar__today-btn" @click=${c.goToToday}>Today</button>
|
|
@@ -34,6 +34,10 @@ export declare class DatePickerComponent implements IElementRef, OnCreate, OnDes
|
|
|
34
34
|
min: string;
|
|
35
35
|
/** Maximum selectable date (YYYY-MM-DD) */
|
|
36
36
|
max: string;
|
|
37
|
+
/** Earliest year reachable in the year picker (defaults to currentYear - 120) */
|
|
38
|
+
minYear: number | string;
|
|
39
|
+
/** Latest year reachable in the year picker (defaults to currentYear + 10) */
|
|
40
|
+
maxYear: number | string;
|
|
37
41
|
/** Whether the calendar popover is open */
|
|
38
42
|
isOpen: boolean;
|
|
39
43
|
private _cleanupAutoUpdate;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,MAAM,UAAS;IAEtB,OAAO,CAAC,kBAAkB,CAA6B;IAEhD,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,cAAc,QAAO,IAAI,CAM9B;IAEF,uDAAuD;IAChD,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAGvC;IAEF,4CAA4C;IACrC,gBAAgB,QAAO,IAAI,CAIhC;IAEF,oFAAoF;IAC7E,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAK5C;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmBjD;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}
|
|
1
|
+
{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,iFAAiF;IAC1E,OAAO,EAAE,MAAM,GAAG,MAAM,CAAM;IAErC,8EAA8E;IACvE,OAAO,EAAE,MAAM,GAAG,MAAM,CAAM;IAErC,2CAA2C;IACpC,MAAM,UAAS;IAEtB,OAAO,CAAC,kBAAkB,CAA6B;IAEhD,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,cAAc,QAAO,IAAI,CAM9B;IAEF,uDAAuD;IAChD,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAGvC;IAEF,4CAA4C;IACrC,gBAAgB,QAAO,IAAI,CAIhC;IAEF,oFAAoF;IAC7E,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAK5C;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmBjD;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}
|
|
@@ -43,6 +43,10 @@ let DatePickerComponent = class DatePickerComponent {
|
|
|
43
43
|
this.min = '';
|
|
44
44
|
/** Maximum selectable date (YYYY-MM-DD) */
|
|
45
45
|
this.max = '';
|
|
46
|
+
/** Earliest year reachable in the year picker (defaults to currentYear - 120) */
|
|
47
|
+
this.minYear = '';
|
|
48
|
+
/** Latest year reachable in the year picker (defaults to currentYear + 10) */
|
|
49
|
+
this.maxYear = '';
|
|
46
50
|
/** Whether the calendar popover is open */
|
|
47
51
|
this.isOpen = false;
|
|
48
52
|
this._cleanupAutoUpdate = null;
|
|
@@ -172,7 +176,7 @@ DatePickerComponent = __decorate([
|
|
|
172
176
|
selector: 'ml-date-picker',
|
|
173
177
|
template: datePickerTemplate,
|
|
174
178
|
styles: datePickerStyles,
|
|
175
|
-
attributes: ['value', 'placeholder', 'label', 'hint', 'error', 'size', 'disabled', 'required', 'min', 'max']
|
|
179
|
+
attributes: ['value', 'placeholder', 'label', 'hint', 'error', 'size', 'disabled', 'required', 'min', 'max', 'min-year', 'max-year']
|
|
176
180
|
})
|
|
177
181
|
], DatePickerComponent);
|
|
178
182
|
export { DatePickerComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"date-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CA8DxD"}
|