diff --git a/src/date-picker.ts b/src/date-picker.ts
index b510e84e..570d3f3c 100644
--- a/src/date-picker.ts
+++ b/src/date-picker.ts
@@ -92,8 +92,9 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
if (changedProperties.has('startView')) {
const oldStartView = changedProperties.get('startView') as CalendarView;
+ const newStartView = this.startView;
- if (!calendarViews.includes(this.startView)) {
+ if (!calendarViews.includes(newStartView)) {
this.startView = this.startView = oldStartView;
}
}
@@ -171,11 +172,12 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
protected updated(changedProperties: DatePickerChangedProperties): void {
super.updated(changedProperties);
- if (this.startView === 'calendar') {
- // TODO: Do stuff for calendar
- } else if (this.startView === 'yearGrid') {
- // TODO: Do stuff for year grid
- }
+ // FIXME: focus element based on start view
+ // if (this.startView === 'calendar') {
+ // // TODO: Do stuff for calendar
+ // } else if (this.startView === 'yearGrid') {
+ // // TODO: Do stuff for year grid
+ // }
}
protected render(): TemplateResult {
@@ -223,12 +225,11 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
${selectedMonth}
${selectedYear}
-
- ${iconArrowDropdown}
-
+ ${iconArrowDropdown}
${
diff --git a/src/month-calendar/stylings.ts b/src/month-calendar/stylings.ts
index a05ac144..f79117c6 100644
--- a/src/month-calendar/stylings.ts
+++ b/src/month-calendar/stylings.ts
@@ -19,7 +19,7 @@ export const monthCalendarStyling = css`
.calendar-day-value,
.weekday-value {
position: relative;
- font-size: 14px;
+ font-size: 13px;
}
th,
@@ -27,9 +27,16 @@ td {
padding: 0;
}
+.weekday {
+ max-height: 28px;
+ height: 28px;
+}
+
.weekday-value {
- padding: 0 0 9px;
+ max-height: 16px;
+ height: 16px;
color: #8c8c8c;
+ line-height: 1;
}
.calendar-day::after,
diff --git a/src/stylings.ts b/src/stylings.ts
index ae1f0a9d..9b76d6ed 100644
--- a/src/stylings.ts
+++ b/src/stylings.ts
@@ -13,6 +13,8 @@ export const datePickerStyling = css`
--date-picker-width: var(--date-picker-base-width);
--date-picker-height: var(--date-picker-base-height);
+ display: flex;
+ flex-direction: column;
min-width: var(--date-picker-width);
max-width: var(--date-picker-width);
min-height: var(--date-picker-height);
@@ -42,13 +44,17 @@ export const datePickerStyling = css`
.month-and-year-selector {
display: flex;
align-items: center;
+ font-size: 13px;
}
-.selected-year,
-.month-dropdown {
+.selected-year {
margin: 0 0 0 4px;
}
+.month-dropdown {
+ margin: 0 0 0 -8px;
+}
+
.month-pagination {
display: flex;
margin: 0 -4px 0 0;
diff --git a/src/year-grid-button/stylings.ts b/src/year-grid-button/stylings.ts
index 832cd02a..d1853d06 100644
--- a/src/year-grid-button/stylings.ts
+++ b/src/year-grid-button/stylings.ts
@@ -3,6 +3,8 @@ import { css } from '@lit/reactive-element';
export const yearGridButtonStyling = css`
:host {
--mdc-button-horizontal-padding: 0;
+ --mdc-theme-primary: var(--year-grid-button-color, #000);
+ --mdc-theme-on-primary: var(--year-grid-button-text-color);
align-items: center;
justify-content: center;
@@ -18,6 +20,8 @@ export const yearGridButtonStyling = css`
width: 52px;
height: 28px;
padding: 0;
+ background-color: inherit;
+ color: inherit;
font: inherit;
font-size: 14px;
border-radius: 52px;
diff --git a/src/year-grid/year-grid.ts b/src/year-grid/year-grid.ts
index 36ed27be..ae21f159 100644
--- a/src/year-grid/year-grid.ts
+++ b/src/year-grid/year-grid.ts
@@ -1,6 +1,7 @@
import '../year-grid-button/app-year-grid-button.js';
import { property } from '@lit/reactive-element/decorators/property.js';
+import { queryAsync } from '@lit/reactive-element/decorators/query-async.js';
import type { TemplateResult } from 'lit';
import { nothing } from 'lit';
import { html, LitElement } from 'lit';
@@ -20,6 +21,9 @@ export class YearGrid extends LitElement implements YearGridProperties {
@property({ attribute: false })
public data: YearGridData;
+ @queryAsync('app-year-grid-button[data-year][unelevated]')
+ public selectedYearGridButton!: Promise;
+
public static styles = [
resetShadowRoot,
yearGridStyling,
@@ -42,6 +46,14 @@ export class YearGrid extends LitElement implements YearGridProperties {
return this.data.formatters != null;
}
+ protected async updated(): Promise {
+ const selectedYearGridButton = await this.selectedYearGridButton;
+
+ if (selectedYearGridButton) {
+ selectedYearGridButton.scrollIntoView();
+ }
+ }
+
protected render(): TemplateResult | typeof nothing {
const {
date,