@vaadin/checkbox 22.0.1 → 22.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/checkbox",
-  "version": "22.0.1",
+  "version": "22.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -33,16 +33,16 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.1",
-    "@vaadin/field-base": "^22.0.1",
-    "@vaadin/vaadin-lumo-styles": "^22.0.1",
-    "@vaadin/vaadin-material-styles": "^22.0.1",
-    "@vaadin/vaadin-themable-mixin": "^22.0.1"
+    "@vaadin/component-base": "^22.0.5",
+    "@vaadin/field-base": "^22.0.5",
+    "@vaadin/vaadin-lumo-styles": "^22.0.5",
+    "@vaadin/vaadin-material-styles": "^22.0.5",
+    "@vaadin/vaadin-themable-mixin": "^22.0.5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "3e1990867670f3de2dec6fa1200d945623b2710c"
 }

package/src/vaadin-checkbox.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
@@ -8,7 +8,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -61,7 +61,7 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
  */
-declare class Checkbox extends SlotLabelMixin(
+declare class Checkbox extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))))
 ) {
   /**

package/src/vaadin-checkbox.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -10,8 +10,9 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { SlotTargetController } from '@vaadin/field-base/src/slot-target-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -53,9 +54,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ActiveMixin
  * @mixes DelegateFocusMixin
  * @mixes CheckedMixin
- * @mixes SlotLabelMixin
+ * @mixes LabelMixin
  */
-class Checkbox extends SlotLabelMixin(
+class Checkbox extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))))
 ) {
   static get is() {
@@ -78,13 +79,14 @@ class Checkbox extends SlotLabelMixin(
         }
 
         .vaadin-checkbox-container {
-          display: inline-flex;
+          display: grid;
+          grid-template-columns: auto 1fr;
           align-items: baseline;
         }
 
         .vaadin-checkbox-wrapper {
           position: relative;
-          flex: none;
+          height: 100%;
         }
 
         /* visually hidden */
@@ -166,39 +168,30 @@ class Checkbox extends SlotLabelMixin(
   }
 
   /** @protected */
-  ready() {
-    super.ready();
+  connectedCallback() {
+    super.connectedCallback();
 
-    this.addController(
-      new InputController(this, (input) => {
+    if (!this._inputController) {
+      this._inputController = new InputController(this, (input) => {
         this._setInputElement(input);
         this._setFocusElement(input);
         this.stateTarget = input;
-      })
-    );
-    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
-  }
-
-  /**
-   * A reference to the default slot from which nodes are copied to the label node.
-   *
-   * @override
-   * @protected
-   * @type {HTMLSlotElement}
-   */
-  get _sourceSlot() {
-    return this.$.noop;
+        this.ariaTarget = input;
+      });
+      this.addController(this._inputController);
+      this.addController(new LabelledInputController(this.inputElement, this._labelController));
+      this.addController(
+        new SlotTargetController(
+          this.$.noop,
+          () => this._labelController.node,
+          () => this.__warnDeprecated()
+        )
+      );
+    }
   }
 
-  /**
-   * Override __copyNodesToSlotTarget from SlotTargetMixin to show a warning.
-   * @override
-   * @protected
-   * @param {!Array<!Node>} nodes
-   **/
-  __copyNodesToSlotTarget(nodes) {
-    super.__copyNodesToSlotTarget(nodes);
-
+  /** @private */
+  __warnDeprecated() {
     console.warn(
       `WARNING: Since Vaadin 22, placing the label as a direct child of a <vaadin-checkbox> is deprecated.
 Please use <label slot="label"> wrapper or the label property instead.`