@vaadin/crud 23.0.0-beta2 → 23.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "23.0.0-beta2",
+  "version": "23.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -34,24 +34,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.0.0-beta2",
-    "@vaadin/component-base": "23.0.0-beta2",
-    "@vaadin/confirm-dialog": "23.0.0-beta2",
-    "@vaadin/dialog": "23.0.0-beta2",
-    "@vaadin/form-layout": "23.0.0-beta2",
-    "@vaadin/grid": "23.0.0-beta2",
-    "@vaadin/text-field": "23.0.0-beta2",
+    "@vaadin/button": "23.0.0-beta3",
+    "@vaadin/component-base": "23.0.0-beta3",
+    "@vaadin/confirm-dialog": "23.0.0-beta3",
+    "@vaadin/dialog": "23.0.0-beta3",
+    "@vaadin/form-layout": "23.0.0-beta3",
+    "@vaadin/grid": "23.0.0-beta3",
+    "@vaadin/text-field": "23.0.0-beta3",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-beta2",
-    "@vaadin/vaadin-material-styles": "23.0.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-beta2"
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "a276f7a0fd00e5459b87267468e0dd0d4fb6f7f3"
+  "gitHead": "4c87216666541f9eb58f56c475964727822aad53"
 }

package/src/vaadin-crud.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { GridFilterDefinition, GridSorterDefinition } from '@vaadin/grid/src/vaadin-grid.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -237,7 +238,7 @@ export type CrudEventMap<T> = HTMLElementEventMap & CrudCustomEventMap<T>;
  * @fires {CustomEvent} save - Fired when user wants to save a new or an existing item.
  * @fires {CustomEvent} cancel - Fired when user discards edition.
  */
-declare class Crud<Item> extends ElementMixin(ThemableMixin(HTMLElement)) {
+declare class Crud<Item> extends ControllerMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   /**
    * A reference to all fields inside the [`_form`](#/elements/vaadin-crud#property-_form) element
    */

package/src/vaadin-crud.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/dialog/src/vaadin-dialog.js';
 import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
@@ -14,7 +13,9 @@ import './vaadin-crud-form.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -148,15 +149,18 @@ const HOST_PROPS = {
  * @fires {CustomEvent} cancel - Fired when user discards edition.
  *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes SlotMixin
  * @mixes ThemableMixin
  */
-class Crud extends SlotMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
         :host {
+          width: 100%;
+          height: 400px;
           --vaadin-crud-editor-max-height: 40%;
           --vaadin-crud-editor-max-width: 40%;
         }
@@ -165,14 +169,13 @@ class Crud extends SlotMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         #main {
           display: flex;
           flex-direction: column;
-          height: 400px;
-          flex: 1 1 100%;
           align-self: stretch;
           position: relative;
           overflow: hidden;
         }
 
         #main {
+          flex: 1 1 100%;
           height: 100%;
         }
 
@@ -306,8 +309,6 @@ class Crud extends SlotMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         message="[[i18n.confirm.delete.content]]"
         confirm-theme="primary error"
       ></vaadin-confirm-dialog>
-
-      <iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}"></iron-media-query>
     `;
   }
 
@@ -685,6 +686,12 @@ class Crud extends SlotMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancelBound);
     // Initialize the default buttons
     this.__propagateHostAttributes();
+
+    this.addController(
+      new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
+        this._fullscreen = matches;
+      })
+    );
   }
 
   /** @private */