feat(datepicker): add week select support

components/datepicker/src/vwc-datepicker.scss

@@ -92,15 +92,17 @@ vwc-menu {
 			}
 
 			&:nth-child(7n) {
-				&.flatpickr-day.inRange {
+				&.flatpickr-day.inRange,
+				&.flatpickr-day.week {
 					border-bottom-right-radius: 15px;
 					border-top-right-radius: 15px;
 					box-shadow: -5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20});
 				}
 			}
 
 			&:nth-child(7n + 1) {
-				&.flatpickr-day.inRange {
+				&.flatpickr-day.inRange,
+				&.flatpickr-day.week {
 					border-bottom-left-radius: 15px;
 					border-top-left-radius: 15px;
 					box-shadow: 5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20});
@@ -120,17 +122,13 @@ vwc-menu {
 			}
 
 			&.prevMonthDay,
+			&.nextMonthDay,
 			&.flatpickr-disabled {
 				color: var(#{scheme-variables.$vvd-color-neutral-50});
 				cursor: default;
 				pointer-events: none;
 			}
 
-			&.nextMonthDay {
-				height: 0;
-				visibility: hidden;
-			}
-
 			&:hover,
 			&.startRange,
 			&.endRange,
@@ -146,19 +144,12 @@ vwc-menu {
 				}
 			}
 
-			&.selected:not(.startRange):not(.endRange) {
+			&.selected:not(.startRange):not(.endRange):not(.week) {
 				&::before {
 					background-color: var(#{scheme-variables.$vvd-color-announcement});
 				}
 			}
 
-			// &.selected {
-			//   &::before {
-			//       animation-name: none;
-			//       background-color: $black;
-			//   }
-			// }
-
 			&.startRange + .inRange,
 			&.endRange {
 				&::after {
@@ -181,7 +172,8 @@ vwc-menu {
 			}
 
 			&.inRange,
-			&.inRange.today {
+			&.inRange.today,
+			&.week.selected {
 				border-color: var(#{scheme-variables.$vvd-color-neutral-20});
 				background-color: var(#{scheme-variables.$vvd-color-neutral-20});
 				box-shadow: -5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20}),
@@ -263,6 +255,66 @@ vwc-menu {
 	}
 }
 
+
+//------------
+// week select
+//------------
+:host([weekSelect]) {
+	.flatpickr-calendar.vvd-datepicker .flatpickr-day {
+		&.inRange {
+			font-weight: normal;
+
+			&:hover,
+			&.today:hover {
+				z-index: 0;
+				color: var(#{scheme-variables.$vvd-color-on-primary});
+
+				&::before {
+					background-color: var(#{scheme-variables.$vvd-color-primary});
+				}
+			}
+		}
+
+		&.selected {
+			&::before {
+				background-color: transparent;
+			}
+
+			&.week {
+				color: var(#{scheme-variables.$vvd-color-on-base});
+				font-weight: normal;
+
+				&:hover {
+					color: var(#{scheme-variables.$vvd-color-on-primary});
+				}
+			}
+
+			&.vvd-selected-week-day {
+				z-index: 0;
+				color: var(#{scheme-variables.$vvd-color-on-announcement});
+
+				&::before {
+					background-color: var(#{scheme-variables.$vvd-color-announcement});
+				}
+			}
+		}
+
+		&.today {
+			z-index: 0;
+		}
+	}
+
+	.inline {
+		.flatpickr-day {
+			&.inRange,
+			&.week.selected:not(:nth-child(7n)):not(:nth-child(7n + 1)) {
+				box-shadow: -10px 0 0 var(#{scheme-variables.$vvd-color-neutral-20}),
+					10px 0 0 var(#{scheme-variables.$vvd-color-neutral-20});
+			}
+		}
+	}
+}
+
 //--------------
 // custom header
 //--------------

components/datepicker/src/vwc-datepicker.ts

@@ -5,6 +5,7 @@ import {
 	customElement, property, html, CSSResult, query
 } from 'lit-element';
 import { LitFlatpickr } from 'lit-flatpickr';
+import * as weekSelectPlugin from 'flatpickr/dist/plugins/weekSelect/weekSelect';
 import { Options } from 'flatpickr/dist/types/options';
 import { style as vwcDatepickerStyles } from './vwc-datepicker.css.js';
 import { VWCButton } from '@vonage/vwc-button';
@@ -32,6 +33,9 @@ export class VWCDatepicker extends LitFlatpickr {
 	@property({ type: Boolean, reflect: true })
 	monthPicker = false;
 
+	@property({ type: Boolean, reflect: true })
+	weekSelect = false;
+
 	@property({ type: Boolean, reflect: true })
 	closeOnSelect = false;
 
@@ -42,6 +46,8 @@ export class VWCDatepicker extends LitFlatpickr {
 
 	private appendTo: HTMLElement | undefined;
 
+	private plugins: Array<any> = [];
+
 	constructor() {
 		super();
 		// override LitFlatpickr to work with [flatpickr change](https://github.com/flatpickr/flatpickr/blame/07cf1b1ba5ec71da511c295f622d60eed3bf3eb7/src/index.ts#L1522)
@@ -66,6 +72,10 @@ export class VWCDatepicker extends LitFlatpickr {
 			const menu = this.shadowRoot?.querySelector('vwc-menu');
 			if (menu) menu.open = false;
 		};
+
+		if (this.weekSelect) {
+			this.plugins.push(weekSelectPlugin.default());
+		}
 	}
 
 	// override lit-flatpicker
@@ -104,6 +114,8 @@ export class VWCDatepicker extends LitFlatpickr {
 		this.appendTo = this.datepickerWrapper;
 		this.initializeComponent();
 		this.renderCustomParts();
+		this.disableAdjacentMonthDays();
+		this.inlineDayClickHandlers();
 	}
 
 	private renderCustomParts(): void {
@@ -131,7 +143,17 @@ export class VWCDatepicker extends LitFlatpickr {
 		}
 		this._instance?.mobileInput?.setAttribute('slot', 'formInputElement');
 
-		this.disablePrevMonthDays();
+		// clear week select hover on mouseleave
+		if (this.weekSelect) {
+			const daysContainer = this._instance?.daysContainer;
+
+			daysContainer?.addEventListener('mouseleave', () => {
+				const days = daysContainer.querySelectorAll('.flatpickr-day');
+				days.forEach((day) => {
+					day.classList.remove('inRange');
+				});
+			});
+		}
 	}
 
 	private changeHandler(): void {
@@ -158,6 +180,8 @@ export class VWCDatepicker extends LitFlatpickr {
 				rangeEnd.classList.toggle('vvd-selected', !!endDate);
 			}
 		}
+
+		this.highlightSelectedWeekDay();
 	}
 
 	private renderHeader(): void {
@@ -225,6 +249,8 @@ export class VWCDatepicker extends LitFlatpickr {
 
 		this.updateHeaderMonth();
 		this.updateHeaderYear();
+		this.highlightSelectedWeekDay();
+		this.disableAdjacentMonthDays();
 	}
 
 	private updateHeaderMonth(): void {
@@ -340,6 +366,7 @@ export class VWCDatepicker extends LitFlatpickr {
 			this._instance?.changeMonth(selectedMonth - this._instance.currentMonth);
 			this.updateHeaderMonth();
 			this.updateHeaderYear();
+			this.highlightSelectedWeekDay();
 		}
 	}
 
@@ -391,13 +418,43 @@ export class VWCDatepicker extends LitFlatpickr {
 		}
 	}
 
-	private disablePrevMonthDays(): void {
-		const prevMonthDays = this._instance?.calendarContainer.querySelectorAll('.prevMonthDay');
-		prevMonthDays?.forEach((day) => {
+	private highlightSelectedWeekDay(): void {
+		if (this._instance && this.weekSelect) {
+			const className = 'vvd-selected-week-day';
+			const selectedWeekDay = this._instance.calendarContainer.querySelector(`.${className}`);
+			selectedWeekDay?.classList.remove(className);
+			this._instance.selectedDateElem?.classList.add(className);
+		}
+
+		// reset inline day handlers after lit-flatpickr update
+		if (this.inline && this.weekSelect) {
+			this.inlineDayClickHandlers();
+		}
+	}
+
+	private disableAdjacentMonthDays(): void {
+		const disabledMonthDays = this._instance?.calendarContainer.querySelectorAll('.prevMonthDay, .nextMonthDay');
+
+		disabledMonthDays?.forEach((day) => {
 			day.setAttribute('aria-disabled', 'true');
 		});
 	}
 
+	private inlineDayClickHandlers(): void {
+		// inline mode doesn't dispatch change event on day select so trigger changeHandler here
+		if (this.inline && this.weekSelect) {
+			const days = this._instance?.calendarContainer.querySelectorAll('.flatpickr-day') as NodeListOf<HTMLElement>;
+
+			days.forEach((day) => {
+				day.onclick = () => {
+					setTimeout(() => {
+						this.changeHandler();
+					}, 0);
+				};
+			});
+		}
+	}
+
 	// copied from lit-flatpickr
 	// add additional config options
 	getOptions(): Options {
@@ -443,6 +500,7 @@ export class VWCDatepicker extends LitFlatpickr {
 			wrap: this.wrap,
 			// additional config options
 			...(this.enable && { enable: this.enable }),
+			...(this.plugins.length && { plugins: this.plugins }),
 			appendTo: this.appendTo,
 			closeOnSelect: this.closeOnSelect
 		};

components/datepicker/stories/arg-types.js

@@ -11,6 +11,12 @@ export const argTypes = {
 			options: ['single', 'multiple', 'range']
 		}
 	},
+	weekSelect: {
+		control: {
+			type: 'inline-radio',
+			options: { 'true': '', 'false': undefined }
+		}
+	},
 	monthPicker: {
 		control: {
 			type: 'inline-radio',
@@ -97,6 +103,5 @@ export const argTypes = {
 	},
 	styles: { table: { disable: true } },
 	theme: { table: { disable: true } },
-	weekSelect: { table: { disable: true } },
 	clickOpens: { table: { disable: true } }
 }

components/datepicker/stories/datepicker-week-select.stories.js

@@ -0,0 +1,30 @@
+import '@vonage/vwc-datepicker';
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+
+const Template = args => html`
+  <vwc-datepicker id="datepicker" ...=${spread(args)}></vwc-datepicker>
+
+  <script>
+    datepicker.onChange = () => {
+      const weekNumber = datepicker.getSelectedDates()[0]
+        ? datepicker.getConfig().getWeek(datepicker.getSelectedDates()[0])
+        : null;
+
+      console.log(weekNumber);
+    };
+  </script>
+
+  <pre><code class="js language-js">
+    datepicker.onChange = () => {
+      const weekNumber = datepicker.getSelectedDates()[0]
+        ? datepicker.getConfig().getWeek(datepicker.getSelectedDates()[0])
+        : null;
+
+      console.log(weekNumber);
+    };
+  </code></pre>
+`;
+
+export const WeekSelect = Template.bind({});
+WeekSelect.args = { weekSelect: '', inline: '' };

components/datepicker/stories/datepicker.stories.js

@@ -42,6 +42,10 @@ const InlineTemplate = args => html`<vwc-datepicker ...=${spread(args)}></vwc-da
 export const Inline = InlineTemplate.bind({});
 Inline.args = { inline: '' };
 
+export {
+	WeekSelect
+} from './datepicker-week-select.stories.js';
+
 export {
 	Dialog
 } from './datepicker-dialog.stories.js';

components/datepicker/test/datepicker.test.js

@@ -159,4 +159,23 @@ describe('datepicker', () => {
 			expect(customFooter).to.not.exist;
 		});
 	});
+
+	it('should highlight selected week day when set to weekSelect', async () => {
+		const [actualElement] = addElement(
+			textToDomToParent(`
+				<${COMPONENT_NAME} inline weekSelect></${COMPONENT_NAME}>
+			`)
+		);
+		await actualElement.onReady;
+		await waitNextTask();
+
+		actualElement.defaultDate = 'today';
+		await waitNextTask();
+
+		actualElement.highlightSelectedWeekDay();
+
+		const selectedWeekDay = actualElement._instance.selectedDateElem;
+		expect(selectedWeekDay).to.exist;
+		expect(selectedWeekDay.classList.contains('vvd-selected-week-day')).true;
+	});
 });