@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/pb-media-query.js

@@ -1,90 +1,92 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 /**
  * Show or hide contents depending on a media query. This is used to toggle the menubar and drawer.
  * On small displays, the menu will move into the drawer.
  *
  * @slot - default unnamed slot
- * 
+ *
  */
 export class PbMediaQuery extends LitElement {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * Media query to be watched by the element.
-             *
-             * Can be modified at run time by setting a new value.
-             */
-            query: { type: String },
-            match: {
-                type: Boolean,
-                reflect: true
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * Media query to be watched by the element.
+       *
+       * Can be modified at run time by setting a new value.
+       */
+      query: { type: String },
+      match: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.query = '(max-width:460px)';
-        this.match = false;
-    }
+  constructor() {
+    super();
+    this.query = '(max-width:460px)';
+    this.match = false;
+  }
 
-    firstUpdated() {
-        // Check if Visual Viewport API is supported
-        if (typeof window.visualViewport !== 'undefined') {
-            window.visualViewport.addEventListener('resize', () => {
-                this._handleResize();
-            });
-        } else {
-            window.addEventListener('resize', () => {
-                this._handleResize();
-            });
-        }
+  firstUpdated() {
+    // Check if Visual Viewport API is supported
+    if (typeof window.visualViewport !== 'undefined') {
+      window.visualViewport.addEventListener('resize', () => {
+        this._handleResize();
+      });
+    } else {
+      window.addEventListener('resize', () => {
         this._handleResize();
+      });
     }
+    this._handleResize();
+  }
 
-    _handleResize() {
-        let { query } = this;
-        if (!/\(.*\)$/.test(query)) {
-            query = `(${query})`;
-        }
-        if (window.matchMedia(query).matches) {
-            // From no match to match
-            if (this.match === false) {
-                this.dispatchEvent(new CustomEvent('changed', {
-                    detail: {
-                        value: true
-                    },
-                    composed: true,
-                    bubbles: true
-                }));
-                this.match = true;
-            }
-        } else if (this.match === true) {
-            this.dispatchEvent(new CustomEvent('changed', {
-                detail: {
-                    value: false
-                },
-                composed: true,
-                bubbles: true
-            }));
-            this.match = false;
-        }
+  _handleResize() {
+    let { query } = this;
+    if (!/\(.*\)$/.test(query)) {
+      query = `(${query})`;
     }
-
-    render() {
-        return html`
-            ${this.match ? html`<slot></slot>` : null}
-        `;
+    if (window.matchMedia(query).matches) {
+      // From no match to match
+      if (this.match === false) {
+        this.dispatchEvent(
+          new CustomEvent('changed', {
+            detail: {
+              value: true,
+            },
+            composed: true,
+            bubbles: true,
+          }),
+        );
+        this.match = true;
+      }
+    } else if (this.match === true) {
+      this.dispatchEvent(
+        new CustomEvent('changed', {
+          detail: {
+            value: false,
+          },
+          composed: true,
+          bubbles: true,
+        }),
+      );
+      this.match = false;
     }
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: inherit;
-            }
-        `;
-    }
+  render() {
+    return html` ${this.match ? html`<slot></slot>` : null} `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inherit;
+      }
+    `;
+  }
 }
-customElements.define('pb-media-query', PbMediaQuery);
+customElements.define('pb-media-query', PbMediaQuery);