feat: prepare for TS defs generation (#173)

bower.json

@@ -27,11 +27,11 @@
   ],
   "dependencies": {
     "polymer": "^2.0.0",
-    "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
+    "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.2.1",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.6.1",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.4.1",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.0"
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.4.1"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",
@@ -40,9 +40,6 @@
     "web-component-tester": "^6.1.5",
     "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
     "iron-form": "^2.0.1",
-    "vaadin-button": "vaadin/vaadin-button#^2.1.0"
-  },
-  "resolutions": {
-    "vaadin-element-mixin": "^2.0.0"
+    "vaadin-button": "vaadin/vaadin-button#^2.4.0-alpha1"
   }
 }

gen-tsd.json

@@ -0,0 +1,9 @@
+{
+  "excludeFiles": [
+    "wct.conf.js",
+    "index.html",
+    "demo/**/*",
+    "test/**/*",
+    "theme/**/*"
+  ]
+}

magi-p3-post.js

@@ -0,0 +1,12 @@
+module.exports = {
+  files: [
+    'vaadin-checkbox.js',
+    'vaadin-checkbox-group.js'
+  ],
+  from: [
+    /import '\.\/theme\/lumo\/vaadin-(.+)\.js';/
+  ],
+  to: [
+    `import './theme/lumo/vaadin-$1.js';\nexport * from './src/vaadin-$1.js';`
+  ]
+};

package.json

@@ -18,6 +18,7 @@
   },
   "homepage": "https://vaadin.com/components",
   "files": [
+    "vaadin-*.d.ts",
     "vaadin-*.js",
     "src",
     "theme"

src/vaadin-checkbox-group.html

@@ -97,6 +97,7 @@
        *
        * @memberof Vaadin
        * @mixes Vaadin.ThemableMixin
+       * @mixes Vaadin.DirMixin
        * @element vaadin-checkbox-group
        * @demo demo/index.html
        */
@@ -130,6 +131,7 @@
              * Note: toggling the checkboxes modifies the value by creating new
              * array each time, to override Polymer dirty-checking for arrays.
              * You can still use Polymer array mutation methods to update the value.
+             * @type {!Array<!string>}
              */
             value: {
               type: Array,
@@ -155,6 +157,7 @@
 
             /**
              * This property is set to true when the control value is invalid.
+             * @type {boolean}
              */
             invalid: {
               type: Boolean,
@@ -232,31 +235,46 @@
           return !this.invalid;
         }
 
+        /** @private */
         get _checkboxes() {
           return this._filterCheckboxes(this.querySelectorAll('*'));
         }
 
+        /** @private */
         _filterCheckboxes(nodes) {
           return Array.from(nodes)
             .filter(child => child instanceof Vaadin.CheckboxElement);
         }
 
+        /** @private */
         _disabledChanged(disabled) {
           this.setAttribute('aria-disabled', disabled);
 
           this._checkboxes.forEach(checkbox => checkbox.disabled = disabled);
         }
 
+        /**
+         * @param {string} value
+         * @protected
+         */
         _addCheckboxToValue(value) {
           if (this.value.indexOf(value) === -1) {
             this.value = this.value.concat(value);
           }
         }
 
+        /**
+         * @param {string} value
+         * @protected
+         */
         _removeCheckboxFromValue(value) {
           this.value = this.value.filter(v => v !== value);
         }
 
+        /**
+         * @param {CheckboxElement} checkbox
+         * @protected
+         */
         _changeSelectedCheckbox(checkbox) {
           if (this._updatingValue) {
             return;
@@ -269,6 +287,7 @@
           }
         }
 
+        /** @private */
         _updateValue(value, splices) {
           // setting initial value to empty array, skip validation
           if (value.length === 0 && this._oldValue === undefined) {
@@ -293,6 +312,7 @@
           this.validate();
         }
 
+        /** @private */
         _labelChanged(label) {
           if (label) {
             this.setAttribute('has-label', '');
@@ -301,17 +321,26 @@
           }
         }
 
+        /** @private */
         _getErrorMessageAriaHidden(invalid, errorMessage) {
           return (!errorMessage || !invalid).toString();
         }
 
+        /**
+         * @return {boolean}
+         * @protected
+         */
         _containsFocus() {
           const root = this.getRootNode();
           // Safari 9 needs polyfilled `_activeElement` to return correct node
           const activeElement = root._activeElement !== undefined ? root._activeElement : root.activeElement;
           return this.contains(activeElement);
         }
 
+        /**
+         * @param {boolean} focused
+         * @protected
+         */
         _setFocused(focused) {
           if (focused) {
             this.setAttribute('focused', '');

src/vaadin-checkbox.html

@@ -126,6 +126,7 @@
           return {
             /**
              * True if the checkbox is checked.
+             * @type {boolean}
              */
             checked: {
               type: Boolean,
@@ -138,6 +139,7 @@
             /**
              * Indeterminate state of the checkbox when it's neither checked nor unchecked, but undetermined.
              * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
+             * @type {boolean}
              */
             indeterminate: {
               type: Boolean,
@@ -155,6 +157,7 @@
               value: 'on'
             },
 
+            /** @private */
             _nativeCheckbox: {
               type: Object
             }
@@ -200,6 +203,7 @@
           this._updateLabelAttribute();
         }
 
+        /** @private */
         _updateLabelAttribute() {
           const label = this.shadowRoot.querySelector('[part~="label"]');
           const assignedNodes = label.firstElementChild.assignedNodes();
@@ -210,6 +214,7 @@
           }
         }
 
+        /** @private */
         _isAssignedNodesEmpty(nodes) {
           // The assigned nodes considered to be empty if there is no slotted content or only one empty text node
           return nodes.length === 0 ||
@@ -218,6 +223,7 @@
                 && nodes[0].textContent.trim() === '');
         }
 
+        /** @private */
         _checkedChanged(checked) {
           if (this.indeterminate) {
             this.setAttribute('aria-checked', 'mixed');
@@ -226,6 +232,7 @@
           }
         }
 
+        /** @private */
         _indeterminateChanged(indeterminate) {
           if (indeterminate) {
             this.setAttribute('aria-checked', 'mixed');
@@ -234,6 +241,7 @@
           }
         }
 
+        /** @private */
         _addActiveListeners() {
           // DOWN
           this._addEventListenerToNode(this, 'down', (e) => {
@@ -267,7 +275,10 @@
           });
         }
 
-        /** @protected */
+        /**
+         * @return {!HTMLInputElement}
+         * @protected
+         */
         get focusElement() {
           return this.shadowRoot.querySelector('input');
         }
@@ -289,6 +300,7 @@
           return true;
         }
 
+        /** @private */
         _handleClick(e) {
           if (this.__interactionsAllowed(e)) {
             if (!this.indeterminate) {
@@ -308,6 +320,7 @@
           }
         }
 
+        /** @protected */
         _toggleChecked() {
           this.checked = !this.checked;
           this.dispatchEvent(new CustomEvent('change', {composed: false, bubbles: true}));