[IMP] web_widget_progressbar_gradient: Add inverse option

Allows to reverse the gradient rendering

web_widget_progressbar_gradient/static/src/js/progressbar.esm.js

@@ -5,11 +5,35 @@
 import {ProgressBarField} from "@web/views/fields/progress_bar/progress_bar_field";
 import {registry} from "@web/core/registry";
 
+const {onMounted} = owl;
 export class ProgressBarFieldGradient extends ProgressBarField {
     setup() {
         super.setup();
+        onMounted(() => this._mounted());
+    }
+
+    _mounted() {
+        // Set the gradient css and inverse if set
+        for (const child of this.__owl__.bdom.el.children) {
+            if (child.classList.contains("o_progress")) {
+                child.children[0].classList.add("o_progressbar_gradient");
+                if (this.props.inverse) {
+                    child.children[0].classList.add("o_inverse");
+                }
+            }
+        }
     }
 }
+ProgressBarFieldGradient.extractProps = ({attrs}) => {
+    return {
+        inverse: attrs.options.inverse,
+    };
+};
 ProgressBarFieldGradient.template =
     "web_widget_progressbar_color.ProgressBarFieldGradient";
+ProgressBarFieldGradient.props = {
+    ...ProgressBarField.props,
+    inverse: {type: Boolean, optional: true},
+};
+
 registry.category("fields").add("progressbar_gradient", ProgressBarFieldGradient);

web_widget_progressbar_gradient/static/src/scss/progressbar.scss

@@ -8,7 +8,8 @@ div:has(div.o_progressbar_gradient) .o_progressbar .o_progress {
     -webkit-mask: linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0);
 }
-.o_progressbar .o_progress .o_progressbar_gradient::before {
+
+.o_progressbar .o_progress .o_progressbar_gradient.o_inverse::before {
     content: "";
     position: absolute;
     top: 0;
@@ -17,3 +18,13 @@ div:has(div.o_progressbar_gradient) .o_progressbar .o_progress {
     bottom: 0;
     background-image: linear-gradient(to right, #198754, #ffc107, #dc3545);
 }
+
+.o_progressbar .o_progress .o_progressbar_gradient::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: linear-gradient(to right, #dc3545, #ffc107, #198754);
+}

web_widget_progressbar_gradient/static/src/xml/progressbar.xml

@@ -9,12 +9,5 @@
         t-inherit-mode="primary"
         owl="1"
     >
-        <xpath expr="//div[@t-attf-class]" position="attributes">
-            <attribute
-                name="t-attf-class"
-                add="{{'o_progressbar_gradient'}}"
-                separator=" "
-            />
-        </xpath>
     </t>
 </templates>