decidim-core 0.32.0 → 0.32.2

data/app/packs/src/decidim/controllers/language_change/controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import autofocus from "src/decidim/refactor/implementation/autofocus"
 
 /**
  * This controller is used to change the active tab when the language is changed in the admin or system panel.
@@ -10,30 +11,42 @@ export default class extends Controller {
   connect() {
     this.handleChange = this.handleChange.bind(this);
     this.element.addEventListener("change", this.handleChange);
-    this.element.dispatchEvent(new Event("change"));
+    this.tabsContent = this.element.parentElement.parentElement.nextElementSibling;
+
+    this.setActiveTab(this.element.value);
   }
 
   disconnect() {
     this.element.removeEventListener("change", this.handleChange)
   }
 
-  handleChange(event) {
-    let targetTabPaneSelector = event.target.value;
-    let tabsContent = event.target.parentElement.parentElement.nextElementSibling;
-
-    if (!tabsContent) {
+  setActiveTab(targetTabPaneSelector) {
+    if (!this.tabsContent) {
       return;
     }
 
-    let activeTabContent = tabsContent.querySelector(".is-active");
+    let activeTabContent = this.tabsContent.querySelector(".is-active");
     if (activeTabContent) {
       activeTabContent.ariaHidden = "true";
       activeTabContent.classList.remove("is-active");
     }
-    let activePane = tabsContent.querySelector(targetTabPaneSelector);
+    let activePane = this.tabsContent.querySelector(targetTabPaneSelector);
     if (activePane) {
       activePane.ariaHidden = "false";
       activePane.classList.add("is-active");
     }
   }
+
+  handleChange(event) {
+    this.setActiveTab(event.target.value);
+
+    if (!this.tabsContent) {
+      return;
+    }
+
+    const activePane = this.tabsContent.querySelector(event.target.value);
+    if (activePane) {
+      autofocus(activePane);
+    }
+  }
 }

data/app/packs/src/decidim/controllers/language_change/language_change.test.js

@@ -1,5 +1,4 @@
 /* global jest */
-/* eslint max-lines: ["error", 360] */
 import { Application } from "@hotwired/stimulus"
 import LanguageChangeController from "src/decidim/controllers/language_change/controller";
 

data/app/packs/src/decidim/controllers/main_menu/controller.js

@@ -34,6 +34,10 @@ export default class extends Controller {
     this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this)
     this.focusTrapHandler = this.focusTrapHandler.bind(this)
 
+    if (!this.menuButton.hasAttribute("aria-expanded")) {
+      this.menuButton.setAttribute("aria-expanded", "false");
+    }
+
     this.menuButton.addEventListener("click", this.handleButtonClick)
     this.menuContainer.addEventListener("click", this.handleContainerClick)
 

data/app/packs/src/decidim/controllers/main_menu/main_menu.test.js

@@ -70,6 +70,29 @@ describe("MainMenuController", () => {
       expect(closeSpy).toHaveBeenCalledWith("click", controller.handleCloseButtonClick)
     })
 
+    it("sets aria-expanded to false when missing", async () => {
+      document.body.innerHTML = `
+        <button data-controller="main-menu" data-target="main-menu-container" data-close-button="main-menu-close">
+          Menu
+        </button>
+        <div id="main-menu-container" aria-hidden="true"></div>
+        <button id="main-menu-close">Close</button>
+      `
+
+      application.stop()
+      application = Application.start()
+      application.register("main-menu", MainMenuController)
+
+      const newButton = document.querySelector('[data-controller="main-menu"]')
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(application.getControllerForElementAndIdentifier(newButton, "main-menu"))
+        }, 0)
+      })
+
+      expect(newButton.getAttribute("aria-expanded")).toBe("false")
+    })
+
     it("returns early when menu container is missing", async () => {
       document.body.innerHTML = `
         <button data-controller="main-menu" data-target="missing-menu"></button>

data/app/packs/src/decidim/controllers/mention/controller.js

@@ -1,11 +1,12 @@
-/* eslint max-lines: ["error", 400] */
+/* eslint max-lines: ["error", 450] */
 
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
     this.options = {
-      noDataFoundMessage: this.element.getAttribute("data-noresults") || "No results found",
+      noDataFoundMessage: this.element.getAttribute("data-no_results") || "No results found",
+      searchPromptMessage: this.element.getAttribute("data-search_prompt") || "Type to search participants",
       debounceDelay: 250,
       menuItemLimit: 5
     };
@@ -94,6 +95,14 @@ export default class extends Controller {
     }
 
     this.currentMentionStart = trigger.start;
+
+    if (trigger.query.length < 2) {
+      // Invalidate any pending debounced searches
+      this.requestId += 1;
+      this.showMessage(this.options.searchPromptMessage);
+      return;
+    }
+
     this.performRemoteSearch(trigger.query);
   }
 
@@ -136,7 +145,7 @@ export default class extends Controller {
     }
 
     const textBeforeCursor = value.slice(0, caretPosition);
-    const mentionMatch = textBeforeCursor.match(/(?:^|\s)@([\w.-]{2,})$/);
+    const mentionMatch = textBeforeCursor.match(/(?:^|\s)@([\w.-]{1,})$/);
     if (!mentionMatch) {
       return null;
     }
@@ -257,6 +266,26 @@ export default class extends Controller {
     this.suggestion.classList.remove("hidden", "hide");
   }
 
+  showMessage(message) {
+    if (!this.suggestion || !message) {
+      return;
+    }
+
+    this.suggestion.innerHTML = "";
+    this.isActive = false;
+    this.selectedIndex = -1;
+
+    const item = document.createElement("button");
+    item.type = "button";
+    item.disabled = true;
+    item.classList.add("editor-suggestions-item", "editor-suggestions-item-disabled");
+    item.textContent = message;
+
+    this.suggestion.append(item);
+    this.positionSuggestionMenu();
+    this.suggestion.classList.remove("hidden", "hide");
+  }
+
   positionSuggestionMenu() {
     if (!this.suggestion || this.currentMentionStart === null) {
       return;

data/app/packs/src/decidim/controllers/mention/input_mentions.test.js

@@ -26,7 +26,7 @@ describe("MentionController", () => {
 
     document.body.innerHTML = `
       <div class="mention-container">
-        <input data-noresults="No users found" data-controller="mention" />
+        <input data-no_results="No users found" data-search_prompt="Type to search participants" data-controller="mention" />
       </div>
     `;
 
@@ -111,17 +111,20 @@ describe("MentionController", () => {
     expect(suggestions.classList.contains("hidden")).toBe(false);
   });
 
-  it("does not show suggestions when fewer than two mention characters", async () => {
+  it("shows search prompt when first mention character is entered", async () => {
     await connectController();
 
     mockElement.value = "Hello @d";
     mockElement.setSelectionRange(mockElement.value.length, mockElement.value.length);
     mockElement.dispatchEvent(new Event("input", { bubbles: true }));
 
-    await waitForDebounce();
-
     const suggestions = document.querySelector(".editor-suggestions");
-    expect(suggestions.classList.contains("hidden")).toBe(true);
+    const promptItem = suggestions.querySelector(".editor-suggestions-item");
+
+    expect(promptItem).toBeInstanceOf(HTMLButtonElement);
+    expect(promptItem.textContent).toBe("Type to search participants");
+    expect(promptItem.disabled).toBe(true);
+    expect(suggestions.classList.contains("hidden")).toBe(false);
   });
 
   it("inserts selected mention on click", async () => {

data/app/packs/src/decidim/controllers/multiple_mentions/input_multiple_mentions.test.js

@@ -68,7 +68,7 @@ describe("MultipleMentionsManager", () => {
           spellcheck="false"
           autocomplete="off"
           placeholder="Search..."
-          data-noresults="No results"
+          data-no_results="No results"
           data-selected= "selected-users"
           contenteditable="true"
           data-direct-messages-disabled="Direct messages disabled">

data/app/packs/src/decidim/controllers/password_toggler/controller.js

@@ -55,6 +55,18 @@ export default class extends Controller {
       hide: icon("eye-off-line")
     }
 
+    const existingWrapper = this.input.closest(".input-group__password");
+    if (existingWrapper) {
+      const existingButton = existingWrapper.querySelector('button[type="button"]');
+      const existingStatusText = existingWrapper.querySelector('span.sr-only[aria-live="polite"]');
+      if (existingButton && existingStatusText) {
+        this.button = existingButton;
+        this.statusText = existingStatusText;
+        this.bindListeners();
+        return;
+      }
+    }
+
     this.init();
   }
 
@@ -81,8 +93,17 @@ export default class extends Controller {
    */
   init() {
     this.createControls();
+    this.bindListeners();
+  }
+
+  bindListeners() {
+    if (this.button && this.boundToggleVisibility) {
+      this.button.removeEventListener("click", this.boundToggleVisibility);
+    }
+    if (this.form && this.boundHidePassword) {
+      this.form.removeEventListener("submit", this.boundHidePassword);
+    }
 
-    // Bind methods to maintain correct context
     this.boundToggleVisibility = this.toggleVisibility.bind(this);
     this.boundHidePassword = this.hidePassword.bind(this);
 

data/app/packs/src/decidim/controllers/password_toggler/password_toggler.test.js

@@ -22,17 +22,7 @@ describe("PasswordToggler", () => {
     container = document.createElement("div");
     container.innerHTML = `
       <div data-controller="password-toggler" class="flex flex-row items-center gap-x-2" data-show-password="Show secret" data-hide-password="Hide Secret" data-hidden-password="Secret is hidden" data-shown-password="Secret is shown">
-        <div class="input-group__password">
-          <div class="input-group__password">
-            <button type="button" aria-controls="token_162" aria-label="Show password">
-              <svg width="0.75em" height="0.75em" role="img" aria-hidden="true">
-                <title>eye-line</title>
-                <use href="/decidim-packs/media/images/remixicon.symbol-e643e553623ffcd49f94.svg#ri-eye-line"></use>
-              </svg>
-            </button>
-            <input type="password" id="token_162" value="AXXXXXXXX" class="w-full" autocomplete="off">
-          </div>
-        </div>
+        <input type="password" id="token_162" value="AXXXXXXXX" class="w-full" autocomplete="off">
         <div class="basis-1/4">
           <button type="button" class="button button__sm button__text-primary" data-clipboard-copy="#token_162">
             <span>Copy secret</span>
@@ -204,22 +194,23 @@ describe("PasswordToggler", () => {
     });
   });
 
-  describe("integration with existing markup", () => {
-    it("works with existing button structure", () => {
-      const existingButton = passwordElement.querySelector('button[aria-controls="token_162"]');
-      expect(existingButton).toBeTruthy();
+  describe("idempotency", () => {
+    it("does not duplicate controls on reconnect", () => {
+      controller.disconnect();
+      controller.connect();
 
-      controller.init();
+      const wrappers = passwordElement.querySelectorAll(".input-group__password");
+      const buttons = passwordElement.querySelectorAll('button[aria-controls="token_162"]');
 
-      // Should work alongside existing button
-      expect(controller.button).toBeDefined();
-      expect(controller.input.getAttribute("type")).toBe("password");
+      expect(wrappers.length).toBe(1);
+      expect(buttons.length).toBe(1);
     });
+  });
 
+  describe("integration with existing markup", () => {
     it("handles password input with existing value", () => {
       expect(controller.input.value).toBe("AXXXXXXXX");
 
-      controller.init();
       controller.showPassword();
 
       expect(controller.input.getAttribute("type")).toBe("text");

data/app/packs/src/decidim/datepicker/datepicker_functions.js

@@ -6,11 +6,16 @@ export const adjustPickerPosition = (input, datePickerContainer, selector) => {
   if (getComputedStyle(parent).position === "static") {
     parent.style.position = "relative";
   }
+  const stickyFooterItem = document.querySelector(".item__edit-sticky");
+
+  const availableBottom = stickyFooterItem
+    ? stickyFooterItem.getBoundingClientRect().top
+    : window.innerHeight;
 
-  const rect = input.getBoundingClientRect();
   const calendarHeight = datePickerContainer.offsetHeight;
+  const rect = input.getBoundingClientRect();
+  const spaceBelow = availableBottom - rect.bottom;
   const spaceAbove = rect.top;
-  const spaceBelow = window.innerHeight - rect.bottom;
   const openBelow = spaceBelow >= calendarHeight || spaceBelow >= spaceAbove;
 
   if (openBelow) {
@@ -50,10 +55,7 @@ export const setMinute = (value) => {
 };
 
 export const formatInputDate = (date, formats) => {
-  const dateList = date.split("-");
-  const year = dateList[0];
-  const month = dateList[1];
-  const day = dateList[2];
+  const [year, month, day] = date.split("-");
 
   if (formats.order === "m-d-y") {
     return `${month}${formats.separator}${day}${formats.separator}${year}`;
@@ -63,10 +65,34 @@ export const formatInputDate = (date, formats) => {
   return `${day}${formats.separator}${month}${formats.separator}${year}`;
 };
 
+/**
+ * Splits a time string into two elements: hours and minutes. Ensures a returned
+ * array of size 2 for any kind of strings or `null` values.
+ *
+ * Examples:
+ * splitTime("") => ["00", "00"]
+ * splitTime(null) => ["00", "00"]
+ * splitTime("12") => ["12", "00"]
+ * splitTime("12:30") => ["12", "30"]
+ * splitTime("2:4") => ["02", "04"]
+ * splitTime("12:30:45") => ["12", "30"]
+ *
+ * @param {String} value The original time string, typically hh:ss.
+ * @returns {Array} An array with two elements where the first element is the
+ *   hour part and the second element is the minute part.
+ */
+const splitTime = (value) => {
+  return [...(value || "").split(":"), "00"].splice(0, 2).map((part) => part.padStart(2, "0"));
+};
+
 export const formatInputTime = (time, format, input) => {
-  const timeList = time.split(":");
-  let hour = timeList[0];
-  const minute = timeList[1];
+  if (!time) {
+    return "";
+  } else if (time.length < 1) {
+    return time;
+  }
+
+  let [hour, minute] = splitTime(time);
 
   if (format === 12) {
     if (Number(hour) === 12) {
@@ -80,11 +106,9 @@ export const formatInputTime = (time, format, input) => {
     } else if (Number(hour) === 0) {
       hour = "12";
     }
-
-    return `${hour}:${minute}`;
   };
 
-  return time;
+  return `${hour}:${minute}`;
 };
 
 export const changeHourDisplay = (change, hour, format) => {
@@ -199,29 +223,21 @@ export const formatDate = (value, formats) => {
 };
 
 export const formatTime = (value, format, inputname) => {
+  let [hour, minute] = splitTime(value);
+
   if (format === 12) {
-    const splitValue = value.split(":");
-    let hour = splitValue[0];
-    const minute = splitValue[1];
     if (document.getElementById(`period_am_${inputname}`).checked) {
-      switch (hour) {
-      case "12":
+      if (hour === "12") {
         hour = "00";
-
-        return `${hour}:${minute}`;
-      default:
-        return value;
-      };
+      }
     } else if (document.getElementById(`period_pm_${inputname}`).checked) {
       if (Number(hour) > 0 && Number(hour) < 12) {
         hour = `${Number(hour) + 12}`;
       };
-
-      return `${hour}:${minute}`
     };
   };
 
-  return value;
+  return `${hour}:${minute}`;
 };
 
 export const updateInputValue = (input, formats, time) => {

data/app/packs/src/decidim/datepicker/generate_datepicker.js

@@ -51,7 +51,7 @@ export default function generateDatePicker(input, row, formats) {
   dateColumn.appendChild(datePickerContainer);
 
   let prevDate = null;
-  let defaultTime = input.getAttribute("default_time") || "00:00"
+  let defaultTime = input.dataset.defaultTime || "00:00"
 
   const datePickerDisplay = (event) => {
     if (!dateColumn.contains(event.target)) {
@@ -72,7 +72,7 @@ export default function generateDatePicker(input, row, formats) {
       if (input.type === "date") {
         input.value = `${formatDate(date.value, formats)}`;
       } else if (input.type === "datetime-local") {
-        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value || defaultTime, formats.time, input.id)}`;
       };
     };
   });
@@ -88,7 +88,7 @@ export default function generateDatePicker(input, row, formats) {
       if (input.type === "date") {
         input.value = `${formatDate(date.value, formats)}`;
       } else if (input.type === "datetime-local") {
-        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value || defaultTime, formats.time, input.id)}`;
       };
     };
   });
@@ -103,7 +103,7 @@ export default function generateDatePicker(input, row, formats) {
     if (input.type === "date") {
       input.value = `${pickedDate}`;
     } else if (input.type === "datetime-local") {
-      input.value = `${pickedDate}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+      input.value = `${pickedDate}T${formatTime(document.querySelector(`#${input.id}_time`).value || defaultTime, formats.time, input.id)}`;
     };
     datePickerContainer.style.display = "none";
   });

data/app/packs/src/decidim/datepicker/test/datepicker_functions_adjust_picker_position.test.js

@@ -128,6 +128,37 @@ describe("adjustDatePickerPosition", () => {
 
     expect(datePickerContainer.style.right).toBe("0px");
   });
+
+  it("opens below when there is enough space above the sticky action area", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 140
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 800
+    });
+
+    const stickyContainer = document.createElement("div");
+    stickyContainer.className = "item__edit-sticky";
+
+    jest.spyOn(stickyContainer, "getBoundingClientRect").mockReturnValue({
+      top: 500
+    });
+
+    document.body.appendChild(stickyContainer);
+
+    try {
+      adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+      expect(datePickerContainer.style.top).toBe("40px");
+      expect(datePickerContainer.style.bottom).toBe("");
+    } finally {
+      document.body.removeChild(stickyContainer);
+    }
+  });
 });
 
 
@@ -231,4 +262,37 @@ describe("adjustTimePickerPosition", () => {
 
     expect(timePicker.style.right).toBe("0px");
   });
+
+  it("opens above when sticky action area reduces the available space below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 300,
+      bottom: 340
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 600
+    });
+
+    const stickyContainer = document.createElement("div");
+    stickyContainer.className = "item__edit-sticky";
+
+    jest.spyOn(stickyContainer, "getBoundingClientRect").mockReturnValue({
+      top: 500
+    });
+
+    document.body.appendChild(stickyContainer);
+
+    adjustPickerPosition(
+      input,
+      timePicker,
+      ".datepicker__time-column"
+    );
+
+    expect(timePicker.style.top).toBe("");
+    expect(timePicker.style.bottom).toBe("30px");
+
+    document.body.removeChild(stickyContainer);
+  });
 });

data/app/packs/src/decidim/datepicker/test/time.test.js

@@ -49,34 +49,42 @@ describe("setMinute", () => {
 });
 
 describe("formatInputTime", () => {
-  const setupDOM = () => {
-    document.body.innerHTML = `
-      <input type="radio" id="period_am_exampleInput" name="period">
-      <input type="radio" id="period_pm_exampleInput" name="period">
-    `;
-  };
-
   describe("24-hour format", () => {
+    const format = 24;
+    const input = { id: "exampleInput" };
+
     it("returns the value in correct format", () => {
-      setupDOM();
-      const time = "15:30";
-      const format = 24;
-      const input = { id: "exampleInput" };
+      const result = formatInputTime("15:30", format, input);
 
-      const result = formatInputTime(time, format, input);
+      expect(result).toBe("15:30");
+    });
+
+    it("returns the value in correct format if seconds are provided", () => {
+      const result = formatInputTime("15:30:04", format, input);
 
       expect(result).toBe("15:30");
     });
+
+    it("returns an empty string if an empty string is provided", () => {
+      const result = formatInputTime("", 24, { id: "exampleInput" });
+
+      expect(result).toBe("");
+    });
   })
 
   describe("12-hour format", () => {
-    it("returns the value in correct format and checks the PM radio-button", () => {
-      setupDOM();
-      const time = "12:45";
-      const format = 12;
-      const input = { id: "exampleInput" };
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <input type="radio" id="period_am_exampleInput" name="period">
+        <input type="radio" id="period_pm_exampleInput" name="period">
+      `;
+    });
+
+    const format = 12;
+    const input = { id: "exampleInput" };
 
-      const result = formatInputTime(time, format, input);
+    it("returns the value in correct format and checks the PM radio-button", () => {
+      const result = formatInputTime("12:45", format, input);
 
       expect(result).toBe("12:45");
       expect(document.getElementById("period_pm_exampleInput").checked).toBeTruthy();
@@ -84,17 +92,24 @@ describe("formatInputTime", () => {
     });
 
     it("returns the value in correct format", () => {
-      setupDOM();
-      const time = "00:25";
-      const format = 12;
-      const input = { id: "exampleInput" };
-
-      const result = formatInputTime(time, format, input);
+      const result = formatInputTime("00:25", format, input);
 
       expect(result).toBe("12:25");
       // We are not expecting a radio button to be selected here since in a real environment the selected button is not
       // handled by this method for values < 12
     });
+
+    it("returns the value in correct format if seconds are provided", () => {
+      const result = formatInputTime("00:25:04", format, input);
+
+      expect(result).toBe("12:25");
+    });
+
+    it("returns an empty string if an empty string is provided", () => {
+      const result = formatInputTime("", 24, { id: "exampleInput" });
+
+      expect(result).toBe("");
+    });
   })
 });
 

data/app/packs/src/decidim/direct_uploads/upload_modal.js

@@ -253,7 +253,8 @@ export default class UploadModal {
   }
 
   setProgressBar(name, value) {
-    const item = Array.from(this.uploadItems.querySelectorAll("[data-filename]")).find((el) => el.dataset.filename === name);
+    const items = Array.from(this.uploadItems.querySelectorAll("[data-filename]"));
+    const item = items.filter((el) => el.dataset.filename === name).pop();
     if (item) {
       item.querySelector("progress").value = value;
     }