@vaadin/scroller 23.2.0-dev.48e5e3967 → 23.2.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/scroller",
-  "version": "23.2.0-dev.48e5e3967",
+  "version": "23.2.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -34,14 +36,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.48e5e3967",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.48e5e3967",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.48e5e3967",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.48e5e3967"
+    "@vaadin/component-base": "23.2.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-rc1",
+    "@vaadin/vaadin-material-styles": "23.2.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2"
   },
-  "gitHead": "961bc4ae5b707c3c02f12b99819b3c12c9b478aa"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
 }

package/src/vaadin-scroller.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2020 - 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 { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -21,13 +22,14 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * -------------| -----------
  * `focus-ring` | Set when the element is focused using the keyboard.
  * `focused`    | Set when the element is focused.
+ * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  */
-declare class Scroller extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+declare class Scroller extends FocusMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
   /**
    * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
    * When `scrollDirection` is undefined scrollbars will be shown in both directions.
    */
-  scrollDirection: 'horizontal' | 'vertical' | 'none' | undefined;
+  scrollDirection: 'horizontal' | 'none' | 'vertical' | undefined;
 
   /**
    * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.

package/src/vaadin-scroller.js

@@ -4,8 +4,10 @@
  * 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';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -22,13 +24,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * -------------| -----------
  * `focus-ring` | Set when the element is focused using the keyboard.
  * `focused`    | Set when the element is focused.
+ * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  *
  * @extends HTMLElement
  * @mixes ThemableMixin
+ * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes FocusMixin
  */
-class Scroller extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Scroller extends FocusMixin(ElementMixin(ControllerMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -85,6 +89,14 @@ class Scroller extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     };
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.__overflowController = new OverflowController(this);
+    this.addController(this.__overflowController);
+  }
+
   /**
    * Override method inherited from `FocusMixin` to mark the scroller as focused
    * only when the host is focused.

package/web-types.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/scroller",
+  "version": "23.2.0-rc1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-scroller",
+          "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```\n<vaadin-scroller>\n  <div>Content</div>\n</vaadin-scroller>\n```\nThe following attributes are exposed for styling:\n\nAttribute    | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused`    | Set when the element is focused.\n`overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.",
+          "attributes": [
+            {
+              "name": "scroll-direction",
+              "description": "This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.\nWhen `scrollDirection` is undefined scrollbars will be shown in both directions.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "scrollDirection",
+                "description": "This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.\nWhen `scrollDirection` is undefined scrollbars will be shown in both directions.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/scroller",
+  "version": "23.2.0-rc1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-scroller",
+          "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```\n<vaadin-scroller>\n  <div>Content</div>\n</vaadin-scroller>\n```\nThe following attributes are exposed for styling:\n\nAttribute    | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused`    | Set when the element is focused.\n`overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": ".scrollDirection",
+              "description": "This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.\nWhen `scrollDirection` is undefined scrollbars will be shown in both directions.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}