decidim-core 0.31.2 → 0.32.1

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import AutoComplete from "src/decidim/refactor/moved/autocomplete";
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
 import icon from "src/decidim/refactor/moved/icon";
 
 export default class extends Controller {
@@ -16,20 +16,6 @@ export default class extends Controller {
 
     this.initializeEmptyFocusElement();
     this.initializeAutoComplete();
-    this.setupSelectionListener();
-  }
-
-  /**
-   * Setup the selection event listener
-   * @returns {void}
-   */
-  setupSelectionListener() {
-    this.selectionHandler = (event) => {
-      const feedback = event.detail;
-      const selection = feedback.selection;
-      this.handleSelection(selection);
-    };
-    this.searchInput.addEventListener("selection", this.selectionHandler);
   }
 
   /*
@@ -37,8 +23,8 @@ export default class extends Controller {
    * @returns {void}
    */
   disconnect() {
-    if (this.searchInput && this.selectionHandler) {
-      this.searchInput.removeEventListener("selection", this.selectionHandler);
+    if (this.tomSelect) {
+      this.tomSelect.destroy();
     }
   }
 
@@ -80,11 +66,56 @@ export default class extends Controller {
    * @returns {void}
    */
   initializeAutoComplete() {
-    this.autoComplete = new AutoComplete(this.searchInput, {
-      dataMatchKeys: ["name", "nickname"],
-      dataSource: this.getDataSource.bind(this),
-      dataFilter: this.filterResults.bind(this),
-      modifyResult: this.modifyResult.bind(this)
+    this.tomSelect = new TomSelect(this.searchInput, {
+      maxItems: 1,
+      valueField: "id",
+      labelField: "name",
+      searchField: ["name", "nickname"],
+      loadThrottle: 200,
+      loadingClass: "loading",
+      preload: false,
+      highlight: true,
+      load: (query, callback) => {
+        if (!query || query.length < 2) {
+          callback();
+          return;
+        }
+        this.getDataSource(query, (results) => {
+          const filtered = this.filterResults(results);
+          filtered.forEach((item) => {
+            if (item.directMessagesEnabled === "false") {
+              item.disabled = true;
+            }
+          });
+          callback(filtered);
+        });
+      },
+      render: {
+        option: (data, escape) => {
+          const isDisabled = data.directMessagesEnabled === "false";
+          const className = isDisabled
+            ? "disabled"
+            : "";
+          const disabledMsg = isDisabled
+            ? `<small>${escape(this.searchInput.dataset.directMessagesDisabled)}</small>`
+            : "";
+          return `<div class="${className}">
+            <img src="${escape(data.avatarUrl)}" alt="${escape(data.name)}">
+            <span>${escape(data.nickname)}</span>
+            <small>${escape(data.name)}</small>
+            ${disabledMsg}
+          </div>`;
+        },
+        "no_results": () => `<div class="no-results">${this.searchInput.dataset.noresults || ""}</div>`
+      },
+      onChange: (value) => {
+        if (value) {
+          const option = this.tomSelect.options[value];
+          this.handleSelection({ value: option });
+          this.tomSelect.clear();
+          this.tomSelect.clearOptions();
+        }
+      }
     });
   }
 
@@ -129,7 +160,7 @@ export default class extends Controller {
    */
   filterResults(list) {
     return list.filter(
-      (item) => !this.selected.includes(item.value.id)
+      (item) => !this.selected.includes(item.id)
     );
   }
 
@@ -161,18 +192,23 @@ export default class extends Controller {
    */
   handleSelection(selection) {
     const id = selection.value.id;
-    // Check if we have reached the maximum limit or if direct messages are disabled
     if (this.isMaxLimitReached() || selection.value.directMessagesEnabled === "false") {
       return;
     }
 
     this.addSelectedUser(selection, id);
-    this.autoComplete.setInput("");
     this.selected.push(id);
+  }
 
-    if (this.autoComplete && this.autoComplete.autocomplete) {
-      this.autoComplete.autocomplete.close();
-    }
+  /**
+   * Escape HTML characters in a string
+   * @param {string} str - The string to escape
+   * @returns {string} The escaped HTML string
+   */
+  htmlEscape(str) {
+    const div = document.createElement("div");
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
   }
 
   /**
@@ -187,10 +223,10 @@ export default class extends Controller {
     const listItem = document.createElement("li");
     listItem.tabIndex = "-1";
     listItem.innerHTML = `
-      <input type="hidden" name="${this.options.name}" value="${id}">
-      <img src="${selection.value.avatarUrl}" alt="${selection.value.name}">
-      <span>${selection.value.name}</span>
-      <button type="button" data-remove="${id}" tabindex="0" aria-controls="0" aria-label="${label}">${icon("delete-bin-line")}</button>
+      <input type="hidden" name="${this.htmlEscape(this.options.name)}" value="${this.htmlEscape(id)}">
+      <img src="${this.htmlEscape(selection.value.avatarUrl)}" alt="${this.htmlEscape(selection.value.name)}">
+      <span>${this.htmlEscape(selection.value.name)}</span>
+      <button type="button" data-remove="${this.htmlEscape(id)}" tabindex="0" aria-controls="0" aria-label="${this.htmlEscape(label)}">${icon("delete-bin-line")}</button>
     `;
 
     this.selectedItems.appendChild(listItem);

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

@@ -7,13 +7,14 @@
 import { Application } from "@hotwired/stimulus"
 import MultipleMentionsController from "src/decidim/controllers/multiple_mentions/controller"
 
-const AutoComplete = require("src/decidim/refactor/moved/autocomplete");
+const TomSelect = require("tom-select/dist/cjs/tom-select.popular");
 const iconMock = require("src/decidim/refactor/moved/icon");
 
 // Mock the dependencies
-jest.mock("src/decidim/refactor/moved/autocomplete", () => {
+jest.mock("tom-select/dist/cjs/tom-select.popular", () => {
   return jest.fn().mockImplementation(() => ({
-    setInput: jest.fn()
+    destroy: jest.fn(),
+    clearOptions: jest.fn()
   }));
 });
 
@@ -114,12 +115,22 @@ describe("MultipleMentionsManager", () => {
       expect(controller.emptyFocusElement).toBe(existingElement);
     });
 
-    it("should initialize AutoComplete with correct configuration", () => {
-      expect(AutoComplete).toHaveBeenCalledWith(searchInput, {
-        dataMatchKeys: ["name", "nickname"],
-        dataSource: expect.any(Function),
-        dataFilter: expect.any(Function),
-        modifyResult: expect.any(Function)
+    it("should initialize TomSelect with correct configuration", () => {
+      expect(TomSelect).toHaveBeenCalledWith(searchInput, {
+        maxItems: 1,
+        valueField: "id",
+        labelField: "name",
+        searchField: ["name", "nickname"],
+        loadThrottle: 200,
+        loadingClass: "loading",
+        preload: false,
+        highlight: true,
+        load: expect.any(Function),
+        render: {
+          option: expect.any(Function),
+          "no_results": expect.any(Function)
+        },
+        onChange: expect.any(Function)
       });
     });
   });
@@ -226,24 +237,24 @@ describe("MultipleMentionsManager", () => {
       controller.selected = ["1", "3"];
 
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } },
-        { value: { id: "3" } },
-        { value: { id: "4" } }
+        { id: "1" },
+        { id: "2" },
+        { id: "3" },
+        { id: "4" }
       ];
 
       const filtered = controller.filterResults(list);
 
       expect(filtered).toEqual([
-        { value: { id: "2" } },
-        { value: { id: "4" } }
+        { id: "2" },
+        { id: "4" }
       ]);
     });
 
     it("should return all users when none are selected", () => {
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } }
+        { id: "1" },
+        { id: "2" }
       ];
 
       const filtered = controller.filterResults(list);
@@ -255,8 +266,8 @@ describe("MultipleMentionsManager", () => {
       controller.selected = ["1", "2"];
 
       const list = [
-        { value: { id: "1" } },
-        { value: { id: "2" } }
+        { id: "1" },
+        { id: "2" }
       ];
 
       const filtered = controller.filterResults(list);
@@ -330,7 +341,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).toContain("1");
       expect(selectedItems.children.length).toBe(1);
-      expect(controller.autoComplete.setInput).toHaveBeenCalledWith("");
     });
 
     it("should not add user when max limit is reached", () => {
@@ -350,7 +360,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).not.toContain("10");
       expect(selectedItems.children.length).toBe(0);
-      expect(controller.autoComplete.setInput).not.toHaveBeenCalled();
     });
 
     it("should not add user when direct messages are disabled", () => {
@@ -368,7 +377,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).not.toContain("1");
       expect(selectedItems.children.length).toBe(0);
-      expect(controller.autoComplete.setInput).not.toHaveBeenCalled();
     });
 
     it("should handle multiple valid selections", () => {
@@ -383,7 +391,6 @@ describe("MultipleMentionsManager", () => {
 
       expect(controller.selected).toEqual(["1", "2"]);
       expect(selectedItems.children.length).toBe(2);
-      expect(controller.autoComplete.setInput).toHaveBeenCalledTimes(2);
     });
   });
 

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

@@ -1,5 +1,31 @@
 // Utility helper functions for the date and time picker functionality
 
+export const adjustPickerPosition = (input, datePickerContainer, selector) => {
+  const parent = input.closest(selector);
+
+  if (getComputedStyle(parent).position === "static") {
+    parent.style.position = "relative";
+  }
+
+  const rect = input.getBoundingClientRect();
+  const calendarHeight = datePickerContainer.offsetHeight;
+  const spaceAbove = rect.top;
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const openBelow = spaceBelow >= calendarHeight || spaceBelow >= spaceAbove;
+
+  if (openBelow) {
+    // Open below
+    datePickerContainer.style.top = `${input.offsetHeight}px`;
+    datePickerContainer.style.bottom = "";
+  } else {
+    // Open above
+    datePickerContainer.style.top = "";
+    datePickerContainer.style.bottom = `${input.offsetHeight}px`;
+  }
+
+  datePickerContainer.style.right = "0px";
+};
+
 export const setHour = (value, format) => {
   const hour = value.split(":")[0];
   if (format === 12) {

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

@@ -1,6 +1,6 @@
 /* eslint-disable require-jsdoc */
 import icon from "src/decidim/refactor/moved/icon"
-import { dateToPicker, formatDate, displayDate, formatTime, calculateDatepickerPos } from "src/decidim/datepicker/datepicker_functions"
+import { dateToPicker, formatDate, displayDate, formatTime, calculateDatepickerPos, adjustPickerPosition } from "src/decidim/datepicker/datepicker_functions"
 import { dateKeyDownListener, dateBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners"
 import { getDictionary } from "src/decidim/refactor/moved/i18n"
 
@@ -46,13 +46,6 @@ export default function generateDatePicker(input, row, formats) {
   closeCalendar.setAttribute("class", "datepicker__close-calendar button button__transparent-secondary button__xs");
   closeCalendar.setAttribute("type", "button");
 
-  const pickCalendar = document.createElement("button");
-  pickCalendar.innerText = i18n.select;
-  pickCalendar.setAttribute("class", "datepicker__pick-calendar button button__secondary button__xs");
-  pickCalendar.setAttribute("disabled", true);
-  pickCalendar.setAttribute("type", "button");
-
-  datePickerContainer.appendChild(pickCalendar);
   datePickerContainer.appendChild(closeCalendar);
 
   dateColumn.appendChild(datePickerContainer);
@@ -103,15 +96,10 @@ export default function generateDatePicker(input, row, formats) {
   let pickedDate = null;
 
   datePicker.addEventListener("selectDate", (event) => {
-    pickCalendar.removeAttribute("disabled");
     pickedDate = event.detail;
-  });
-
-  pickCalendar.addEventListener("click", (event) => {
-    event.preventDefault();
+    prevDate = pickedDate;
 
     date.value = displayDate(datePicker.value, formats);
-    prevDate = pickedDate;
     if (input.type === "date") {
       input.value = `${pickedDate}`;
     } else if (input.type === "datetime-local") {
@@ -136,6 +124,7 @@ export default function generateDatePicker(input, row, formats) {
     };
     pickedDate = null;
     datePickerContainer.style.display = "block";
+    adjustPickerPosition(date, datePickerContainer, ".datepicker__date-column");
 
     document.addEventListener("click", datePickerDisplay);
 

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

@@ -2,7 +2,7 @@
 /* eslint max-lines: ["error", 310] */
 
 import icon from "src/decidim/refactor/moved/icon"
-import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue } from "src/decidim/datepicker/datepicker_functions"
+import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue, adjustPickerPosition } from "src/decidim/datepicker/datepicker_functions"
 import { timeKeyDownListener, timeBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners";
 import { getDictionary } from "src/decidim/refactor/moved/i18n";
 
@@ -29,7 +29,6 @@ export default function generateTimePicker(input, row, formats) {
     clock.setAttribute("disabled", input.attributes.disabled);
   };
 
-
   timeColumn.appendChild(time);
   timeColumn.appendChild(clock);
 
@@ -279,6 +278,8 @@ export default function generateTimePicker(input, row, formats) {
     event.preventDefault();
     timePicker.style.display = "block";
     document.addEventListener("click", timePickerDisplay);
+    adjustPickerPosition(time, timePicker, ".datepicker__time-column")
+
     hours.value = hourDisplay(hour);
     minutes.value = minuteDisplay(minute);
   });