@vaadin/date-picker 23.0.0-beta2 → 23.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.0.0-beta2",
+  "version": "23.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,23 +33,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "23.0.0-beta2",
-    "@vaadin/component-base": "23.0.0-beta2",
-    "@vaadin/field-base": "23.0.0-beta2",
-    "@vaadin/input-container": "23.0.0-beta2",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-beta2",
-    "@vaadin/vaadin-material-styles": "23.0.0-beta2",
-    "@vaadin/vaadin-overlay": "23.0.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-beta2"
+    "@vaadin/button": "23.0.0-beta3",
+    "@vaadin/component-base": "23.0.0-beta3",
+    "@vaadin/field-base": "23.0.0-beta3",
+    "@vaadin/input-container": "23.0.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-overlay": "23.0.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "23.0.0-beta2",
-    "@vaadin/polymer-legacy-adapter": "23.0.0-beta2",
+    "@vaadin/dialog": "23.0.0-beta3",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-beta3",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "a276f7a0fd00e5459b87267468e0dd0d4fb6f7f3"
+  "gitHead": "4c87216666541f9eb58f56c475964727822aad53"
 }

package/src/vaadin-date-picker-light.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/iron-media-query/iron-media-query.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
@@ -98,8 +97,6 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
           </vaadin-date-picker-overlay-content>
         </template>
       </vaadin-date-picker-overlay>
-
-      <iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}"> </iron-media-query>
     `;
   }
 

package/src/vaadin-date-picker-mixin.js

@@ -6,6 +6,7 @@
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
@@ -417,6 +418,12 @@ export const DatePickerMixin = (subclass) =>
         }
       });
 
+      this.addController(
+        new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
+          this._fullscreen = matches;
+        })
+      );
+
       this.addController(new VirtualKeyboardController(this));
     }
 

package/src/vaadin-date-picker-overlay-content.js

@@ -3,15 +3,16 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/button/src/vaadin-button.js';
 import './vaadin-month-calendar.js';
 import './vaadin-infinite-scroller.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
 
@@ -19,7 +20,7 @@ import { dateEquals, extractDateParts, getClosestDate } from './vaadin-date-pick
  * @extends HTMLElement
  * @private
  */
-class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
+class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -223,7 +224,6 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
           [[i18n.cancel]]
         </vaadin-button>
       </div>
-      <iron-media-query query="(min-width: 375px)" query-matches="{{_desktopMode}}"></iron-media-query>
     `;
   }
 
@@ -268,6 +268,11 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
 
       _desktopMode: Boolean,
 
+      _desktopMediaQuery: {
+        type: String,
+        value: '(min-width: 375px)'
+      },
+
       _translateX: {
         observer: '_translateXChanged'
       },
@@ -329,6 +334,12 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
       'tap',
       this._toggleYearScroller.bind(this)
     );
+
+    this.addController(
+      new MediaQueryController(this._desktopMediaQuery, (matches) => {
+        this._desktopMode = matches;
+      })
+    );
   }
 
   /**

package/src/vaadin-date-picker.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
@@ -185,8 +184,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
           ></vaadin-date-picker-overlay-content>
         </template>
       </vaadin-date-picker-overlay>
-
-      <iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}"> </iron-media-query>
     `;
   }