Progress bar options

addons/html_builder/static/src/builder/options/progress_bar_option.js

@@ -0,0 +1,75 @@
+import { Component, onWillDestroy } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { defaultOptionComponents } from "../components/defaultComponents";
+
+export class ProgressBarOption extends Component {
+    static template = "html_builder.ProgressBarOption";
+    static components = { ...defaultOptionComponents };
+    static props = {};
+
+    setup() {
+        registry
+            .category("clean-for-save-options")
+            .add("cleanForSaveProgressBarOption", this.cleanForSave.bind(this));
+        onWillDestroy(() => {
+            registry.category("clean-for-save-options").remove("cleanForSaveProgressBarOption");
+        });
+    }
+    cleanForSave() {
+        const editingEl = this.env.getEditingElement();
+        const progressBar = editingEl.querySelector(".progress-bar");
+        const progressLabel = editingEl.querySelector(".s_progress_bar_text");
+
+        if (!progressBar.classList.contains("progress-bar-striped")) {
+            progressBar.classList.remove("progress-bar-animated");
+        }
+
+        if (progressLabel && progressLabel.classList.contains("d-none")) {
+            progressLabel.remove();
+        }
+    }
+}
+
+registry.category("sidebar-element-option").add("ProgressBarOption", {
+    OptionComponent: ProgressBarOption,
+    selector: ".s_progress_bar",
+});
+
+registry.category("website-builder-actions").add("display", {
+    apply: ({ editingElement, param }) => {
+        // retro-compatibility
+        if (editingElement.classList.contains("progress")) {
+            editingElement.classList.remove("progress");
+            const progressBarEl = editingElement.querySelector(".progress-bar");
+            if (progressBarEl) {
+                const wrapperEl = document.createElement("div");
+                wrapperEl.classList.add("progress");
+                progressBarEl.parentNode.insertBefore(wrapperEl, progressBarEl);
+                wrapperEl.appendChild(progressBarEl);
+                editingElement.querySelectorAll(".progress-bar span").foreach((spanEl) => {
+                    spanEl.classList.add("s_progress_bar_text");
+                });
+            }
+        }
+
+        const progress = editingElement.querySelector(".progress");
+        const progressValue = progress.getAttribute("aria-valuenow");
+        let progressLabel = editingElement.querySelector(".s_progress_bar_text");
+
+        if (!progressLabel && param !== "none") {
+            progressLabel = document.createElement("span");
+            progressLabel.classList.add("s_progress_bar_text", "small");
+            progressLabel.textContent = progressValue + "%";
+        }
+
+        if (param === "inline") {
+            editingElement.querySelector(".progress-bar").appendChild(progressLabel);
+        } else if (["below", "after"].includes(param)) {
+            progress.insertAdjacentElement("afterend", progressLabel);
+        }
+
+        // Temporary hide the label. It's effectively removed in cleanForSave
+        // if the option is confirmed
+        progressLabel.classList.toggle("d-none", param === "none");
+    },
+});

addons/html_builder/static/src/builder/options/progress_bar_option.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.ProgressBarOption">
+    <WeRow label.translate="Label">
+        <WeSelect>
+            <WeSelectItem action="'display'" actionParam="'inline'" classAction="'s_progress_bar_label_inline'">Display Inside</WeSelectItem>
+            <WeSelectItem action="'display'" actionParam="'below'" classAction="'s_progress_bar_label_below'">Display Below</WeSelectItem>
+            <WeSelectItem action="'display'" actionParam="'after'" classAction="'s_progress_bar_label_after'">Display After</WeSelectItem>
+            <WeSelectItem action="'display'" actionParam="'none'" classAction="'s_progress_bar_label_hidden'">Hide</WeSelectItem>
+        </WeSelect>
+    </WeRow>
+</t>
+
+</templates>

addons/html_builder/static/src/builder/snippets_menu.js

@@ -180,6 +180,11 @@ export class SnippetsMenu extends Component {
         for (const actionButtonEl of actionButtonEls) {
             actionButtonEl.disabled = true;
         }
+        // Do the cleanForSave of the options
+        const saveOptions = registry.category("clean-for-save-options").getAll();
+        for (const saveOption of saveOptions) {
+            saveOption();
+        }
         // Save the pending images and the dirty elements
         const saveProms = [...this.editor.editable.querySelectorAll(".o_dirty")].map(
             async (dirtyEl) => {