experiment: prepare LitElement based date-picker for publishing (#6801)

packages/date-picker/package.json

@@ -21,10 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/vaadin-lit-date-picker-overlay-content.js",
-    "!src/vaadin-lit-date-picker-overlay.js",
-    "!src/vaadin-lit-date-picker.js",
-    "!src/vaadin-lit-month-calendar.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",

packages/date-picker/src/vaadin-date-picker-year-mixin.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const DatePickerYearMixin = (superClass) =>
+  class DatePickerYearMixin extends superClass {
+    static get properties() {
+      return {
+        year: {
+          type: String,
+          sync: true,
+        },
+
+        selectedDate: {
+          type: Object,
+          sync: true,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__updateSelected(year, selectedDate)'];
+    }
+
+    /** @private */
+    __updateSelected(year, selectedDate) {
+      this.toggleAttribute('selected', selectedDate && selectedDate.getFullYear() === year);
+      this.toggleAttribute('current', year === new Date().getFullYear());
+    }
+  };

packages/date-picker/src/vaadin-date-picker-year.js

@@ -6,16 +6,18 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
  * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
+ * @mixes DatePickerYearMixin
  * @private
  */
-export class DatePickerYear extends ThemableMixin(PolymerElement) {
+export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-date-picker-year';
   }
@@ -32,28 +34,6 @@ export class DatePickerYear extends ThemableMixin(PolymerElement) {
       <div part="year-separator" aria-hidden="true"></div>
     `;
   }
-
-  static get properties() {
-    return {
-      year: {
-        type: String,
-      },
-
-      selectedDate: {
-        type: Object,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__updateSelected(year, selectedDate)'];
-  }
-
-  /** @private */
-  __updateSelected(year, selectedDate) {
-    this.toggleAttribute('selected', selectedDate && selectedDate.getFullYear() === year);
-    this.toggleAttribute('current', year === new Date().getFullYear());
-  }
 }
 
 defineCustomElement(DatePickerYear);

packages/date-picker/src/vaadin-lit-date-picker-overlay-content.js

@@ -3,10 +3,10 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/button/src/vaadin-button.js';
+import '@vaadin/button/src/vaadin-lit-button.js';
 import './vaadin-date-picker-month-scroller.js';
 import './vaadin-date-picker-year-scroller.js';
-import './vaadin-date-picker-year.js';
+import './vaadin-lit-date-picker-year.js';
 import './vaadin-lit-month-calendar.js';
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';

packages/date-picker/src/vaadin-lit-date-picker-year.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
+
+/**
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ * @mixes DatePickerYearMixin
+ * @private
+ */
+export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-date-picker-year';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="year-number">${this.year}</div>
+      <div part="year-separator" aria-hidden="true"></div>
+    `;
+  }
+}
+
+defineCustomElement(DatePickerYear);

packages/date-picker/theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -3,7 +3,7 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
+import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
 import './vaadin-date-picker-year-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

packages/date-picker/theme/lumo/vaadin-lit-date-picker.js

@@ -0,0 +1,5 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
+import './vaadin-date-picker-styles.js';
+import '../../src/vaadin-lit-date-picker.js';

packages/date-picker/theme/material/vaadin-date-picker-overlay-content-styles.js

@@ -2,7 +2,7 @@ import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/vaadin-material-styles/shadow.js';
-import '@vaadin/button/theme/material/vaadin-button.js';
+import '@vaadin/button/theme/material/vaadin-button-styles.js';
 import './vaadin-date-picker-year-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

packages/date-picker/theme/material/vaadin-lit-date-picker.js

@@ -0,0 +1,5 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
+import './vaadin-date-picker-styles.js';
+import '../../src/vaadin-lit-date-picker.js';

packages/date-picker/vaadin-lit-date-picker-light.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-date-picker-light.js';

packages/date-picker/vaadin-lit-date-picker-light.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-date-picker-light.js';
+export * from './src/vaadin-lit-date-picker-light.js';

packages/date-picker/vaadin-lit-date-picker.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-date-picker.js';

packages/date-picker/vaadin-lit-date-picker.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-date-picker.js';
+export * from './src/vaadin-lit-date-picker.js';