You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2021/10/14 11:15:23 UTC

[myfaces-tobago] branch master updated (d7dfe1a -> fb18273)

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

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


    from d7dfe1a  test(Id_Markup): Implement label tests.
     new 499ce5f  fix: message layout for input group, date and shuttle
     new fb18273  build(theme): rebuild after fixing message layout

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../500-message-layout/message-layout.test.js      | 92 ++++++++++++++++++++++
 .../500-message-layout/message-layout.xhtml        | 64 +++++++++++++++
 tobago-theme/src/main/scss/_tobago.scss            |  6 ++
 .../src/main/css/tobago.css                        |  6 +-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.css                        |  6 +-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.css                        |  6 +-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../tobago-theme-speyside/src/main/css/tobago.css  |  6 +-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../tobago-theme-standard/src/main/css/tobago.css  |  6 +-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../tobago-theme-standard/src/main/js/tobago.js    | 50 ++++++------
 .../src/main/js/tobago.js.map                      |  2 +-
 .../src/main/js/tobago.min.js                      |  4 +-
 .../src/main/js/tobago.min.js.map                  |  2 +-
 17 files changed, 216 insertions(+), 44 deletions(-)
 create mode 100644 tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4800-labelLayout/500-message-layout/message-layout.test.js
 create mode 100644 tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4800-labelLayout/500-message-layout/message-layout.xhtml

[myfaces-tobago] 01/02: fix: message layout for input group, date and shuttle

Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit 499ce5f4cfed0aefee9e2f2503b9dd1be639c1ce
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Oct 14 12:40:10 2021 +0200

    fix: message layout for input group, date and shuttle
    
    * add an integration test
---
 .../500-message-layout/message-layout.test.js      | 92 ++++++++++++++++++++++
 .../500-message-layout/message-layout.xhtml        | 64 +++++++++++++++
 tobago-theme/src/main/scss/_tobago.scss            |  6 ++
 3 files changed, 162 insertions(+)

diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4800-labelLayout/500-message-layout/message-layout.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4800-labelLayout/500-message-layout/message-layout.test.js
new file mode 100644
index 0000000..0a9d230
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4800-labelLayout/500-message-layout/message-layout.test.js
@@ -0,0 +1,92 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+import {elementByIdFn, querySelectorAllFn, querySelectorFn} from "/script/tobago-test.js";
+
+it("Input", function (done) {
+  const alertsFn = querySelectorAllFn(".tobago-messages .alert");
+  const submitFn = elementByIdFn("page:mainForm:submit");
+  const compareFn = elementByIdFn("page:mainForm:inCompare");
+  const labelFn = querySelectorFn("#page\\:mainForm\\:in label");
+  const inputFn = querySelectorFn("#page\\:mainForm\\:in input");
+  const popoverFn = querySelectorFn("#page\\:mainForm\\:in tobago-popover");
+
+  const test = new JasmineTestTool(done);
+  test.setup(() => alertsFn().length > 0, null, "click", submitFn);
+  test.do(() => expect(getFullWidth(compareFn())).toBeCloseTo(
+      getFullWidth(labelFn()) + getFullWidth(inputFn()) + getFullWidth(popoverFn())
+  ));
+  test.start();
+});
+
+it("Input Group", function (done) {
+  const alertsFn = querySelectorAllFn(".tobago-messages .alert");
+  const submitFn = elementByIdFn("page:mainForm:submit");
+  const compareFn = elementByIdFn("page:mainForm:inputGroupCompare");
+  const labelFn = querySelectorFn("#page\\:mainForm\\:inputGroup label");
+  const inputFn = querySelectorFn("#page\\:mainForm\\:inputGroup .input-group");
+  const popoverFn = querySelectorFn("#page\\:mainForm\\:inputGroup tobago-popover");
+
+  const test = new JasmineTestTool(done);
+  test.setup(() => alertsFn().length > 0, null, "click", submitFn);
+  test.do(() => expect(getFullWidth(compareFn())).toBeCloseTo(
+      getFullWidth(labelFn()) + getFullWidth(inputFn()) + getFullWidth(popoverFn())
+  ));
+  test.start();
+});
+
+it("Date", function (done) {
+  const alertsFn = querySelectorAllFn(".tobago-messages .alert");
+  const submitFn = elementByIdFn("page:mainForm:submit");
+  const compareFn = elementByIdFn("page:mainForm:dateCompare");
+  const labelFn = querySelectorFn("#page\\:mainForm\\:date label");
+  const inputFn = querySelectorFn("#page\\:mainForm\\:date input");
+  const popoverFn = querySelectorFn("#page\\:mainForm\\:date tobago-popover");
+
+  const test = new JasmineTestTool(done);
+  test.setup(() => alertsFn().length > 0, null, "click", submitFn);
+  test.do(() => expect(getFullWidth(compareFn())).toBeCloseTo(
+      getFullWidth(labelFn()) + getFullWidth(inputFn()) + getFullWidth(popoverFn())
+  ));
+  test.start();
+});
+
+it("Shuttle", function (done) {
+  const alertsFn = querySelectorAllFn(".tobago-messages .alert");
+  const submitFn = elementByIdFn("page:mainForm:submit");
+  const compareFn = elementByIdFn("page:mainForm:shuttleCompare");
+  const labelFn = querySelectorFn("#page\\:mainForm\\:shuttle label");
+  const inputFn = querySelectorFn("#page\\:mainForm\\:shuttle .tobago-selectManyShuttle");
+  const popoverFn = querySelectorFn("#page\\:mainForm\\:shuttle tobago-popover");
+
+  const test = new JasmineTestTool(done);
+  test.setup(() => alertsFn().length > 0, null, "click", submitFn);
+  test.do(() => expect(getFullWidth(compareFn())).toBeCloseTo(
+      getFullWidth(labelFn()) + getFullWidth(inputFn()) + getFullWidth(popoverFn())
+  ));
+  test.start();
+});
+
+function getFullWidth(element) {
+  const computedStyle = getComputedStyle(element);
+  const marginLeft = parseFloat(computedStyle.marginLeft);
+  const width = parseFloat(computedStyle.width);
+  const marginRight = parseFloat(computedStyle.marginRight);
+  return marginLeft + width + marginRight;
+}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4800-labelLayout/500-message-layout/message-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4800-labelLayout/500-message-layout/message-layout.xhtml
new file mode 100644
index 0000000..2a49f0b
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4800-labelLayout/500-message-layout/message-layout.xhtml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+                xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:f="http://xmlns.jcp.org/jsf/core">
+  <ui:param name="title" value="messages"/>
+  <tc:button id="submit" label="Submit"/>
+
+  <tc:panel>
+    <tc:style width="1000px"/>
+
+    <tc:section label="Input">
+      <tc:in id="inCompare" label="Input"/>
+      <tc:in id="in" label="Input" required="true"/>
+    </tc:section>
+
+    <tc:section label="Input Group">
+      <tc:in id="inputGroupCompare" label="Input Group">
+        <f:facet name="before">https://example.com/</f:facet>
+        <f:facet name="after"><tc:button label="OK" omit="true"/></f:facet>
+      </tc:in>
+      <tc:in id="inputGroup" label="Input Group" required="true">
+        <f:facet name="before">https://example.com/</f:facet>
+        <f:facet name="after"><tc:button label="OK" omit="true"/></f:facet>
+      </tc:in>
+    </tc:section>
+
+    <tc:section label="Date">
+      <tc:date id="dateCompare" label="Date"/>
+      <tc:date id="date" label="Date" required="true"/>
+    </tc:section>
+
+    <tc:section label="Shuttle">
+      <tc:selectManyShuttle id="shuttleCompare" label="Shuttle" value="#{selectManyShuttleController.selectedPlanets}">
+        <tc:selectItems value="#{selectManyShuttleController.planets}"
+                        var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
+      </tc:selectManyShuttle>
+      <tc:selectManyShuttle id="shuttle" label="Shuttle" value="#{selectManyShuttleController.selectedPlanets}"
+                            required="true">
+        <tc:selectItems value="#{selectManyShuttleController.planets}"
+                        var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
+      </tc:selectManyShuttle>
+    </tc:section>
+  </tc:panel>
+</ui:composition>
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index f82523c..7be5af5 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -421,6 +421,12 @@ tobago-flex-layout {
     }
   }
 
+  > .tobago-messages-container {
+    .tobago-input-group-outer, .tobago-selectManyShuttle {
+      flex: 1 0 0px;
+    }
+  }
+
   > .form-check {
     /* .form-check has a margin-bottom which will be normally ignored, except in a label layout
    this results in different hights for form-check components with label and itemLabel */

[myfaces-tobago] 02/02: build(theme): rebuild after fixing message layout

Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit fb182739dcd104d1b99d7c4fd7f2ace3bd1ac5c3
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Oct 14 13:09:32 2021 +0200

    build(theme): rebuild after fixing message layout
---
 .../src/main/css/tobago.css                        |  6 ++-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.css                        |  6 ++-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.css                        |  6 ++-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../tobago-theme-speyside/src/main/css/tobago.css  |  6 ++-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../tobago-theme-standard/src/main/css/tobago.css  |  6 ++-
 .../src/main/css/tobago.css.map                    |  2 +-
 .../tobago-theme-standard/src/main/js/tobago.js    | 50 +++++++++++-----------
 .../src/main/js/tobago.js.map                      |  2 +-
 .../src/main/js/tobago.min.js                      |  4 +-
 .../src/main/js/tobago.min.js.map                  |  2 +-
 14 files changed, 54 insertions(+), 44 deletions(-)

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 6e475dd..be19e56 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
@@ -32,7 +32,7 @@
  * limitations under the License.
  */
 /*!
- * Bootstrap v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -2926,7 +2926,6 @@ textarea.form-control-lg {
 
 .btn {
   display: inline-block;
-  align-self: center;
   font-weight: 400;
   line-height: 1.5;
   color: #b2a76d;
@@ -11709,6 +11708,9 @@ tobago-flex-layout > tobago-flex-layout {
 .tobago-label-container > .tobago-selectManyShuttle {
   flex: 1 0 0px;
 }
+.tobago-label-container > .tobago-messages-container .tobago-input-group-outer, .tobago-label-container > .tobago-messages-container .tobago-selectManyShuttle {
+  flex: 1 0 0px;
+}
 .tobago-label-container > .form-check {
   /* .form-check has a margin-bottom which will be normally ignored, except in a label layout
   this results in different hights for form-check components with label and itemLabel */
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 aa7e43a..fd3ef51 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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.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.css b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
index a657350..e21f90c 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
@@ -59,7 +59,7 @@
 }
 
 /*!
- * Bootstrap v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -2953,7 +2953,6 @@ textarea.form-control-lg {
 
 .btn {
   display: inline-block;
-  align-self: center;
   font-weight: 400;
   line-height: 1.5;
   color: #777777;
@@ -11732,6 +11731,9 @@ tobago-flex-layout > tobago-flex-layout {
 .tobago-label-container > .tobago-selectManyShuttle {
   flex: 1 0 0px;
 }
+.tobago-label-container > .tobago-messages-container .tobago-input-group-outer, .tobago-label-container > .tobago-messages-container .tobago-selectManyShuttle {
+  flex: 1 0 0px;
+}
 .tobago-label-container > .form-check {
   /* .form-check has a margin-bottom which will be normally ignored, except in a label layout
   this results in different hights for form-check components with label and itemLabel */
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 9ed9cd4..4c1cc98 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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.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-scarborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
index 7a0a549..6e9537f 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 /*!
- * Bootstrap v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -2910,7 +2910,6 @@ textarea.form-control-lg {
 
 .btn {
   display: inline-block;
-  align-self: center;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
@@ -11719,6 +11718,9 @@ tobago-flex-layout > tobago-flex-layout {
 .tobago-label-container > .tobago-selectManyShuttle {
   flex: 1 0 0px;
 }
+.tobago-label-container > .tobago-messages-container .tobago-input-group-outer, .tobago-label-container > .tobago-messages-container .tobago-selectManyShuttle {
+  flex: 1 0 0px;
+}
 .tobago-label-container > .form-check {
   /* .form-check has a margin-bottom which will be normally ignored, except in a label layout
   this results in different hights for form-check components with label and itemLabel */
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 a46a015..8dc7dc6 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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.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-speyside/src/main/css/tobago.css b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
index 119a780..cefc2e7 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
@@ -32,7 +32,7 @@
  * limitations under the License.
  */
 /*!
- * Bootstrap v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -2893,7 +2893,6 @@ textarea.form-control-lg {
 
 .btn {
   display: inline-block;
-  align-self: center;
   font-weight: normal;
   line-height: 1.5;
   color: #212529;
@@ -11419,6 +11418,9 @@ tobago-flex-layout > tobago-flex-layout {
 .tobago-label-container > .tobago-selectManyShuttle {
   flex: 1 0 0px;
 }
+.tobago-label-container > .tobago-messages-container .tobago-input-group-outer, .tobago-label-container > .tobago-messages-container .tobago-selectManyShuttle {
+  flex: 1 0 0px;
+}
 .tobago-label-container > .form-check {
   /* .form-check has a margin-bottom which will be normally ignored, except in a label layout
   this results in different hights for form-check components with label and itemLabel */
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 d7684bb..9a7e7ca 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-standard/src/main/css/tobago.css b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
index 0c130eb..42e25e4 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 /*!
- * Bootstrap v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -2910,7 +2910,6 @@ textarea.form-control-lg {
 
 .btn {
   display: inline-block;
-  align-self: center;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
@@ -11689,6 +11688,9 @@ tobago-flex-layout > tobago-flex-layout {
 .tobago-label-container > .tobago-selectManyShuttle {
   flex: 1 0 0px;
 }
+.tobago-label-container > .tobago-messages-container .tobago-input-group-outer, .tobago-label-container > .tobago-messages-container .tobago-selectManyShuttle {
+  flex: 1 0 0px;
+}
 .tobago-label-container > .form-check {
   /* .form-check has a margin-bottom which will be normally ignored, except in a label layout
   this results in different hights for form-check components with label and itemLabel */
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 4c18ded..982da7a 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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.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/js/tobago.js b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
index 77c4567..cb78b2e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
@@ -1911,14 +1911,14 @@
   });
 
   /*!
-    * Bootstrap v5.1.2 (https://getbootstrap.com/)
+    * Bootstrap v5.1.3 (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)
     */
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): util/index.js
+   * Bootstrap (v5.1.3): util/index.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2229,7 +2229,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): dom/event-handler.js
+   * Bootstrap (v5.1.3): dom/event-handler.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2517,7 +2517,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): dom/data.js
+   * Bootstrap (v5.1.3): dom/data.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2571,7 +2571,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): base-component.js
+   * Bootstrap (v5.1.3): base-component.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2581,7 +2581,7 @@
    * ------------------------------------------------------------------------
    */
 
-  const VERSION = '5.1.2';
+  const VERSION = '5.1.3';
 
   class BaseComponent {
     constructor(element) {
@@ -2637,7 +2637,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): util/component-functions.js
+   * Bootstrap (v5.1.3): util/component-functions.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2663,7 +2663,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): alert.js
+   * Bootstrap (v5.1.3): alert.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2752,7 +2752,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): button.js
+   * Bootstrap (v5.1.3): button.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2823,7 +2823,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): dom/manipulator.js
+   * Bootstrap (v5.1.3): dom/manipulator.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2897,7 +2897,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): dom/selector-engine.js
+   * Bootstrap (v5.1.3): dom/selector-engine.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -2967,7 +2967,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): carousel.js
+   * Bootstrap (v5.1.3): carousel.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -3516,7 +3516,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): collapse.js
+   * Bootstrap (v5.1.3): collapse.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -3835,7 +3835,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): dropdown.js
+   * Bootstrap (v5.1.3): dropdown.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -4297,7 +4297,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): util/scrollBar.js
+   * Bootstrap (v5.1.3): util/scrollBar.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -4401,7 +4401,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): util/backdrop.js
+   * Bootstrap (v5.1.3): util/backdrop.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -4525,7 +4525,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): util/focustrap.js
+   * Bootstrap (v5.1.3): util/focustrap.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -4628,7 +4628,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): modal.js
+   * Bootstrap (v5.1.3): modal.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -5057,7 +5057,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): offcanvas.js
+   * Bootstrap (v5.1.3): offcanvas.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -5313,7 +5313,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): util/sanitizer.js
+   * Bootstrap (v5.1.3): util/sanitizer.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -5425,7 +5425,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): tooltip.js
+   * Bootstrap (v5.1.3): tooltip.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -6135,7 +6135,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): popover.js
+   * Bootstrap (v5.1.3): popover.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -6245,7 +6245,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): scrollspy.js
+   * Bootstrap (v5.1.3): scrollspy.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -6480,7 +6480,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): tab.js
+   * Bootstrap (v5.1.3): tab.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
@@ -6678,7 +6678,7 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.2): toast.js
+   * Bootstrap (v5.1.3): toast.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
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 3aaa898..584403b 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-utils.ts","../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlacement [...]
\ No newline at end of file
+{"version":3,"file":"tobago.js","sources":["../ts/tobago-utils.ts","../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlacement [...]
\ 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 0f0d527..eb83ecd 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";class e{static selfOrQuerySelectorAll(e,t){const s=new Array;e||(e=document.documentElement),e.matches(t)&&s.push(e);for(const i of e.querySelectorAll(t))s.push(i);return s}static getTransitionTime(e){const t=window.getComputedStyle(e);return 1e3*(Number.parseFloat(t.transitionDelay)+Number.parseFloat(t.transitionDuration))}}class t extends HTMLElement{constructor(){super(),this.CssClass={SHOW:"sho [...]
 /*!
-    * Bootstrap v5.1.2 (https://getbootstrap.com/)
+    * Bootstrap v5.1.3 (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 Ne="transitionend",Me=e=>{let t=e.getAttribute("data-bs-target");if(!t||"#"===t){let s=e.getAttribute("href");if(!s||!s.includes("#")&&!s.startsWith("."))return null;s.includes("#")&&!s.startsWith("#")&&(s=`#${s.split("#")[1]}`),t=s&&"#"!==s?s.trim():null}return t},Be=e=>{const t=Me(e);return t&&document.querySelector(t)?t:null},Re=e=>{const t=Me(e);return t?document.querySelector(t):null},je=e=>{e.dispatchEvent(new Event(Ne))},He=e=>!(!e||"object"!=typeof e)&&(void 0!==e.jquery&&( [...]
+const Ne="transitionend",Me=e=>{let t=e.getAttribute("data-bs-target");if(!t||"#"===t){let s=e.getAttribute("href");if(!s||!s.includes("#")&&!s.startsWith("."))return null;s.includes("#")&&!s.startsWith("#")&&(s=`#${s.split("#")[1]}`),t=s&&"#"!==s?s.trim():null}return t},Be=e=>{const t=Me(e);return t&&document.querySelector(t)?t:null},Re=e=>{const t=Me(e);return t?document.querySelector(t):null},je=e=>{e.dispatchEvent(new Event(Ne))},He=e=>!(!e||"object"!=typeof e)&&(void 0!==e.jquery&&( [...]
 //# 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 2396a03..a54d76a 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-utils.ts","../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlace [...]
\ No newline at end of file
+{"version":3,"file":"tobago.min.js","sources":["../ts/tobago-utils.ts","../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlace [...]
\ No newline at end of file