refactor: code refactor in mixins

src/date-picker.ts

@@ -10,7 +10,6 @@ import { toUTCDate } from 'nodemod/dist/calendar/helpers/to-utc-date.js';
 
 import { resetShadowRoot } from './ stylings.js';
 import { calendarViews,MAX_DATE } from './constants.js';
-import { DatePickerMixin } from './date-picker-mixin.js';
 import { adjustOutOfRangeValue } from './helpers/adjust-out-of-range-value.js';
 import { dateValidator } from './helpers/date-validator.js';
 import { dispatchCustomEvent } from './helpers/dispatch-custom-event.js';
@@ -22,12 +21,13 @@ import { toResolvedDate } from './helpers/to-resolved-date.js';
 import { toYearList } from './helpers/to-year-list.js';
 import type { MaybeDate } from './helpers/typings.js';
 import { iconArrowDropdown, iconChevronLeft, iconChevronRight } from './icons.js';
-import { DatePickerMinMaxMixin } from './min-max-mixin.js';
+import { DatePickerMinMaxMixin } from './mixins/date-picker-min-max-mixin.js';
+import { DatePickerMixin } from './mixins/date-picker-mixin.js';
 import type { MonthCalendarData } from './month-calendar/typings.js';
 import { datePickerStyling } from './stylings.js';
-import type { CalendarView, ChangeProperties, DatePickerInterface, Formatters } from './typings.js';
+import type { CalendarView, ChangeProperties, DatePickerProperties, Formatters } from './typings.js';
 
-export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement)) implements DatePickerInterface {
+export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement)) implements DatePickerProperties {
   //#region public properties
   //#endregion public properties
 
@@ -83,7 +83,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
     this.#formatters = toFormatters(this.locale);
   }
 
-  protected update(changedProperties: ChangeProperties<DatePickerInterface>): void {
+  protected update(changedProperties: ChangeProperties<DatePickerProperties>): void {
     super.update(changedProperties);
 
     if (changedProperties.has('locale')) {
@@ -139,7 +139,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
     }
   }
 
-  protected firstUpdated(changedProperties: ChangeProperties<DatePickerInterface>): void {
+  protected firstUpdated(changedProperties: ChangeProperties<DatePickerProperties>): void {
     super.firstUpdated(changedProperties);
 
     const focusableElements: HTMLElement[] = [];
@@ -158,7 +158,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
     });
   }
 
-  protected updated(changedProperties: ChangeProperties<DatePickerInterface>): void {
+  protected updated(changedProperties: ChangeProperties<DatePickerProperties>): void {
     super.updated(changedProperties);
 
     if (this._startView === 'calendar') {

src/helpers/typings.ts

@@ -3,7 +3,7 @@ import type {
   CalendarWeekday,
 } from 'nodemod/dist/calendar/calendar_typing.js';
 
-import type { DatePickerElementProperties, Formatters, SupportedKeyCode } from '../typings.js';
+import type { DatePickerProperties, Formatters, SupportedKeyCode } from '../typings.js';
 
 export interface ComputeNextFocusedDateInit {
   hasAltKey: boolean;
@@ -31,9 +31,9 @@ export interface MultiCalendars extends Omit<Calendar, 'calendar'> {
 export interface ToMultiCalendarsInit extends
 Pick<Formatters, 'dayFormat' | 'fullDateFormat' | 'longWeekdayFormat' | 'narrowWeekdayFormat'>,
 Partial<Pick<
-  DatePickerElementProperties, 'firstDayOfWeek' | 'showWeekNumber' | 'weekLabel' | 'weekNumberType'
+  DatePickerProperties, 'firstDayOfWeek' | 'showWeekNumber' | 'weekLabel' | 'weekNumberType'
 >>,
-Pick<DatePickerElementProperties, 'locale'> {
+Pick<DatePickerProperties, 'locale'> {
   count?: number;
   disabledDates?: Date[];
   disabledDays?: number[];

src/mixins/date-picker-min-max-mixin.ts

@@ -0,0 +1,24 @@
+import type { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { nullishAttributeConverter } from '../helpers/nullish-attribute-converter.js';
+import type { Constructor } from '../typings.js';
+import type { DatePickerMinMaxProperties, MixinReturnType } from './typings.js';
+
+export const DatePickerMinMaxMixin = <BaseConstructor extends Constructor<LitElement>>(
+  SuperClass: BaseConstructor
+): MixinReturnType<BaseConstructor, DatePickerMinMaxProperties> => {
+  class DatePickerMinMaxClass extends SuperClass implements DatePickerMinMaxProperties {
+
+    @property({ reflect: true, converter: { toAttribute: nullishAttributeConverter } })
+    public max?: string;
+
+    @property({ reflect: true, converter: { toAttribute: nullishAttributeConverter } })
+    public min?: string;
+  }
+
+  return DatePickerMinMaxClass as unknown as MixinReturnType<
+    BaseConstructor,
+    DatePickerMinMaxProperties
+  >;
+};

src/date-picker-mixin.ts → src/mixins/date-picker-mixin.ts

@@ -2,21 +2,22 @@ import type { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import type { WeekNumberType } from 'nodemod/dist/calendar/calendar_typing';
 
-import { nullishAttributeConverter } from './helpers/nullish-attribute-converter.js';
-import { toDateString } from './helpers/to-date-string.js';
-import { toResolvedDate } from './helpers/to-resolved-date.js';
-import { toResolvedLocale } from './helpers/to-resolved-locale.js';
-import type { CalendarView, Constructor, DatePickerElementProperties, MixinReturnType } from './typings.js';
+import { nullishAttributeConverter } from '../helpers/nullish-attribute-converter.js';
+import { toDateString } from '../helpers/to-date-string.js';
+import { toResolvedDate } from '../helpers/to-resolved-date.js';
+import { toResolvedLocale } from '../helpers/to-resolved-locale.js';
+import type { CalendarView, Constructor } from '../typings.js';
+import type { DatePickerMixinProperties, MixinReturnType } from './typings.js';
 
 export const DatePickerMixin = <BaseConstructor extends Constructor<LitElement>>(
   SuperClass: BaseConstructor
-): MixinReturnType<BaseConstructor, DatePickerElementProperties> => {
-  class DatePickerElement extends SuperClass {
+): MixinReturnType<BaseConstructor, DatePickerMixinProperties> => {
+  class DatePickerMixinClass extends SuperClass implements DatePickerMixinProperties {
     @property()
-    public disabledDays?: string;
+    public disabledDays = '';
 
     @property()
-    public disabledDates?: string;
+    public disabledDates = '';
 
     @property({ type: Number })
     public dragRatio = .15;
@@ -61,8 +62,8 @@ export const DatePickerMixin = <BaseConstructor extends Constructor<LitElement>>
     public yearDropdownLabel = 'Choose year and month';
   }
 
-  return DatePickerElement as unknown as MixinReturnType<
+  return DatePickerMixinClass as unknown as MixinReturnType<
     BaseConstructor,
-    DatePickerElementProperties
+    DatePickerMixinProperties
   >;
 };

src/mixins/typings.ts

@@ -0,0 +1,33 @@
+import type { LitElement } from 'lit';
+import type { WeekNumberType } from 'nodemod/dist/calendar/calendar_typing';
+
+import type { CalendarView, Constructor } from '../typings.js';
+
+export interface DatePickerMinMaxProperties {
+  max?: string;
+  min?: string;
+}
+
+export interface DatePickerMixinProperties {
+  disabledDates: string;
+  disabledDays: string;
+  dragRatio: number;
+  firstDayOfWeek: number;
+  inline: boolean;
+  landscape: boolean;
+  locale: string;
+  nextMonthLabel: string;
+  previousMonthLabel: string;
+  selectedDateLabel: string;
+  showWeekNumber: boolean;
+  startView: CalendarView;
+  value: string;
+  weekLabel: string;
+  weekNumberType: WeekNumberType;
+  yearDropdownLabel: string;
+}
+
+export type MixinReturnType<
+  BaseConstructor extends Constructor<LitElement>,
+  Mixin
+> = BaseConstructor & Constructor<Mixin>;

src/typings.ts

@@ -1,57 +1,30 @@
-import type { LitElement } from 'lit';
-import type { DateTimeFormatter, WeekNumberType } from 'nodemod/dist/calendar/calendar_typing';
+import type { DateTimeFormatter } from 'nodemod/dist/calendar/calendar_typing';
 
 import type { keyCodesRecord } from './constants.js';
-import type { DatePickerMixin } from './date-picker-mixin.js';
+import type { DatePickerMinMaxProperties, DatePickerMixinProperties } from './mixins/typings.js';
 
 export type CalendarView = CalendarViewTuple[number];
 
 export type CalendarViewTuple = ['calendar', 'yearList'];
 
 export interface ChangedEvent {
   isKeypress: boolean;
-  value: DatePickerElementProperties['value'];
+  value: DatePickerMixinProperties['value'];
 }
 
 export type ChangeProperties<T = Record<string, unknown>> = Map<keyof T, T[keyof T]>;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Constructor<T> = new (...args: any[]) => T;
 
-export interface DatePickerElementProperties {
-  disabledDates: string;
-  disabledDays: string;
-  dragRatio: number;
-  firstDayOfWeek: number;
-  inline: boolean;
-  landscape: boolean;
-  locale: string;
-  nextMonthLabel: string;
-  previousMonthLabel: string;
-  selectedDateLabel: string;
-  showWeekNumber: boolean;
-  startView: CalendarView;
-  value: string;
-  weekLabel: string;
-  weekNumberType: WeekNumberType;
-  yearDropdownLabel: string;
-}
-
-export type DatePickerInterface = DatePickerElementProperties & DatePickerMinMaxInterface;
-
-export interface DatePickerMinMaxInterface {
-  max?: string;
-  min?: string;
-}
-
-export type DatePickerMixinInterface = ReturnType<typeof DatePickerMixin>;
+export type DatePickerProperties = DatePickerMixinProperties & DatePickerMinMaxProperties;
 
 export interface FirstUpdatedEvent {
   focusableElements: HTMLElement[];
-  value: DatePickerElementProperties['value'];
+  value: DatePickerMixinProperties['value'];
 }
 
-export interface Formatters extends Pick<DatePickerElementProperties, 'locale'> {
+export interface Formatters extends Pick<DatePickerMixinProperties, 'locale'> {
   dayFormat: DateTimeFormatter;
   fullDateFormat: DateTimeFormatter;
   longWeekdayFormat: DateTimeFormatter;
@@ -62,10 +35,7 @@ export interface Formatters extends Pick<DatePickerElementProperties, 'locale'>
   yearFormat: DateTimeFormatter;
 }
 
-export type MixinReturnType<
-  BaseConstructor extends Constructor<LitElement>,
-  Mixin
-> = BaseConstructor & Constructor<Mixin>
+
 
 export interface SupportedCustomEvent {
   ['animation-finished']: null;