decidim-core 0.31.6 → 0.31.8

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

@@ -50,10 +50,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 +60,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 +101,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 +218,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

@@ -58,7 +58,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)) {
@@ -79,7 +79,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)}`;
       };
     };
   });
@@ -95,7 +95,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)}`;
       };
     };
   });
@@ -115,7 +115,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/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;
     }

data/app/packs/src/decidim/map/controller.js

@@ -29,7 +29,16 @@ export default class MapController {
   }
 
   load() {
-    this.map = L.map(this.mapId);
+    const zoomControl = L.control.zoom({
+      zoomInTitle: this.config.zoomInText || "Zoom in",
+      zoomOutTitle: this.config.zoomOutText || "Zoom out"
+    });
+
+    this.map = L.map(this.mapId, {
+      zoomControl: false
+    });
+
+    this.map.addControl(zoomControl);
 
     this.map.scrollWheelZoom.disable();
 

data/app/packs/src/decidim/refactor/moved/focus_guard.js

@@ -5,14 +5,12 @@ const focusableDisableableNodes = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"];
 export default class FocusGuard {
   constructor(container) {
     this.container = container;
-    this.guardedElement = null;
-    this.triggerElement = null;
+    this.stack = [];
   }
 
   trap(element, trigger) {
     this.enable();
-    this.guardedElement = element;
-    this.triggerElement = trigger;
+    this.stack.push({ element, trigger });
   }
 
   enable() {
@@ -45,14 +43,15 @@ export default class FocusGuard {
   }
 
   disable() {
-    const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
-    guards.forEach((guard) => guard.remove());
+    const current = this.stack.pop();
 
-    this.guardedElement = null;
+    if (this.stack.length === 0) {
+      const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
+      guards.forEach((guard) => guard.remove());
+    }
 
-    if (this.triggerElement) {
-      this.triggerElement.focus();
-      this.triggerElement = null;
+    if (current && current.trigger) {
+      current.trigger.focus();
     }
   }
 
@@ -67,12 +66,13 @@ export default class FocusGuard {
   };
 
   handleContainerFocus(guard) {
-    if (!this.guardedElement) {
+    const current = this.stack[this.stack.length - 1];
+    if (!current || !current.element) {
       guard.blur();
       return;
     }
 
-    const visibleNodes = Array.from(this.guardedElement.querySelectorAll("*")).filter((item) => {
+    const visibleNodes = Array.from(current.element.querySelectorAll("*")).filter((item) => {
       return this.isVisible(item);
     });
 

data/app/packs/src/decidim/refactor/moved/focus_guard.test.js

@@ -0,0 +1,136 @@
+/* global jest */
+
+import FocusGuard from "src/decidim/refactor/moved/focus_guard"
+
+describe("FocusGuard", () => {
+  let focusGuard = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    focusGuard = new FocusGuard(document.body);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  describe("single dialog", () => {
+    it("creates focus guards on trap", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(2);
+    });
+
+    it("removes focus guards and returns focus on disable", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      focusGuard.disable();
+
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(0);
+      expect(document.activeElement).toBe(trigger);
+    });
+  });
+
+  describe("nested dialogs", () => {
+    it("keeps guards when inner dialog is disabled", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+      expect(document.activeElement).toBe(innerTrigger);
+    });
+
+    it("removes guards when outer dialog is disabled last", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      focusGuard.disable();
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(0);
+      expect(document.activeElement).toBe(outerTrigger);
+    });
+
+    it("cycles focus to the current top dialog when a guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      innerDialog.appendChild(innerInput);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const endGuard = document.body.querySelector('.focusguard[data-position="end"]');
+      endGuard.focus();
+
+      expect(document.activeElement).toBe(innerInput);
+    });
+
+    it("cycles focus backward to the current top dialog when the start guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      const innerButton = document.createElement("button");
+      innerDialog.appendChild(innerInput);
+      innerDialog.appendChild(innerButton);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const startGuard = document.body.querySelector('.focusguard[data-position="start"]');
+      startGuard.focus();
+
+      expect(document.activeElement).toBe(innerButton);
+    });
+  });
+});

data/app/packs/src/decidim/utilities/dom.js

@@ -77,7 +77,7 @@ const createUnloadPreventer = () => {
     ev.preventDefault();
     ev.stopPropagation();
 
-    confirmAction(confirmMessage, link).then((answer) => {
+    confirmAction(confirmMessage, link, { iconName: "alert-line" }).then((answer) => {
       if (!answer) {
         return;
       }
@@ -109,7 +109,7 @@ const createUnloadPreventer = () => {
     ev.stopImmediatePropagation();
     ev.stopPropagation();
 
-    confirmAction(confirmMessage, button).then((answer) => {
+    confirmAction(confirmMessage, button, { iconName: "alert-line" }).then((answer) => {
       if (!answer) {
         return;
       }

data/app/packs/stylesheets/decidim/_cards.scss

@@ -55,7 +55,7 @@
     }
 
     &-content {
-      @apply flex flex-col gap-2.5;
+      @apply flex flex-col gap-2.5 min-w-0 break-words;
     }
 
     &-title {

data/app/packs/stylesheets/decidim/_content_blocks.scss

@@ -13,18 +13,12 @@
         @apply block max-h-40 overflow-hidden relative first:[&_*]:mt-0 before:content-[''] before:absolute before:inset-0 before:h-full before:w-full before:bg-gradient-to-b before:from-transparent before:to-white after:content-[''] after:absolute after:inset-0 after:h-full after:w-full after:bg-gradient-to-b after:from-transparent after:to-white;
       }
 
-      [aria-expanded="false"] > svg:last-of-type,
-      [aria-expanded="false"] > span:last-of-type,
-      [aria-expanded="true"] > span:first-of-type,
-      [aria-expanded="true"] > svg:first-of-type {
-        @apply hidden;
+      [aria-expanded] > svg {
+        @apply transition-transform;
       }
 
-      [aria-expanded="true"] > svg:last-of-type,
-      [aria-expanded="true"] > span:last-of-type,
-      [aria-expanded="false"] > span:first-of-type,
-      [aria-expanded="false"] > svg:first-of-type {
-        @apply block;
+      [aria-expanded="true"] > svg {
+        @apply rotate-180;
       }
     }
 

data/app/packs/stylesheets/decidim/_conversations.scss

@@ -92,14 +92,6 @@
       [data-dialog-closable] {
         @apply top-6 right-6;
       }
-
-      [data-dialog-container] {
-        @apply inline grid-cols-none;
-      }
-
-      [data-dialog-title] {
-        @apply col-span-2 md:col-span-1 md:col-start-2 grid grid-cols-[auto_1fr] items-start md:items-center gap-2 pb-4 text-left text-xl text-gray-2 md:border-b md:border-gray-3;
-      }
     }
 
     &-results {

data/app/packs/stylesheets/decidim/_cookies.scss

@@ -65,17 +65,25 @@
     &-panel {
       @apply divide-y divide-gray-3 [&>*]:py-4 [&>p]:text-gray-2;
 
-      &__tr {
-        @apply flex items-center justify-between rounded first-of-type:bg-background-4;
+      table {
+        @apply w-full border-collapse;
       }
 
-      &__th {
-        @apply w-1/4 p-2 bg-background-4 text-gray-2 font-bold text-sm;
+      thead tr {
+        @apply bg-background-4;
       }
 
-      &__td {
+      th {
+        @apply w-1/4 p-2 text-gray-2 font-bold text-sm text-left;
+      }
+
+      td {
         @apply w-1/4 p-2 text-gray-2 text-xs;
       }
+
+      tbody tr {
+        @apply border-b border-gray-3;
+      }
     }
 
     &-toggle {

data/app/packs/stylesheets/decidim/_documents.scss

@@ -3,7 +3,7 @@
     @apply divide-y divide-background [&>*]:py-4 first:[&>*]:pt-0 last:[&>*]:pb-0;
 
     > * {
-      @apply flex items-center justify-between gap-4;
+      @apply grid sm:flex items-center justify-between gap-4;
     }
   }
 

data/app/packs/stylesheets/decidim/_footer.scss

@@ -3,12 +3,44 @@ footer {
     @apply bg-gray-4;
 
     &__top {
-      @apply hidden lg:flex flex-row gap-8 container py-10;
+      @apply flex flex-col lg:flex-row gap-0 lg:gap-8 container py-10;
 
       .prose a,
       .prose strong {
         @apply text-white;
       }
+
+      .footer__nav {
+        @apply border-b border-white/20 lg:border-0;
+
+        ul {
+          @apply space-y-4 break-inside-avoid mb-4;
+
+          li a {
+            @apply font-semibold underline decoration-1 underline-offset-1;
+          }
+        }
+
+        > [data-controls] {
+          @apply flex items-center justify-between w-full py-4 lg:pointer-events-none lg:cursor-default text-left text-white font-semibold;
+
+          svg {
+            @apply w-4 h-4 fill-current transition-transform lg:hidden;
+          }
+
+          &[aria-expanded="true"] svg {
+            @apply rotate-180;
+          }
+        }
+
+        [id*="panel"][aria-hidden="true"] {
+          @apply hidden lg:block;
+        }
+
+        [id*="panel"][aria-hidden="false"] {
+          @apply block;
+        }
+      }
     }
 
     &__down {