Move files

Vonage · Feb 24, 2025 · d75c896 · d75c896
1 parent b4c5fcd
commit d75c896
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 47 deletions.
diff --git a/libs/components/src/lib/date-picker/date-picker.ts b/libs/components/src/lib/date-picker/date-picker.ts
@@ -5,7 +5,7 @@ import {
 	type FormElement,
 	formElements,
 } from '../../shared/patterns';
-import { DatePickerBase } from '../../shared/date-picker/date-picker-base';
+import { CalendarPicker } from '../../shared/picker-field/mixins/calendar-picker';
 import {
 	type DateStr,
 	isValidDateStr,
@@ -27,7 +27,7 @@ import {
  */
 @errorText
 @formElements
-export class DatePicker extends DatePickerBase {
+export class DatePicker extends CalendarPicker {
 	/**
 	 * @internal
 	 */

diff --git a/libs/components/src/lib/date-picker/definition.ts b/libs/components/src/lib/date-picker/definition.ts
@@ -3,7 +3,7 @@ import { buttonDefinition } from '../button/definition';
 import { textFieldDefinition } from '../text-field/definition';
 import { dividerDefinition } from '../divider/definition';
 import styles from '../../shared/date-picker/date-picker-base.scss?inline';
-import { DatePickerBaseTemplate as template } from '../../shared/date-picker/date-picker-base.template';
+import { CalendarPickerTemplate as template } from '../../shared/picker-field/mixins/calendar-picker.template';
 import { createRegisterFunction } from '../../shared/design-system/createRegisterFunction';
 import { defineVividComponent } from '../../shared/design-system/defineVividComponent';
 import { DatePicker } from './date-picker';

diff --git a/libs/components/src/lib/date-range-picker/date-range-picker.ts b/libs/components/src/lib/date-range-picker/date-range-picker.ts
@@ -15,7 +15,7 @@ import {
 	formatRange,
 	parsePresentationDateRange,
 } from '../../shared/date-picker/calendar/presentationDateRange';
-import { DatePickerBase } from '../../shared/date-picker/date-picker-base';
+import { CalendarPicker } from '../../shared/picker-field/mixins/calendar-picker';
 import { formatPresentationDate } from '../../shared/date-picker/calendar/presentationDate';
 import type { DateRange } from '../../shared/date-picker/calendar/dateRange';
 
@@ -40,7 +40,7 @@ function isDefined<T>(value: T | null | undefined): value is T {
  */
 @errorText
 @formElements
-export class DateRangePicker extends DatePickerBase {
+export class DateRangePicker extends CalendarPicker {
 	/**
 	 * The initial start value. This value sets the `start` property
 	 * only when the `start` property has not been explicitly set.

diff --git a/libs/components/src/lib/date-range-picker/definition.ts b/libs/components/src/lib/date-range-picker/definition.ts
@@ -3,7 +3,7 @@ import { popupDefinition } from '../popup/definition';
 import { textFieldDefinition } from '../text-field/definition';
 import { dividerDefinition } from '../divider/definition';
 import styles from '../../shared/date-picker/date-picker-base.scss?inline';
-import { DatePickerBaseTemplate as template } from '../../shared/date-picker/date-picker-base.template';
+import { CalendarPickerTemplate as template } from '../../shared/picker-field/mixins/calendar-picker.template';
 import { createRegisterFunction } from '../../shared/design-system/createRegisterFunction';
 import { defineVividComponent } from '../../shared/design-system/defineVividComponent';
 import { DateRangePicker } from './date-range-picker';

diff --git a/libs/components/src/shared/date-picker/date-picker-base.spec.ts b/libs/components/src/shared/date-picker/date-picker-base.spec.ts
@@ -9,7 +9,7 @@ import {
 import { TextField } from '../../lib/text-field/text-field';
 import { Popup } from '../../lib/popup/popup';
 import { Button } from '../../lib/button/button';
-import { DatePickerBase } from './date-picker-base';
+import { CalendarPicker } from '../picker-field/mixins/calendar-picker';
 import '../../lib/date-picker';
 import '../../lib/date-range-picker';
 
@@ -29,7 +29,7 @@ vi.mock('./calendar/dateStr.ts', async () => ({
 describe.each([['vwc-date-picker'], ['vwc-date-range-picker']])(
 	'%s',
 	(COMPONENT_TAG) => {
-		let element: DatePickerBase;
+		let element: CalendarPicker;
 		let textField: TextField;
 		let calendarButton: Button;
 		let popup: Popup;
@@ -89,7 +89,7 @@ describe.each([['vwc-date-picker'], ['vwc-date-range-picker']])(
 		beforeEach(async () => {
 			element = (await fixture(
 				`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-			)) as DatePickerBase;
+			)) as CalendarPicker;
 			textField = element.shadowRoot!.querySelector('.control') as TextField;
 			calendarButton = element.shadowRoot!.querySelector(
 				'#calendar-button'
@@ -716,7 +716,7 @@ describe.each([['vwc-date-picker'], ['vwc-date-range-picker']])(
 			});
 
 			it('should attach to closest form', async () => {
-				const { form: formElement } = createFormHTML<DatePickerBase>({
+				const { form: formElement } = createFormHTML<CalendarPicker>({
 					componentTagName: COMPONENT_TAG,
 					fieldName,
 					fieldValue,

diff --git a/.../date-picker/date-picker-base.template.ts → ...-field/mixins/calendar-picker.template.ts b/.../date-picker/date-picker-base.template.ts → ...-field/mixins/calendar-picker.template.ts
@@ -1,27 +1,30 @@
 import { html, ref, repeat, slotted, when } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { Button } from '../../lib/button/button';
-import { Popup } from '../../lib/popup/popup';
-import { TextField } from '../../lib/text-field/text-field';
-import { Divider } from '../../lib/divider/divider';
-import type { VividElementDefinitionContext } from '../design-system/defineVividComponent';
-import type { CalendarGridDate, Weekday } from './calendar/calendarGrid';
-import { areMonthsEqual, monthToStr } from './calendar/month';
-import type { MonthPickerGridCell } from './calendar/monthPickerGrid';
-import type { DatePickerBase } from './date-picker-base';
+import { Button } from '../../../lib/button/button';
+import { Popup } from '../../../lib/popup/popup';
+import { TextField } from '../../../lib/text-field/text-field';
+import { Divider } from '../../../lib/divider/divider';
+import type { VividElementDefinitionContext } from '../../design-system/defineVividComponent';
+import type {
+	CalendarGridDate,
+	Weekday,
+} from '../../date-picker/calendar/calendarGrid';
+import { areMonthsEqual, monthToStr } from '../../date-picker/calendar/month';
+import type { MonthPickerGridCell } from '../../date-picker/calendar/monthPickerGrid';
 import type {
 	CalendarSegment,
 	MonthPickerSegment,
 	Segment,
-} from './calendar/segment';
+} from '../../date-picker/calendar/segment';
+import type { CalendarPicker } from './calendar-picker';
 
 function renderDialogHeader(context: VividElementDefinitionContext) {
 	const buttonTag = context.tagFor(Button);
 
-	return html<Segment, DatePickerBase>`<div class="header">
+	return html<Segment, CalendarPicker>`<div class="header">
 		${when(
 			(x) => x.prevYearButton,
-			html<Segment, DatePickerBase>`
+			html<Segment, CalendarPicker>`
 					<${buttonTag}
 						tabindex="1"
 						class="vwc-button"
@@ -38,7 +41,7 @@ function renderDialogHeader(context: VividElementDefinitionContext) {
 		)}
 		${when(
 			(x) => x.prevMonthButton,
-			html<Segment, DatePickerBase>`
+			html<Segment, CalendarPicker>`
 					<${buttonTag}
 						tabindex="1"
 						class="vwc-button"
@@ -53,7 +56,7 @@ function renderDialogHeader(context: VividElementDefinitionContext) {
 		<div class="title">
 			${when(
 				(x) => x.titleClickable,
-				html<Segment, DatePickerBase>`
+				html<Segment, CalendarPicker>`
 					<button
 						tabindex="1"
 						id="${(x) => `grid-label-${x.id}`}"
@@ -67,7 +70,7 @@ function renderDialogHeader(context: VividElementDefinitionContext) {
 			)}
 			${when(
 				(x) => !x.titleClickable,
-				html<Segment, DatePickerBase>`
+				html<Segment, CalendarPicker>`
 					<div
 						id="${(x) => `grid-label-${x.id}`}"
 						class="title-action"
@@ -81,7 +84,7 @@ function renderDialogHeader(context: VividElementDefinitionContext) {
 
 		${when(
 			(x) => x.nextMonthButton,
-			html<Segment, DatePickerBase>`
+			html<Segment, CalendarPicker>`
 				<${buttonTag}
 					tabindex="1"
 					class="vwc-button"
@@ -95,7 +98,7 @@ function renderDialogHeader(context: VividElementDefinitionContext) {
 		)}
 		${when(
 			(x) => x.nextYearButton,
-			html<Segment, DatePickerBase>`
+			html<Segment, CalendarPicker>`
 				<${buttonTag}
 					tabindex="1"
 					class="vwc-button"
@@ -116,7 +119,7 @@ function renderDialogHeader(context: VividElementDefinitionContext) {
 function renderCalendarGrid(context: VividElementDefinitionContext) {
 	const dividerTag = context.tagFor(Divider);
 
-	return html<CalendarSegment, DatePickerBase>`<div
+	return html<CalendarSegment, CalendarPicker>`<div
 		class="calendar"
 		role="grid"
 		aria-labelledby="${(x) => `grid-label-${x.id}`}"
@@ -222,7 +225,7 @@ function renderCalendarGrid(context: VividElementDefinitionContext) {
 function renderMonthPickerGrid(context: VividElementDefinitionContext) {
 	const dividerTag = context.tagFor(Divider);
 
-	return html<MonthPickerSegment, DatePickerBase>`
+	return html<MonthPickerSegment, CalendarPicker>`
 		<${dividerTag}
 			class="months-separator"
 			role="presentation"
@@ -304,14 +307,14 @@ function renderMonthPickerGrid(context: VividElementDefinitionContext) {
 	</div>`;
 }
 
-export const DatePickerBaseTemplate = (
+export const CalendarPickerTemplate = (
 	context: VividElementDefinitionContext
 ) => {
 	const popupTag = context.tagFor(Popup);
 	const textFieldTag = context.tagFor(TextField);
 	const buttonTag = context.tagFor(Button);
 
-	return html<DatePickerBase>`<div class="base" @keydown="${(x, { event }) =>
+	return html<CalendarPicker>`<div class="base" @keydown="${(x, { event }) =>
 		x._onBaseKeyDown(event as KeyboardEvent)}">
 		<${textFieldTag} id="text-field"
 										 ${ref('_textFieldEl')}
@@ -361,11 +364,11 @@ export const DatePickerBaseTemplate = (
 							${renderDialogHeader(context)}
 							${when(
 								(x) => x.type === 'month-picker',
-								html<DatePickerBase>`${renderMonthPickerGrid(context)}`
+								html<CalendarPicker>`${renderMonthPickerGrid(context)}`
 							)}
 							${when(
 								(x) => x.type === 'calendar',
-								html<DatePickerBase>`${renderCalendarGrid(context)}`
+								html<CalendarPicker>`${renderCalendarGrid(context)}`
 							)}
 						</div>`
 					)}

diff --git a/...rc/shared/date-picker/date-picker-base.ts → ...ed/picker-field/mixins/calendar-picker.ts b/...rc/shared/date-picker/date-picker-base.ts → ...ed/picker-field/mixins/calendar-picker.ts
@@ -8,35 +8,38 @@ import {
 	type ValueConverter,
 	volatile,
 } from '@microsoft/fast-element';
-import type { TextField } from '../../lib/text-field/text-field';
-import type { Button } from '../../lib/button/button';
-import { FormElementHelperText, Localized, TrappedFocus } from '../patterns';
-import { applyMixinsWithObservables } from '../utils/applyMixinsWithObservables';
-import { handleEscapeKeyAndStopPropogation } from '../dialog/index';
+import type { TextField } from '../../../lib/text-field/text-field';
+import type { Button } from '../../../lib/button/button';
+import { FormElementHelperText, Localized, TrappedFocus } from '../../patterns';
+import { applyMixinsWithObservables } from '../../utils/applyMixinsWithObservables';
+import { handleEscapeKeyAndStopPropogation } from '../../dialog';
 import {
 	addDays,
 	compareDateStr,
 	currentDateStr,
 	type DateStr,
 	isValidDateStr,
-} from './calendar/dateStr';
+} from '../../date-picker/calendar/dateStr';
 import {
 	addMonths,
 	compareMonths,
 	getCurrentMonth,
 	type Month,
 	monthOfDate,
 	monthToStr,
-} from './calendar/month';
-import { buildCalendarGrid } from './calendar/calendarGrid';
-import { buildMonthPickerGrid, MonthsPerRow } from './calendar/monthPickerGrid';
-import { yearOfDate } from './calendar/year';
-import { FormAssociatedDatePickerBase } from './date-picker-base.form-associated';
+} from '../../date-picker/calendar/month';
+import { buildCalendarGrid } from '../../date-picker/calendar/calendarGrid';
+import {
+	buildMonthPickerGrid,
+	MonthsPerRow,
+} from '../../date-picker/calendar/monthPickerGrid';
+import { yearOfDate } from '../../date-picker/calendar/year';
+import { FormAssociatedDatePickerBase } from '../../date-picker/date-picker-base.form-associated';
 import type {
 	CalendarSegment,
 	MonthPickerSegment,
 	Segment,
-} from './calendar/segment';
+} from '../../date-picker/calendar/segment';
 
 /// Converter ensures that the value is always a valid date string or empty string
 const ValidDateFilter: ValueConverter = {
@@ -58,7 +61,7 @@ const ValidDateFilter: ValueConverter = {
  *
  * @public
  */
-export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
+export abstract class CalendarPicker extends FormAssociatedDatePickerBase {
 	// --- Attributes ---
 	abstract label: string;
 
@@ -845,7 +848,7 @@ export interface DatePickerBase
 		FormElementHelperText,
 		TrappedFocus {}
 applyMixinsWithObservables(
-	DatePickerBase,
+	CalendarPicker,
 	Localized,
 	FormElementHelperText,
 	TrappedFocus