feat: adding initial layout with customized labels

package.json

@@ -71,6 +71,7 @@
   },
   "dependencies": {
     "@material/mwc-base": "^0.21.0",
+    "@material/mwc-icon-button": "^0.21.0",
     "lit": "^2.0.0-rc.1",
     "nodemod": "^2.8.1",
     "tslib": "^2.2.0"

src/constants.ts

@@ -16,4 +16,6 @@ export const DateTimeFormat = Intl.DateTimeFormat;
 
 export const defaultLocale = 'en-US';
 
-export const MAX_DATE = toResolvedDate('2100-12-31');
+export const MAX_DATE = toResolvedDate('2100-12-31');
+
+export const ONE_DAY_IN_SECONDS = 864e5;

src/date-picker-mixin.ts

@@ -1,5 +1,4 @@
 import type { LitElement } from 'lit';
-import type { CalendarView, Constructor, DatePickerElementInterface, MixinReturnType } from './typings.js';
 
 import { property } from 'lit/decorators.js';
 import type { WeekNumberType } from 'nodemod/dist/calendar/calendar_typing';
@@ -8,6 +7,7 @@ import { nullishAttributeConverter } from './helpers/nullish-attribute-converter
 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, DatePickerElementInterface, MixinReturnType } from './typings.js';
 
 export const DatePickerMixin = <BaseConstructor extends Constructor<LitElement>>(
   SuperClass: BaseConstructor
@@ -40,6 +40,15 @@ export const DatePickerMixin = <BaseConstructor extends Constructor<LitElement>>
     @property({ reflect: true, converter: { toAttribute: nullishAttributeConverter } })
     public min?: string;
 
+    @property()
+    public nextMonthLabel = 'Next month';
+
+    @property()
+    public previousMonthLabel = 'Previous month';
+
+    @property()
+    public selectedDateLabel = 'Selected date';
+
     @property({ type: Boolean, reflect: true })
     public showWeekNumber = false;
 
@@ -54,6 +63,9 @@ export const DatePickerMixin = <BaseConstructor extends Constructor<LitElement>>
 
     @property({ reflect: true, converter: { toAttribute: nullishAttributeConverter } })
     public weekNumberType: WeekNumberType = 'first-4-day-week';
+
+    @property()
+    public yearDropdownLabel = 'Choose year and month';
   }
 
   return DatePickerElement as unknown as MixinReturnType<