@vaadin/component-base 23.0.0-beta2 → 23.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.0.0-beta2",
+  "version": "23.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "a276f7a0fd00e5459b87267468e0dd0d4fb6f7f3"
+  "gitHead": "4c87216666541f9eb58f56c475964727822aad53"
 }

package/src/element-mixin.js

@@ -32,7 +32,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.0.0-beta2';
+      return '23.0.0-beta3';
     }
 
     /** @protected */

package/src/media-query-controller.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ReactiveController } from 'lit';
+
+/**
+ * A controller for listening on media query changes.
+ */
+export class MediaQueryController implements ReactiveController {
+  /**
+   * @param {HTMLElement} host
+   */
+  constructor(query: string, callback: (matches: boolean) => void);
+
+  hostConnected(): void;
+
+  hostDisconnected(): void;
+
+  /**
+   * The CSS media query to evaluate.
+   */
+  protected query: string;
+
+  /**
+   * Function to call when media query changes.
+   */
+  protected callback: (matches: boolean) => void;
+}

package/src/media-query-controller.js

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for listening on media query changes.
+ */
+export class MediaQueryController {
+  constructor(query, callback) {
+    /**
+     * The CSS media query to evaluate.
+     *
+     * @type {string}
+     * @protected
+     */
+    this.query = query;
+
+    /**
+     * Function to call when media query changes.
+     *
+     * @type {Function}
+     * @protected
+     */
+    this.callback = callback;
+
+    this._boundQueryHandler = this._queryHandler.bind(this);
+  }
+
+  hostConnected() {
+    this._removeListener();
+
+    this._mediaQuery = window.matchMedia(this.query);
+
+    this._addListener();
+
+    this._queryHandler(this._mediaQuery);
+  }
+
+  hostDisconnected() {
+    this._removeListener();
+  }
+
+  /** @private */
+  _addListener() {
+    if (this._mediaQuery) {
+      this._mediaQuery.addListener(this._boundQueryHandler);
+    }
+  }
+
+  /** @private */
+  _removeListener() {
+    if (this._mediaQuery) {
+      this._mediaQuery.removeListener(this._boundQueryHandler);
+    }
+
+    this._mediaQuery = null;
+  }
+
+  /** @private */
+  _queryHandler(mediaQuery) {
+    if (typeof this.callback === 'function') {
+      this.callback(mediaQuery.matches);
+    }
+  }
+}