@melodicdev/components 1.5.11 → 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.
Files changed (21) hide show
  1. package/assets/melodic-components.js +486 -60
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +1742 -1376
  4. package/lib/components/forms/button/button.component.d.ts +8 -0
  5. package/lib/components/forms/button/button.component.d.ts.map +1 -1
  6. package/lib/components/forms/button/button.component.js +9 -1
  7. package/lib/components/forms/button/button.template.d.ts.map +1 -1
  8. package/lib/components/forms/button/button.template.js +36 -15
  9. package/lib/components/forms/date-picker/calendar.component.d.ts +48 -0
  10. package/lib/components/forms/date-picker/calendar.component.d.ts.map +1 -1
  11. package/lib/components/forms/date-picker/calendar.component.js +231 -3
  12. package/lib/components/forms/date-picker/calendar.styles.d.ts.map +1 -1
  13. package/lib/components/forms/date-picker/calendar.styles.js +104 -2
  14. package/lib/components/forms/date-picker/calendar.template.d.ts.map +1 -1
  15. package/lib/components/forms/date-picker/calendar.template.js +128 -39
  16. package/lib/components/forms/date-picker/date-picker.component.d.ts +4 -0
  17. package/lib/components/forms/date-picker/date-picker.component.d.ts.map +1 -1
  18. package/lib/components/forms/date-picker/date-picker.component.js +5 -1
  19. package/lib/components/forms/date-picker/date-picker.template.d.ts.map +1 -1
  20. package/lib/components/forms/date-picker/date-picker.template.js +2 -0
  21. package/package.json +1 -1
package/lib/components/forms/date-picker/calendar.template.js CHANGED
@@ -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="ml-calendar" role="grid" aria-label=${c.monthLabel}>
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 year" @click=${c.prevYear}>
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
- <button type="button" class="ml-calendar__nav" aria-label="Previous month" @click=${c.prevMonth}>
11
- <ml-icon icon="caret-left" size="sm"></ml-icon>
12
- </button>
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
- <span class="ml-calendar__month-label">${c.monthLabel}</span>
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
- <button type="button" class="ml-calendar__nav" aria-label="Next month" @click=${c.nextMonth}>
17
- <ml-icon icon="caret-right" size="sm"></ml-icon>
18
- </button>
19
- <button type="button" class="ml-calendar__nav" aria-label="Next year" @click=${c.nextYear}>
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
- <div class="ml-calendar__weekdays" role="row">
26
- ${repeat(c.weekdays, (d) => d, (d) => html `
27
- <span class="ml-calendar__weekday" role="columnheader">${d}</span>
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>
package/lib/components/forms/date-picker/date-picker.component.d.ts CHANGED
@@ -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;
package/lib/components/forms/date-picker/date-picker.component.d.ts.map CHANGED
@@ -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"}
package/lib/components/forms/date-picker/date-picker.component.js CHANGED
@@ -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 };
package/lib/components/forms/date-picker/date-picker.template.d.ts.map CHANGED
@@ -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,6CA4DxD"}
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"}
package/lib/components/forms/date-picker/date-picker.template.js CHANGED
@@ -48,6 +48,8 @@ export function datePickerTemplate(c) {
48
48
  value=${c.value}
49
49
  min=${c.min}
50
50
  max=${c.max}
51
+ min-year=${c.minYear}
52
+ max-year=${c.maxYear}
51
53
  @ml:select=${c.handleDateSelect}
52
54
  ></ml-calendar>
53
55
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@melodicdev/components",
3
- "version": "1.5.11",
3
+ "version": "1.5.13",
4
4
  "description": "Themeable UI component library built on the Melodic Framework",
5
5
  "license": "MIT",
6
6
  "author": "Melodic Development",