feat: implement DatePickerInputSurface

src/date-picker-input-surface/app-date-picker-input-surface.ts

@@ -0,0 +1,14 @@
+import { customElement } from 'lit/decorators.js';
+
+import { appDatePickerInputSurfaceName } from './constants.js';
+import { DatePickerInputSurface } from './date-picker-input-surface.js';
+
+
+@customElement(appDatePickerInputSurfaceName)
+export class AppDatePickerInputSurface extends DatePickerInputSurface {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [appDatePickerInputSurfaceName]: AppDatePickerInputSurface;
+  }
+}

src/date-picker-input-surface/constants.ts

@@ -0,0 +1 @@
+export const appDatePickerInputSurfaceName = 'app-date-picker-input-surface';

src/date-picker-input-surface/date-picker-input-surface.ts

@@ -0,0 +1,22 @@
+import { MenuSurface } from '@material/mwc-menu/mwc-menu-surface.js';
+
+import { appDatePickerName } from '../date-picker/constants.js';
+import { appDatePickerInputName } from '../date-picker-input/constants.js';
+import { DatePickerInputSurfaceStyling } from './stylings.js';
+
+export class DatePickerInputSurface extends MenuSurface {
+  public static override styles = [
+    ...MenuSurface.styles,
+    DatePickerInputSurfaceStyling,
+  ];
+
+  protected override onBodyClick(ev: MouseEvent) {
+    const elements = (ev.composedPath() as HTMLElement[]).filter(({ nodeType }) => nodeType === Node.ELEMENT_NODE);
+    const shouldClose =
+      elements.some(n => n.classList.contains('calendar-day')) ||
+      !elements.some(n => n.localName === appDatePickerName) ||
+      !elements.some(n => n.localName === appDatePickerInputName);
+
+    shouldClose && this.close();
+  }
+}

src/date-picker-input-surface/stylings.ts

@@ -0,0 +1,12 @@
+import { css } from 'lit';
+
+export const DatePickerInputSurfaceStyling = css`
+:host {
+  display: block;
+  position: relative;
+}
+
+.mdc-menu-surface.mdc-menu-surface--open {
+  overflow: initial;
+}
+`;