feat: prepare for TS defs generation (#157)

@types/interfaces.d.ts

@@ -0,0 +1 @@
+export type PrimarySection = 'navbar' | 'drawer';

bower.json

@@ -26,11 +26,11 @@
   ],
   "dependencies": {
     "polymer": "^2.0.0",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.0",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.0",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.6.1",
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.4.1",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.2",
-    "vaadin-button": "vaadin/vaadin-button#^2.3.0"
+    "vaadin-button": "vaadin/vaadin-button#^2.4.0-alpha1"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",

gen-tsd.json

@@ -0,0 +1,16 @@
+{
+  "excludeFiles": [
+    "wct.conf.js",
+    "index.html",
+    "src/detect-ios-navbar.js",
+    "src/safe-area-inset.js",
+    "demo/**/*",
+    "test/**/*",
+    "theme/**/*"
+  ],
+  "autoImport": {
+    "./@types/interfaces": [
+      "PrimarySection"
+    ]
+  }
+}

magi-p3-post.js

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

package.json

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

src/vaadin-app-layout.html

@@ -316,6 +316,7 @@
              * Defines whether navbar or drawer will come first visually.
              * - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.
              * - If `primary-section="drawer"` is set, then the drawer will move the navbar, taking the full available height.
+             * @type {!PrimarySection}
              */
             primarySection: {
               type: String,
@@ -330,6 +331,7 @@
              * Its default value depends on the viewport:
              * - `true`, for desktop size views
              * - `false`, for mobile size views
+             * @type {boolean}
              */
             drawerOpened: {
               type: Boolean,
@@ -342,6 +344,7 @@
             /**
              *  Drawer is an overlay on top of the content
              *  Controlled via CSS using `--vaadin-app-layout-drawer-overlay: true|false`;
+             * @type {boolean}
              */
             overlay: {
               type: Boolean,
@@ -361,9 +364,7 @@
           this.__closeOverlayDrawerListener = this.__closeOverlayDrawer.bind(this);
         }
 
-        /**
-        * @private
-        */
+        /** @protected */
         connectedCallback() {
           super.connectedCallback();
 
@@ -406,9 +407,7 @@
           window.addEventListener('close-overlay-drawer', this.__closeOverlayDrawerListener);
         }
 
-        /**
-        * @private
-        */
+        /** @protected */
         disconnectedCallback() {
           super.disconnectedCallback();
 
@@ -427,13 +426,15 @@
           window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
         }
 
+        /** @private */
         _primarySectionObserver(value) {
           const isValid = ['navbar', 'drawer'].indexOf(value) !== -1;
           if (!isValid) {
             this.set('primarySection', 'navbar');
           }
         }
 
+        /** @private */
         _drawerOpenedObserver() {
           const drawer = this.$.drawer;
 
@@ -448,37 +449,31 @@
           }
         }
 
-
+        /** @private */
         _isShadyCSS() {
           return window.ShadyCSS && !window.ShadyCSS.nativeCss;
         }
 
+        /** @protected */
         _afterFirstRender() {
           this._blockAnimationUntilAfterNextRender();
           this._updateOffsetSize();
         }
 
+        /** @private */
         _drawerToggleClick(e) {
           e.stopPropagation();
           this.drawerOpened = !this.drawerOpened;
         }
 
-        /**
-         * App Layout listens to `close-overlay-drawer` on the window level.
-         * A custom event can be dispatched and the App Layout will close the drawer in overlay.
-         *
-         * That can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.
-         *
-         * See `dispatchCloseOverlayDrawerEvent()` helper method.
-         *
-         * @event close-overlay-drawer
-         */
+        /** @private */
         __closeOverlayDrawer() {
           if (this.overlay) {
             this.drawerOpened = false;
           }
         }
 
+        /** @protected */
         _updateDrawerSize() {
           const childCount = this.querySelectorAll('[slot=drawer]').length;
           const drawer = this.$.drawer;
@@ -491,12 +486,14 @@
           this._updateOffsetSize();
         }
 
+        /** @private */
         _resize() {
           this._blockAnimationUntilAfterNextRender();
           this._updateTouchOptimizedMode();
           this._updateOverlayMode();
         }
 
+        /** @protected */
         _updateOffsetSize() {
           const navbar = this.shadowRoot.querySelector('[part="navbar"]');
           const navbarRect = navbar.getBoundingClientRect();
@@ -528,6 +525,7 @@
           }
         }
 
+        /** @protected */
         _updateDrawerHeight() {
           const {scrollHeight, offsetHeight} = this.$.drawer;
           const height = scrollHeight > offsetHeight ? `${scrollHeight}px` : '100%';
@@ -541,6 +539,7 @@
           }
         }
 
+        /** @protected */
         _updateOverlayMode() {
           const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
           const drawer = this.$.drawer;
@@ -572,10 +571,12 @@
           // TODO(jouni): ARIA attributes. The drawer should act similar to a modal dialog when in ”overlay” mode
         }
 
+        /** @protected */
         _close() {
           this.drawerOpened = false;
         }
 
+        /** @private */
         _getCustomPropertyValue(customProperty) {
           let customPropertyValue;
 
@@ -589,6 +590,7 @@
           return (customPropertyValue || '').trim().toLowerCase();
         }
 
+        /** @protected */
         _updateTouchOptimizedMode() {
           const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
 
@@ -623,6 +625,7 @@
           this._updateOffsetSize();
         }
 
+        /** @protected */
         _blockAnimationUntilAfterNextRender() {
           this.setAttribute('no-anim', '');
           Polymer.RenderStatus.afterNextRender(this, () => {
@@ -632,6 +635,17 @@
             }
           });
         }
+
+        /**
+         * App Layout listens to `close-overlay-drawer` on the window level.
+         * A custom event can be dispatched and the App Layout will close the drawer in overlay.
+         *
+         * That can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.
+         *
+         * See `dispatchCloseOverlayDrawerEvent()` helper method.
+         *
+         * @event close-overlay-drawer
+         */
       }
 
       customElements.define(AppLayoutElement.is, AppLayoutElement);

src/vaadin-drawer-toggle.html

@@ -73,7 +73,6 @@
        * </vaadin-app-layout>
        * ```
        *
-       * @memberof Vaadin
        * @extends Vaadin.ButtonElement
        * @demo demo/index.html
        */
@@ -95,11 +94,6 @@
             this.dispatchEvent(new CustomEvent('drawer-toggle-click', {bubbles: true, composed: true}));
           });
         }
-
-        connectedCallback() {
-          super.connectedCallback();
-        }
-
       }
 
       customElements.define(DrawerToggleElement.is, DrawerToggleElement);