You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2021/06/03 15:50:42 UTC

[myfaces-tobago] branch master updated: refactor: scroll position with custom elements

This is an automated email from the ASF dual-hosted git repository.

lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/master by this push:
     new 850b577  refactor: scroll position with custom elements
850b577 is described below

commit 850b5776cf0d930ca15047ff9ef170b330084f9a
Author: Udo Schnurpfeil <ud...@irian.eu>
AuthorDate: Thu Jun 3 17:24:41 2021 +0200

    refactor: scroll position with custom elements
    
    issues: TOBAGO-2087, TOBAGO-1633
---
 .../internal/renderkit/renderer/TreeRenderer.java  |  3 +-
 .../tobago/renderkit/html/HtmlElements.java        |  1 +
 .../renderer/treeSelect/treeSelect-single.html     |  6 ++-
 tobago-theme/src/main/scss/_tobago.scss            |  4 ++
 .../src/main/css/tobago.css                        |  2 +
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../src/main/css/tobago.css                        |  2 +
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../src/main/css/tobago.css                        |  2 +
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-speyside/src/main/css/tobago.css  |  1 +
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-standard/src/main/css/tobago.css  |  2 +
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-standard/src/main/js/tobago.js    | 46 +++++++++++--------
 .../src/main/js/tobago.js.map                      |  2 +-
 .../src/main/js/tobago.min.js                      |  4 +-
 .../src/main/js/tobago.min.js.map                  |  2 +-
 .../src/main/ts/tobago-scroll.ts                   | 53 ++++++++++++----------
 24 files changed, 89 insertions(+), 61 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeRenderer.java
index ae53926..b946037 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeRenderer.java
@@ -100,7 +100,6 @@ public class TreeRenderer<T extends AbstractUITree> extends RendererBase<T> {
         component.getCustomClass(),
         TobagoClass.TREE.createMarkup(markup));
     HtmlRendererUtils.writeDataAttributes(facesContext, writer, component);
-    writer.writeAttribute(DataAttributes.SCROLL_PANEL, Boolean.TRUE.toString(), false);
 
     final Selectable selectable = component.getSelectable();
     if (selectable.isSupportedByTree()) {
@@ -159,6 +158,7 @@ public class TreeRenderer<T extends AbstractUITree> extends RendererBase<T> {
     writer.writeAttribute(HtmlAttributes.VALUE, JsonUtils.encode(expandedValue), false);
     writer.endElement(HtmlElements.INPUT);
 
+    writer.startElement(HtmlElements.TOBAGO_SCROLL);
     writer.startElement(HtmlElements.INPUT);
     writer.writeIdAttribute(clientId + ComponentUtils.SUB_SEPARATOR + SCROLL_POSITION);
     writer.writeNameAttribute(clientId + ComponentUtils.SUB_SEPARATOR + SCROLL_POSITION);
@@ -166,6 +166,7 @@ public class TreeRenderer<T extends AbstractUITree> extends RendererBase<T> {
     writer.writeAttribute(HtmlAttributes.VALUE, component.getState().getScrollPosition().encode(), false);
     writer.writeAttribute(DataAttributes.SCROLL_POSITION, Boolean.TRUE.toString(), false);
     writer.endElement(HtmlElements.INPUT);
+    writer.endElement(HtmlElements.TOBAGO_SCROLL);
 
     writer.endElement(HtmlElements.TOBAGO_TREE);
     insideEnd(facesContext, HtmlElements.TOBAGO_TREE);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index b5b9ecc..9a0bda4 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -162,6 +162,7 @@ public enum HtmlElements {
   TOBAGO_PROGRESS("tobago-progress"),
   TOBAGO_RANGE("tobago-range"),
   TOBAGO_RELOAD("tobago-reload"),
+  TOBAGO_SCROLL("tobago-scroll"),
   TOBAGO_SECTION("tobago-section"),
   TOBAGO_SEGMENT_LAYOUT("tobago-segment-layout"),
   TOBAGO_SELECT_BOOLEAN_CHECKBOX("tobago-select-boolean-checkbox"),
diff --git a/tobago-core/src/test/resources/renderer/treeSelect/treeSelect-single.html b/tobago-core/src/test/resources/renderer/treeSelect/treeSelect-single.html
index 96311b1..d7ed47c 100644
--- a/tobago-core/src/test/resources/renderer/treeSelect/treeSelect-single.html
+++ b/tobago-core/src/test/resources/renderer/treeSelect/treeSelect-single.html
@@ -17,7 +17,7 @@
   ~ under the License.
   -->
 
-<tobago-tree id='tree' data-tobago-scroll-panel='true' data-tobago-selectable='single' selectable='single'>
+<tobago-tree id='tree' data-tobago-selectable='single' selectable='single'>
   <tobago-tree-node id='tree:0:treeNode' class='tobago-treeNode-markup-folder tobago-treeNode-markup-expanded' expandable='expandable' index='0' data-tobago-level='0'>
     <span id='tree:0:treeIndent' class='tobago-treeNode-toggle'><i class='bi-dash-square' data-tobago-open='bi-dash-square' data-tobago-closed='bi-plus-square'></i></span>
     <tobago-tree-select class='form-check-inline form-check'>
@@ -180,5 +180,7 @@
   </tobago-tree-node>
   <input type='hidden' name='tree::selected' id='tree::selected' class='tobago-tree-selected' value='[]'>
   <input type='hidden' name='tree::expanded' id='tree::expanded' class='tobago-tree-expanded' value='[0,3,6,10,11,15,17]'>
-  <input id='tree::scrollPosition' name='tree::scrollPosition' type='hidden' value='[0,0]' data-tobago-scroll-position='true'>
+  <tobago-scroll>
+    <input id='tree::scrollPosition' name='tree::scrollPosition' type='hidden' value='[0,0]' data-tobago-scroll-position='true'>
+  </tobago-scroll>
 </tobago-tree>
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index 1e4eadf..9d04eaa 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -1607,3 +1607,7 @@ tobago-textarea textarea {
     color: rgba($input-color, $form-disabled-alpha);
   }
 }
+
+/* scroll --------------------------------------------------------- */
+tobago-scroll {
+}
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
index 217e0cd..ff5296c 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
@@ -12465,4 +12465,6 @@ tobago-textarea textarea:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
 
+/* scroll --------------------------------------------------------- */
+
 /*# sourceMappingURL=tobago.css.map */
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
index 0fc4281..3a10bd8 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scs [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scs [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
index 10d9ebb..a46b210 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-charlotteville/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,UAAW,QACX,eAAgB,QAChB,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,qBAAsB,SAAS,CAAE,aAAa,CAAE,UAAU,CAAE,MAAM,CAAE,gBAAgB,CAAE,KAAK,CAAE,WAAW,CAAE,iBAAiB,CAAE,UAAU,CAAE,mBAAmB,CAAE,gBAAgB,CAAE,iBAAiB,CAAE,mBACnM,oBAAqB,cAAc,CAAE,KAA [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-charlotteville/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,UAAW,QACX,eAAgB,QAChB,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,qBAAsB,SAAS,CAAE,aAAa,CAAE,UAAU,CAAE,MAAM,CAAE,gBAAgB,CAAE,KAAK,CAAE,WAAW,CAAE,iBAAiB,CAAE,UAAU,CAAE,mBAAmB,CAAE,gBAAgB,CAAE,iBAAiB,CAAE,mBACnM,oBAAqB,cAAc,CAAE,KAA [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
index 6aeabb1..18dc1a3 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
@@ -12488,4 +12488,6 @@ tobago-textarea textarea:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
 
+/* scroll --------------------------------------------------------- */
+
 /*# sourceMappingURL=tobago.css.map */
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
index 598da04..68ce686 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scs [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scs [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
index 71df3a3..9febaf8 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-roxborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAiCA,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,qCAAqC,mBAE5C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,kCAAkC,mBAEzC,WACE,YAAa,SACb,WAAY,OACZ,IAAK,oCAAoC,mBAE3C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,wCAAwC,mBAEvB,mBAAxB,uBACE,YAAa,QAAQ,CAAE,KAAK,CAAE,MAShC,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB, [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-roxborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAiCA,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,qCAAqC,mBAE5C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,kCAAkC,mBAEzC,WACE,YAAa,SACb,WAAY,OACZ,IAAK,oCAAoC,mBAE3C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,wCAAwC,mBAEvB,mBAAxB,uBACE,YAAa,QAAQ,CAAE,KAAK,CAAE,MAShC,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB, [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
index a32a1e1..fabe3f8 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
@@ -12475,4 +12475,6 @@ tobago-textarea textarea:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
 
+/* scroll --------------------------------------------------------- */
+
 /*# sourceMappingURL=tobago.css.map */
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
index 69e61a6..4136c09 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_mo [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_mo [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
index 34fecda..d6ed921 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-scarborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,qBAAsB,SAAS,CAAE,aAAa,CAAE,UAAU,CAAE,MAAM,CAAE,gBAAgB,CAAE,KAAK,CAAE,WAAW,CAAE,iBAAiB,CAAE,UAAU,CAAE,mBAAmB,CAAE,gBAAgB,CAAE,iBAAiB,CAAE,mBACnM,oBAAqB,cAAc,CAAE,KAAK,C [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-scarborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,qBAAsB,SAAS,CAAE,aAAa,CAAE,UAAU,CAAE,MAAM,CAAE,gBAAgB,CAAE,KAAK,CAAE,WAAW,CAAE,iBAAiB,CAAE,UAAU,CAAE,mBAAmB,CAAE,gBAAgB,CAAE,iBAAiB,CAAE,mBACnM,oBAAqB,cAAc,CAAE,KAAK,C [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
index 143e60c..e4e7c3b 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
@@ -12175,6 +12175,7 @@ tobago-textarea textarea:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
 
+/* scroll --------------------------------------------------------- */
 /*
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
index 602bf35..7e120a6 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_modules/bootstrap/scss/mixins/_lists.scss","../. [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_modules/bootstrap/scss/mixins/_lists.scss","../. [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
index 2dca6ab..6c888d7 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-speyside/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,KACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,qBAAsB,OAAO,CAAE,WAC/B,oBAAqB,cAAc,CAAE,KAAK,CAAE,MAAM,CAAE,QAAQ,CAAE,iBAAiB,CAAE,aAAa,CAAE,UAChG,cAAe,2EAGjB,EAEA,QADA,SAEE,WAAY,WAGd,MACE,UAAW,KAEb,8CACE,MACE,gBAAiB,QA [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-speyside/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,KACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,qBAAsB,OAAO,CAAE,WAC/B,oBAAqB,cAAc,CAAE,KAAK,CAAE,MAAM,CAAE,QAAQ,CAAE,iBAAiB,CAAE,aAAa,CAAE,UAChG,cAAe,2EAGjB,EAEA,QADA,SAEE,WAAY,WAGd,MACE,UAAW,KAEb,8CACE,MACE,gBAAiB,QA [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
index eda50d7..cfaaf48 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
@@ -12445,4 +12445,6 @@ tobago-textarea textarea:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
 
+/* scroll --------------------------------------------------------- */
+
 /*# sourceMappingURL=tobago.css.map */
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
index 916a373..20c7ff2 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_mo [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/bootstrap.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_mo [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
index d0576bd..56cdab2 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-standard/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,qBAAsB,SAAS,CAAE,aAAa,CAAE,UAAU,CAAE,MAAM,CAAE,gBAAgB,CAAE,KAAK,CAAE,WAAW,CAAE,iBAAiB,CAAE,UAAU,CAAE,mBAAmB,CAAE,gBAAgB,CAAE,iBAAiB,CAAE,mBACnM,oBAAqB,cAAc,CAAE,KAAK,CAAE [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-standard/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,qBAAsB,SAAS,CAAE,aAAa,CAAE,UAAU,CAAE,MAAM,CAAE,gBAAgB,CAAE,KAAK,CAAE,WAAW,CAAE,iBAAiB,CAAE,UAAU,CAAE,mBAAmB,CAAE,gBAAgB,CAAE,iBAAiB,CAAE,mBACnM,oBAAqB,cAAc,CAAE,KAAK,CAAE [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
index 04896f3..c565efb 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
@@ -11854,31 +11854,37 @@
    * See the License for the specific language governing permissions and
    * limitations under the License.
    */
-  class Scroll {
-  }
-  Scroll.initScrollPosition = function (element) {
-      for (const panel of DomUtils.selfOrQuerySelectorAll(element, "[data-tobago-scroll-panel]")) {
-          const hidden = panel.querySelector(":scope > [data-tobago-scroll-position]");
-          const values = JSON.parse(hidden.value);
+  class TobagoScroll extends HTMLElement {
+      constructor() {
+          super();
+      }
+      connectedCallback() {
+          const text = this.hiddenElement.value;
+          const values = JSON.parse(text);
           if (values.length === 2) {
-              panel.scrollLeft = values[0];
-              panel.scrollTop = values[1];
+              this.parentElement.scrollLeft = values[0];
+              this.parentElement.scrollTop = values[1];
           }
           else {
-              console.warn("Wrong syntax for scroll: " + hidden.value);
+              console.warn("Syntax error for scroll position: " + text);
           }
-          panel.addEventListener("scroll", Scroll.scroll);
+          this.parentElement.addEventListener("scroll", this.storeScrollPosition.bind(this));
       }
-  };
-  Scroll.scroll = function (event) {
-      const panel = event.currentTarget;
-      const scrollLeft = panel.scrollLeft;
-      const scrollTop = panel.scrollTop;
-      const hidden = panel.querySelector(":scope > [data-tobago-scroll-position]");
-      hidden.value = JSON.stringify([scrollLeft, scrollTop]);
-  };
-  Listener.register(Scroll.initScrollPosition, Phase.DOCUMENT_READY, Order.LATER);
-  Listener.register(Scroll.initScrollPosition, Phase.AFTER_UPDATE, Order.LATER);
+      storeScrollPosition(event) {
+          const panel = event.currentTarget;
+          const scrollLeft = panel.scrollLeft;
+          const scrollTop = panel.scrollTop;
+          this.hiddenElement.value = JSON.stringify([scrollLeft, scrollTop]);
+      }
+      get hiddenElement() {
+          return this.querySelector("input");
+      }
+  }
+  document.addEventListener("tobago.init", function (event) {
+      if (window.customElements.get("tobago-scroll") == null) {
+          window.customElements.define("tobago-scroll", TobagoScroll);
+      }
+  });
 
   /*
    * Licensed to the Apache Software Foundation (ASF) under one or more
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
index c8081fa..616410e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
@@ -1 +1 @@
-{"version":3,"file":"tobago.js","sources":["../ts/tobago-listener.ts","../ts/tobago-utils.ts","../ts/tobago-bar.ts","../ts/tobago-behavior-mode.ts","../ts/tobago-collapsible-operation.ts","../ts/tobago-dropdown.ts","../../../../node_modules/vanillajs-datepicker/js/lib/utils.js","../../../../node_modules/vanillajs-datepicker/js/lib/date.js","../../../../node_modules/vanillajs-datepicker/js/lib/date-format.js","../../../../node_modules/vanillajs-datepicker/js/lib/event.js","../../../../nod [...]
\ No newline at end of file
+{"version":3,"file":"tobago.js","sources":["../ts/tobago-listener.ts","../ts/tobago-utils.ts","../ts/tobago-bar.ts","../ts/tobago-behavior-mode.ts","../ts/tobago-collapsible-operation.ts","../ts/tobago-dropdown.ts","../../../../node_modules/vanillajs-datepicker/js/lib/utils.js","../../../../node_modules/vanillajs-datepicker/js/lib/date.js","../../../../node_modules/vanillajs-datepicker/js/lib/date-format.js","../../../../node_modules/vanillajs-datepicker/js/lib/event.js","../../../../nod [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.min.js b/tobago-theme/tobago-theme-standard/src/main/js/tobago.min.js
index 95d8d5d..d11c00f 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.min.js
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.min.js
@@ -1,8 +1,8 @@
-!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";var e,t,s,i;!function(e){e[e.DOCUMENT_READY=0]="DOCUMENT_READY",e[e.WINDOW_LOAD=1]="WINDOW_LOAD",e[e.BEFORE_SUBMIT=2]="BEFORE_SUBMIT",e[e.AFTER_UPDATE=3]="AFTER_UPDATE",e[e.BEFORE_UNLOAD=4]="BEFORE_UNLOAD",e[e.BEFORE_EXIT=5]="BEFORE_EXIT"}(e||(e={})),function(e){e[e.EARLIER=0]="EARLIER",e[e.EARLY=1]="EARLY",e[e.NORMAL=2]="NORMAL",e[e.LATE=3]="LATE",e[e.LATER=4]="LATER"}(t||(t={}));class n{construct [...]
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";var e,t,s,i;!function(e){e[e.DOCUMENT_READY=0]="DOCUMENT_READY",e[e.WINDOW_LOAD=1]="WINDOW_LOAD",e[e.BEFORE_SUBMIT=2]="BEFORE_SUBMIT",e[e.AFTER_UPDATE=3]="AFTER_UPDATE",e[e.BEFORE_UNLOAD=4]="BEFORE_UNLOAD",e[e.BEFORE_EXIT=5]="BEFORE_EXIT"}(e||(e={})),function(e){e[e.EARLIER=0]="EARLIER",e[e.EARLY=1]="EARLY",e[e.NORMAL=2]="NORMAL",e[e.LATE=3]="LATE",e[e.LATER=4]="LATER"}(t||(t={}));class n{construct [...]
 /*!
     * Bootstrap v5.0.1 (https://getbootstrap.com/)
     * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
     */
-const Ls={find:(e,t=document.documentElement)=>[].concat(...Element.prototype.querySelectorAll.call(t,e)),findOne:(e,t=document.documentElement)=>Element.prototype.querySelector.call(t,e),children:(e,t)=>[].concat(...e.children).filter((e=>e.matches(t))),parents(e,t){const s=[];let i=e.parentNode;for(;i&&i.nodeType===Node.ELEMENT_NODE&&3!==i.nodeType;)i.matches(t)&&s.push(i),i=i.parentNode;return s},prev(e,t){let s=e.previousElementSibling;for(;s;){if(s.matches(t))return[s];s=s.previousE [...]
+const Ls={find:(e,t=document.documentElement)=>[].concat(...Element.prototype.querySelectorAll.call(t,e)),findOne:(e,t=document.documentElement)=>Element.prototype.querySelector.call(t,e),children:(e,t)=>[].concat(...e.children).filter((e=>e.matches(t))),parents(e,t){const s=[];let i=e.parentNode;for(;i&&i.nodeType===Node.ELEMENT_NODE&&3!==i.nodeType;)i.matches(t)&&s.push(i),i=i.parentNode;return s},prev(e,t){let s=e.previousElementSibling;for(;s;){if(s.matches(t))return[s];s=s.previousE [...]
 //# sourceMappingURL=tobago.min.js.map
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.min.js.map b/tobago-theme/tobago-theme-standard/src/main/js/tobago.min.js.map
index 6a82f6f..8df109b 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.min.js.map
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"tobago.min.js","sources":["../ts/tobago-listener.ts","../ts/tobago-behavior-mode.ts","../ts/tobago-collapsible-operation.ts","../ts/tobago-utils.ts","../ts/tobago-bar.ts","../ts/tobago-dropdown.ts","../../../../node_modules/vanillajs-datepicker/js/lib/utils.js","../../../../node_modules/vanillajs-datepicker/js/lib/date.js","../../../../node_modules/vanillajs-datepicker/js/lib/date-format.js","../../../../node_modules/vanillajs-datepicker/js/lib/event.js","../../../.. [...]
\ No newline at end of file
+{"version":3,"file":"tobago.min.js","sources":["../ts/tobago-listener.ts","../ts/tobago-behavior-mode.ts","../ts/tobago-collapsible-operation.ts","../ts/tobago-utils.ts","../ts/tobago-bar.ts","../ts/tobago-dropdown.ts","../../../../node_modules/vanillajs-datepicker/js/lib/utils.js","../../../../node_modules/vanillajs-datepicker/js/lib/date.js","../../../../node_modules/vanillajs-datepicker/js/lib/date-format.js","../../../../node_modules/vanillajs-datepicker/js/lib/event.js","../../../.. [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-scroll.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-scroll.ts
index 9b63452..7386119 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-scroll.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-scroll.ts
@@ -15,35 +15,40 @@
  * limitations under the License.
  */
 
-import {Listener, Order, Phase} from "./tobago-listener";
-import {DomUtils} from "./tobago-utils";
+class TobagoScroll extends HTMLElement {
 
-class Scroll {
+  constructor() {
+    super();
+  }
 
-  static initScrollPosition = function (element: HTMLElement): void {
-    for (const panel of DomUtils.selfOrQuerySelectorAll(element, "[data-tobago-scroll-panel]")) {
-
-      const hidden = panel.querySelector(":scope > [data-tobago-scroll-position]") as HTMLInputElement;
-      const values: number[] = JSON.parse(hidden.value);
-      if (values.length === 2) {
-        panel.scrollLeft = values[0];
-        panel.scrollTop = values[1];
-      } else {
-        console.warn("Wrong syntax for scroll: " + hidden.value);
-      }
-
-      panel.addEventListener("scroll", Scroll.scroll);
+  connectedCallback(): void {
+    const text = this.hiddenElement.value;
+    const values = JSON.parse(text) as number[];
+    if (values.length === 2) {
+      this.parentElement.scrollLeft = values[0];
+      this.parentElement.scrollTop = values[1];
+    } else {
+      console.warn("Syntax error for scroll position: " + text);
     }
-  };
 
-  static scroll = function (event: Event): void {
-    const panel = event.currentTarget as HTMLDivElement;
+    this.parentElement.addEventListener("scroll", this.storeScrollPosition.bind(this));
+  }
+
+  storeScrollPosition(event: Event): void {
+    const panel = event.currentTarget as HTMLElement;
     const scrollLeft = panel.scrollLeft;
     const scrollTop = panel.scrollTop;
-    const hidden = panel.querySelector(":scope > [data-tobago-scroll-position]") as HTMLInputElement;
-    hidden.value = JSON.stringify([scrollLeft, scrollTop]);
-  };
+    this.hiddenElement.value = JSON.stringify([scrollLeft, scrollTop]);
+  }
+
+  get hiddenElement(): HTMLInputElement {
+    return this.querySelector("input");
+  }
+
 }
 
-Listener.register(Scroll.initScrollPosition, Phase.DOCUMENT_READY, Order.LATER);
-Listener.register(Scroll.initScrollPosition, Phase.AFTER_UPDATE, Order.LATER);
+document.addEventListener("tobago.init", function (event: Event): void {
+  if (window.customElements.get("tobago-scroll") == null) {
+    window.customElements.define("tobago-scroll", TobagoScroll);
+  }
+});