decidim-core 0.26.5 → 0.27.0.rc1

data/app/packs/images/decidim/gamification/badges/decidim_gamification_badges_invitations.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="invitations-svg" width="1080" height="1080" x="0" y="0" enable-background="new 0 0 1080 1080" version="1.1" viewBox="0 0 1080 1080" xml:space="preserve"><g id="invitations" class="stroke-primary"><path id="_x35_0-pct" fill="#31536E" fill-opacity=".5" stroke="#31536E" stroke-miterlimit="10" stroke-width="16" d="M558.615,484.287c-1.795,13.101-13.868,22.268-26.971,20.475l-430.091-58.867c-13.102-1.793-22.269-13.867-20.476-26.969 l25.128-183.588c1.792-13.101,13.867-22.268,26.969-20.475l430.09,58.867c13.104,1.793,22.271,13.867,20.476,26.969 L558.615,484.287z" class="stroke-primary fill-primary"/><g id="llave-2"><polyline id="_x32_5-pct" fill="#31536E" fill-opacity=".25" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" points="725.15 608.29 795.92 631.312 811.343 619.35 951.072 799.492 994.668 765.676 854.939 585.534 870.773 573.253 865.453 489.109 785.277 463.028 710.425 521.088 710.771 526.581" class="stroke-primary fill-primary"/><line x1="822.037" x2="949.643" y1="611.055" y2="775.57" fill="none" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8"/><circle cx="851.312" cy="618.65" r="4.164" fill="none" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8"/><path fill="none" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" d="M883.329,641.242c1.41,1.818,1.08,4.435-0.739,5.844c-1.814,1.41-4.432,1.079-5.842-0.738c-1.409-1.815-1.078-4.433,0.738-5.844 C879.305,639.096,881.92,639.428,883.329,641.242z"/><ellipse cx="909.955" cy="690.856" fill="#31536E" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" rx="8.068" ry="8.328" transform="matrix(0.7902 -0.6129 0.6129 0.7902 -232.4812 702.6757)"/><ellipse cx="930.024" cy="717.028" fill="none" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" rx="2.706" ry="2.793" transform="matrix(0.79 -0.6131 0.6131 0.79 -244.3098 720.8308)"/><ellipse cx="959.021" cy="745.919" fill="none" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" rx="2.705" ry="2.793" transform="matrix(0.7901 -0.6129 0.6129 0.7901 -255.9333 744.3307)"/><path fill="#FFF" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" d="M748.271,530.445c-2.446-6.905,2.196-17.128,11.607-24.426c10.754-8.342,23.66-9.706,28.829-3.044 c5.165,6.66,0.633,18.822-10.12,27.163c-6.389,4.956-13.539,7.449-19.371,7.26"/></g><g id="llave-1"><path fill="#FFF" stroke="#31536E" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" d="M614.113,522.867 c-15.51,13.144-25.266,32.768-25.266,54.689c0,30.556,19.152,56.628,46.152,66.933v53.651l10.41,12.492L635,724.513v29.149 l10,13.186v12.491l5.41,12.492L635,805.713v43.375l24.959,20.82L687,849.088v-204.94c26-10.53,45.135-36.366,45.135-66.591 c0-39.575-32.113-71.656-71.688-71.656c-13.148,0-25.486,3.542-36.077,9.723"/><path fill="none" stroke="#31536E" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" d="M649.429,535.988 c3.556-2.918,8.105-4.671,13.064-4.671c11.378,0,20.603,9.225,20.603,20.604c0,2.6-0.48,5.087-1.359,7.377 c-2.968,7.735-10.465,13.226-19.243,13.226c-11.38,0-20.604-9.225-20.604-20.603c0-1.879,0.252-3.699,0.724-5.429"/><line x1="672" x2="672" y1="645" y2="838" fill="none" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8"/></g><path fill="none" stroke="#31536E" stroke-miterlimit="10" stroke-width="8" d="M590.754,433.03 c-21.271,0-38.517-17.245-38.517-38.517c0-21.272,17.245-38.517,38.517-38.517s38.518,17.245,38.518,38.517 c0,16.125-9.91,29.936-23.972,35.674"/><g><path fill="none" stroke="#31536E" stroke-miterlimit="10" stroke-width="8" d="M681.732,559.303 c-52.018-6.146-92.366-50.394-92.366-104.065c0-57.877,46.918-104.795,104.796-104.795c57.875,0,104.793,46.918,104.793,104.795 c0,4.064-0.23,8.074-0.68,12.018"/><path fill="none" stroke="#31536E" stroke-miterlimit="10" stroke-width="8" d="M682.455,546.806 c-45.45-5.752-80.598-44.555-80.598-91.568c0-50.978,41.325-92.304,92.305-92.304c50.977,0,92.302,41.326,92.302,92.304 c0,2.717-0.117,5.406-0.348,8.063"/></g><path fill="#FFF" stroke="#31536E" stroke-miterlimit="10" stroke-width="8" d="M517.327,448.165 c-1.794,13.101-13.868,22.268-26.969,20.475l-355.832-48.703c-13.101-1.793-22.268-13.868-20.476-26.969l16.799-122.736 c1.793-13.102,13.867-22.269,26.969-20.476l355.831,48.702c13.102,1.794,22.269,13.868,20.475,26.969L517.327,448.165z"/><g><path fill="#FFF" stroke="#31536E" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="8" d="M788.189,501.559c-11.944,24.199-32.955,43.123-58.598,52.332l-6.449-10.99c22.528-7.444,41.213-23.33,52.313-43.91 L788.189,501.559z"/></g><g id="logo-decidim"><path fill="#FFF" d="M403.485,369.949c-35.105-4.969-59.938-37.072-55.925-72.299l-1.195-0.152 c-4.971,35.104-37.074,59.937-72.301,55.924l-0.153,1.196c35.135,4.73,59.968,36.834,55.924,72.301l1.196,0.152 c4.731-35.136,36.835-59.968,72.301-55.925L403.485,369.949z"/><path fill="#31536E" d="M403.485,369.949c4.013-35.227-20.819-67.33-55.925-72.299 C343.547,332.877,368.379,364.98,403.485,369.949z" class="fill-primary"/><path fill="#31536E" d="M403.332,371.146c-35.196-4.252-67.3,20.58-72.301,55.925 C366.259,431.084,398.362,406.251,403.332,371.146z" class="fill-primary"/><path fill="#31536E" d="M282.252,289.309l-8.189,64.113l0,0c35.197,4.252,67.301-20.581,72.301-55.924L282.252,289.309z" class="fill-primary"/><path fill="#31536E" d="M273.911,354.618L273.911,354.618l-8.188,64.112l64.111,8.189 C333.849,391.691,309.016,359.587,273.911,354.618z" class="fill-primary"/><path fill="#31536E" d="M273.911,354.618c-4.252,35.196,20.58,67.3,55.924,72.301 C333.849,391.691,309.016,359.587,273.911,354.618z" class="fill-primary"/><path fill="#31536E" d="M274.063,353.421c35.197,4.252,67.301-20.581,72.301-55.924 C310.897,293.453,278.794,318.285,274.063,353.421z" class="fill-primary"/></g><g id="stars-1" class="stars"><path fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4" d="M429,158.355C429,143.667,410.333,123,393.645,123C409,123,429,102.667,429,87.645C429,102.667,445.666,123,464.355,123 C445.333,123,429,143.667,429,158.355z"/><g><circle cx="860.382" cy="125.411" r="13.5" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="843.883" x2="822.67" y1="108.676" y2="87.463" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="877.824" x2="899.037" y1="142.617" y2="163.83" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="877.117" x2="898.33" y1="109.383" y2="88.17" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="843.883" x2="822.67" y1="142.617" y2="163.83" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/></g><g><line x1="798.612" x2="772.45" y1="927.094" y2="953.258" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="763.258" x2="737.095" y1="962.449" y2="988.613" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="797.905" x2="771.742" y1="988.613" y2="962.449" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="762.551" x2="736.388" y1="953.258" y2="927.094" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/></g><path fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4" d="M1028.592,902.609c0,0-21.566,4.035-26.516,8.983c-4.948,4.948-8.982,26.515-8.982,26.515s-4.035-21.566-8.984-26.515 c-4.948-4.948-26.514-8.983-26.514-8.983s22.077-4.546,26.514-8.983c4.438-4.438,8.984-26.515,8.984-26.515 s4.034,21.566,8.982,26.515C1007.025,898.574,1028.592,902.609,1028.592,902.609z"/><g><circle cx="188.501" cy="902.667" r="16.604" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><circle cx="152.6" cy="902.667" r="6.432" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><circle cx="188.501" cy="938.568" r="6.432" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><circle cx="224.402" cy="902.667" r="6.432" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><circle cx="188.501" cy="866.766" r="6.432" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/></g><g><line x1="358.746" x2="413.649" y1="617.973" y2="672.878" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="413.649" x2="358.746" y1="617.973" y2="672.878" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="368" x2="341" y1="645" y2="645" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="406" x2="433" y1="645" y2="645" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="387" x2="387" y1="664" y2="691" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="387" x2="387" y1="626" y2="599" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/></g><g><line x1="133" x2="133" y1="98" y2="177" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><line x1="172" x2="93" y1="138" y2="138" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><circle cx="113" cy="157.5" r="7.039" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><circle cx="113" cy="117.5" r="7.039" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><circle cx="153" cy="157.5" r="7.039" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/><circle cx="153" cy="117.5" r="7.039" fill="#FFD92B" stroke="#31536E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4"/></g></g></g></svg>

data/app/packs/src/decidim/autocomplete.js

@@ -0,0 +1,298 @@
+import AutoCompleteJS from "@tarekraafat/autocomplete.js";
+
+export default class AutoComplete {
+  constructor(el, options = {}) {
+    this.element = el;
+    this.stickySelectedSpan = null;
+    this.clearStickySelectionSpan = null;
+    this.stickyHiddenInput = null;
+    this.promptDiv = null;
+    const thresholdTemp = options.threshold || 2;
+    this.options = Object.assign({
+      // Defines name of the hidden input (e.g. assembly_member[user_id])
+      name: null,
+      // Placeholder of the visible input field
+      placeholder: "",
+      // Defines what happens after user has selected value from suggestions
+      // sticky - Allows selecting a single value and not editing the value after selected (e.g. as the admin autocomplete fields)
+      // single - Allows selecting a single value and editing the selected text after the selection (e.g. geocoding field)
+      // multi - Allows selecting multiple values
+      // null (default) - Disable selection event handling in this class
+      mode: null,
+      // Defines if we show input help (e.g. "Type at least three characters to search") or not.
+      searchPrompt: false,
+      // Defines search prompt message, only shown if showPrompt is enabled!
+      searchPromptText: `Type at least ${thresholdTemp} characters to search`,
+      // Defines items that are selected already when page is loaded before user selects them. (e.g. when form submit fails)
+      selected: null,
+      // Defines how many characters input has to have before we start searching
+      threshold: thresholdTemp,
+      // Defines how many results to show in the autocomplete selection list
+      // by maximum.
+      maxResults: 10,
+      // Defines the data keys against which to match the user input when
+      // searching through the results. For example, when the following
+      // data is returned by the API:
+      //   { id: 123, name: "John", nickname: "john", __typename: "User" }
+      //
+      // You can define the data keys array as ["name", "nickname"] in
+      // which case the results shown to user would be only those that
+      // have matching text in these defined fields.
+      dataMatchKeys: null,
+      // The data source is a method that gets the callback parameter as
+      // its first argument which should be called with the results array
+      // once they are returned by the API.
+      // For example:
+      //   (query, callback) => {
+      //     (async () => {
+      //       const results = await callAjax(`/api/url?query=${query}`);
+      //       callback(results);
+      //     })();
+      //   }
+      //
+      // Signature: (callback: Function)
+      dataSource: () => [],
+      // Filters the data list returned by the data source before it is shown
+      // to the user. Can be used e.g. to hide already selected values from
+      // the list.
+      dataFilter: null,
+      // Delay in milliseconds how long to wait after user action before
+      // doing a backend request.
+      delay: 200,
+      // Allows modifying the suggested items before they are displayed in the list
+      // Signature: (element: HTMLElement, value: Object)
+      modifyResult: null
+    }, options);
+
+    this.autocomplete = new AutoCompleteJS({
+      selector: () => this.element,
+      placeHolder: options.placeholder,
+      // Delay (milliseconds) before autocomplete engine starts. It's preventing many queries when user is typing fast.
+      debounce: 200,
+      threshold: this.options.threshold,
+      data: {
+        keys: this.options.dataMatchKeys,
+        src: async (query) => {
+          const fetchResults = () => {
+            return new Promise((resolve) => {
+              this.options.dataSource(query, resolve);
+            });
+          }
+
+          try {
+            return await fetchResults();
+          } catch (error) {
+            return error;
+          }
+        },
+        filter: (list) => {
+          if (this.options.dataFilter) {
+            return this.options.dataFilter(list);
+          }
+
+          return list;
+        }
+      },
+      resultsList: {
+        maxResults: this.options.maxResults
+      },
+      resultItem: {
+        element: (item, data) => {
+          if (!this.options.modifyResult) {
+            return;
+          }
+
+          this.options.modifyResult(item, data.value);
+        }
+      },
+      events: {
+        input: {
+          blur: () => {
+            this.promptDiv.style.display = "none";
+          }
+        }
+      }
+    });
+
+    this.acWrapper = this.element.closest(".autoComplete_wrapper");
+    this.element.ac = this.autocomplete;
+
+    // Stop input field from bubbling open and close events to parent elements,
+    // because foundation closes modal from these events.
+    const stopPropagation = (event) => {
+      event.stopPropagation();
+    }
+    this.element.addEventListener("close", stopPropagation);
+    this.element.addEventListener("open", stopPropagation);
+
+    this.createPromptDiv();
+
+    switch (this.options.mode) {
+    case "sticky":
+      this.createStickySelect(this.options.name);
+      break;
+    case "multi":
+      this.createMultiSelect(this.options.name);
+      break;
+    default:
+    }
+  }
+
+  setInput(value) {
+    this.autocomplete.input.value = value;
+  }
+
+  handleEvent(event) {
+    switch (this.options.mode) {
+    case "single":
+      this.setInput(event.detail.selection.value[event.detail.selection.key]);
+      break;
+    case "sticky":
+      this.handleStickyEvents(event);
+      break;
+    case "multi":
+      this.handleMultiEvents(event);
+      break;
+    default:
+    }
+  }
+
+  handleMultiEvents(event) {
+    switch (event.type) {
+    case "selection":
+      this.addMultiSelectItem(event.detail.selection);
+      break;
+    default:
+    }
+  }
+
+  handleStickyEvents(event) {
+    switch (event.type) {
+    case "selection":
+      this.addStickySelectItem(event.detail.selection);
+      break;
+    case "click":
+      if (event.target === this.clearStickySelectionSpan) {
+        this.removeStickySelection();
+      }
+      break;
+    case "keyup":
+      if (this.stickyHiddenInput.value !== "" && event.target === this.element && (["Escape", "Backspace", "Delete"].includes(event.key) || (/^[a-z0-9]$/i).test(event.key))) {
+        this.removeStickySelection();
+      } else if (this.options.searchPrompt) {
+        if (this.stickyHiddenInput.value === "" && this.element.value.length < this.options.threshold) {
+          this.promptDiv.style.display = "block";
+        } else {
+          this.promptDiv.style.display = "none";
+        }
+      }
+      break;
+    default:
+    }
+  }
+
+  createHiddenInput(value) {
+    const hiddenInput = document.createElement("input");
+    hiddenInput.name = this.options.name;
+    hiddenInput.type = "hidden";
+    if (value) {
+      hiddenInput.value = value;
+    }
+    this.acWrapper.prepend(hiddenInput);
+    return hiddenInput;
+  }
+
+  removeStickySelection() {
+    this.stickyHiddenInput.value = "";
+    this.element.placeholder = this.options.placeholder;
+    this.clearStickySelectionSpan.style.display = "none";
+    this.stickySelectedSpan.style.display = "none";
+  }
+
+  addStickySelectItem(selection) {
+    this.stickyHiddenInput.value = selection.value.value;
+    this.element.placeholder = "";
+    this.stickySelectedSpan.innerHTML = selection.value[selection.key];
+    this.stickySelectedSpan.style.display = "block";
+    this.clearStickySelectionSpan.style.display = "block";
+    this.setInput("");
+  }
+
+  addMultiSelectItem(selection) {
+    this.setInput("");
+    const chosen = document.createElement("span");
+    chosen.classList.add("label", "primary", "autocomplete__selected-item", "multi");
+    chosen.innerHTML = selection.value[selection.key];
+    const clearSelection = document.createElement("span");
+    clearSelection.classList.add("clear-multi-selection");
+    clearSelection.innerHTML = "&times;";
+    clearSelection.setAttribute("data-remove", selection.value.value);
+    clearSelection.addEventListener("click", (evt) => {
+      const hiddenInput = this.acWrapper.querySelector(`input[type='hidden'][value='${selection.value.value}']`);
+      if (hiddenInput) {
+        hiddenInput.remove();
+        evt.target.parentElement.remove();
+      }
+    });
+    chosen.appendChild(clearSelection);
+
+    const multiSelectWrapper = this.acWrapper.querySelector(".multiselect");
+    const inputContainer = multiSelectWrapper.querySelector("span.input-container");
+    multiSelectWrapper.insertBefore(chosen, inputContainer);
+    this.createHiddenInput(selection.value.value);
+  }
+
+  createStickySelect() {
+    this.stickySelectedSpan = document.createElement("span");
+    this.stickySelectedSpan.classList.add("autocomplete__selected-item", "sticky");
+    this.stickySelectedSpan.style.display = "none";
+    this.stickySelectedSpan.addEventListener("click", () => this.element.focus());
+    this.stickyHiddenInput = this.createHiddenInput();
+
+    this.clearStickySelectionSpan = document.createElement("span");
+    this.clearStickySelectionSpan.className = "clear-sticky-selection";
+    this.clearStickySelectionSpan.innerHTML = "&times;";
+    this.clearStickySelectionSpan.style.display = "none";
+    this.clearStickySelectionSpan.addEventListener("click", this);
+
+    this.element.addEventListener("selection", this);
+    this.element.addEventListener("keyup", this);
+
+    this.acWrapper.insertBefore(this.clearStickySelectionSpan, this.element);
+    this.acWrapper.insertBefore(this.stickySelectedSpan, this.element);
+    if (this.options.selected) {
+      this.addStickySelectItem(this.options.selected);
+    }
+  }
+
+  createMultiSelect() {
+    const multiSelectWrapper = document.createElement("div");
+    multiSelectWrapper.classList.add("multiselect");
+
+    const inputContainer = document.createElement("span");
+    inputContainer.classList.add("input-container");
+
+    multiSelectWrapper.appendChild(inputContainer);
+    this.acWrapper.prepend(multiSelectWrapper);
+    inputContainer.appendChild(this.element);
+
+    this.element.addEventListener("selection", this);
+    multiSelectWrapper.addEventListener("click", () => {
+      this.element.focus();
+    })
+
+    if (this.options.selected) {
+      this.options.selected.forEach((selection) => {
+        this.addMultiSelectItem(selection);
+      })
+    }
+  }
+
+  createPromptDiv() {
+    this.promptDiv = document.createElement("div");
+    this.promptDiv.classList.add("search-prompt");
+    this.promptDiv.style.display = "none";
+    this.promptDiv.innerHTML = this.options.searchPromptText;
+    this.acWrapper.appendChild(this.promptDiv);
+  }
+}

data/app/packs/src/decidim/cookie_consent/consent_manager.js

@@ -0,0 +1,133 @@
+import Cookies from "js-cookie";
+
+class ConsentManager {
+  // Options should contain the following keys:
+  // - modal - HTML element of the cookie consent modal (e.g. "<div id="cc-modal">Foo bar</div>")
+  // - categories - Available cookie categories (e.g. ["essential", "preferences", "analytics", "marketing"])
+  // - cookieName - Name of the cookie saved in the browser (e.g. "decidim-consent")
+  // - warningElement - HTML element to be shown when user hasn't accepted necessary cookie(s) to display the content.
+  constructor(options) {
+    this.modal = options.modal;
+    this.categories = options.categories;
+    this.cookieName = options.cookieName;
+    this.cookie = Cookies.get(this.cookieName);
+    this.warningElement = options.warningElement;
+    if (this.cookie) {
+      this.updateState(JSON.parse(this.cookie));
+    } else {
+      this.updateState({});
+    }
+  }
+
+  updateState(newState) {
+    this.state = newState;
+    Cookies.set(this.cookieName, JSON.stringify(this.state));
+    this.updateModalSelections();
+    this.triggerState();
+  }
+
+  triggerJavaScripts() {
+    document.querySelectorAll("script[type='text/plain'][data-consent]").forEach((script) => {
+      if (this.state[script.dataset.consent]) {
+        const activeScript = document.createElement("script");
+        if (script.src.length > 0) {
+          activeScript.src = script.src;
+        } else {
+          activeScript.innerHTML = script.innerHTML;
+        }
+        script.parentNode.replaceChild(activeScript, script);
+      }
+    });
+
+    const event = new CustomEvent("dataconsent", { detail: this.state });
+    document.dispatchEvent(event);
+  }
+
+  triggerIframes() {
+    if (this.allAccepted()) {
+      document.querySelectorAll(".disabled-iframe").forEach((original) => {
+        let newElement = this.transformElement(original, "iframe");
+        newElement.className = original.classList.toString().replace("disabled-iframe", "");
+        original.parentElement.appendChild(newElement);
+        original.remove();
+      })
+    } else {
+      document.querySelectorAll("iframe").forEach((original) => {
+        const newElement = this.transformElement(original, "div");
+        newElement.className = `disabled-iframe ${original.classList.toString()}`;
+        original.parentElement.appendChild(newElement);
+        original.remove();
+      })
+    }
+  }
+
+  transformElement(original, targetType) {
+    const newElement = document.createElement(targetType);
+    ["src", "allow", "frameborder", "style", "loading"].forEach((attribute) => {
+      newElement.setAttribute(attribute, original.getAttribute(attribute));
+    })
+
+    return newElement;
+  }
+
+  triggerWarnings() {
+    document.querySelectorAll(".disabled-iframe").forEach((original) => {
+      if (original.querySelector(".cookie-warning")) {
+        return;
+      }
+
+      let cloned = this.warningElement.cloneNode(true);
+      cloned.classList.remove("hide");
+      original.appendChild(cloned);
+    });
+  }
+
+  triggerState() {
+    this.triggerJavaScripts();
+    this.triggerIframes();
+    this.triggerWarnings();
+  }
+
+  allAccepted() {
+    return this.categories.every((category) => {
+      return this.state[category] === true;
+    });
+  }
+
+  updateModalSelections() {
+    const categoryElements = this.modal.querySelectorAll(".category-wrapper");
+
+    categoryElements.forEach((categoryEl) => {
+      const categoryInput = categoryEl.querySelector("input");
+      if (this.state && this.state[categoryInput.name]) {
+        categoryInput.checked = true;
+      } else if (!categoryInput.disabled) {
+        categoryInput.checked = false;
+      }
+    });
+  }
+
+  saveSettings(newState) {
+    this.updateState(newState);
+  }
+
+  acceptAll() {
+    const newState = {};
+    this.categories.forEach((category) => {
+      newState[category] = true;
+    });
+    this.updateState(newState);
+  }
+
+  rejectAll() {
+    this.updateState({
+      essential: true
+    });
+  }
+
+  getState() {
+    return this.state;
+  }
+}
+
+export default ConsentManager

data/app/packs/src/decidim/cookie_consent/cookie_consent.js

@@ -0,0 +1,103 @@
+import ConsentManager from "src/decidim/cookie_consent/consent_manager";
+
+const initDialog = (manager) => {
+  if (Object.keys(manager.state).length > 0) {
+    return;
+  }
+  const dialogWrapper = document.querySelector("#cc-dialog-wrapper");
+  dialogWrapper.classList.remove("hide");
+
+  const acceptAllButton = dialogWrapper.querySelector("#cc-dialog-accept");
+  const rejectAllButton = dialogWrapper.querySelector("#cc-dialog-reject");
+  const settingsButton = dialogWrapper.querySelector("#cc-dialog-settings");
+
+  acceptAllButton.addEventListener("click", () => {
+    manager.acceptAll();
+    dialogWrapper.style.display = "none";
+  });
+
+  rejectAllButton.addEventListener("click", () => {
+    manager.rejectAll();
+    dialogWrapper.style.display = "none";
+  });
+
+  settingsButton.addEventListener("click", () => {
+    dialogWrapper.style.display = "none";
+  });
+}
+
+const initModal = (manager) => {
+  const categoryElements = manager.modal.querySelectorAll(".category-wrapper");
+
+  categoryElements.forEach((categoryEl) => {
+    const categoryButton = categoryEl.querySelector(".cc-title");
+    const categoryDescription = categoryEl.querySelector(".cc-description");
+    categoryButton.addEventListener("click", () => {
+      const hidden = categoryDescription.classList.contains("hide");
+      if (hidden) {
+        categoryButton.classList.add("open");
+        categoryDescription.classList.remove("hide");
+      } else {
+        categoryButton.classList.remove("open");
+        categoryDescription.classList.add("hide");
+      }
+    })
+  })
+
+  const acceptAllButton = manager.modal.querySelector("#cc-modal-accept");
+  const rejectAllButton = manager.modal.querySelector("#cc-modal-reject");
+  const saveSettingsButton = manager.modal.querySelector("#cc-modal-save");
+
+  acceptAllButton.addEventListener("click", () => {
+    manager.acceptAll();
+  })
+
+  rejectAllButton.addEventListener("click", () => {
+    manager.rejectAll();
+  })
+
+  saveSettingsButton.addEventListener("click", () => {
+    let newState = {};
+    manager.categories.forEach((category) => {
+      const accepted = manager.modal.querySelector(`input[name='${category}']`).checked;
+      if (accepted) {
+        newState[category] = true;
+      }
+    })
+    manager.saveSettings(newState);
+  })
+}
+
+const initDisabledIframes = (manager) => {
+  const disabledIframes = document.querySelectorAll(".disabled-iframe")
+  if (manager.allAccepted()) {
+    disabledIframes.forEach((elem) => {
+      const iframe = document.createElement("iframe")
+      iframe.setAttribute("src", elem.getAttribute("src"));
+      iframe.className = elem.classList.toString();
+      iframe.setAttribute("allowfullscreen", elem.getAttribute("allowfullscreen"));
+      iframe.setAttribute("frameborder", elem.getAttribute("frameborder"));
+      elem.parentElement.appendChild(iframe);
+      elem.remove();
+    })
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const modal = document.querySelector("#cc-modal");
+  if (!modal) {
+    return;
+  }
+
+  const categories = [...modal.querySelectorAll(".category-wrapper")].map((el) => el.dataset.id)
+  const manager = new ConsentManager({
+    modal: modal,
+    categories: categories,
+    cookieName: window.Decidim.config.get("consent_cookie_name"),
+    warningElement: document.querySelector(".cookie-warning")
+  });
+
+  initDisabledIframes(manager);
+  initModal(manager, categories);
+  initDialog(manager);
+});

data/app/packs/src/decidim/datalist_select.js

@@ -0,0 +1,36 @@
+/**
+// Function adds feature to datalist that you can have different id and label.
+// Used with datalist_select_helper.rb#datalist_select
+ * @param {HTMLElement} target - dataselect wrapper
+ * @param {Function} callback - the function to be executed after a successful selection.
+ * @returns {Void} - Returns nothing.
+ */
+
+export const datalistSelect = (target, callback) => {
+  if (!target) {
+    return;
+  }
+
+  const input = target.querySelector("input[type='hidden'");
+  const textInput = target.querySelector("input[type='text']");
+  const items = target.querySelector("datalist").children;
+
+  const selectValue = (selected) => {
+    for (let idx = 0; idx < items.length; idx += 1) {
+      if (items[idx].innerHTML === selected) {
+        const id = items[idx].dataset.value;
+        input.value = id;
+        if (callback) {
+          return callback(id);
+        }
+        return true;
+      }
+    }
+    return false;
+  }
+
+  textInput.addEventListener("input", () => {
+    const selected = textInput.value;
+    selectValue(selected);
+  })
+}